Как заставить кнопки действий появляться в той же строке в jqgrid - PullRequest
0 голосов
/ 27 августа 2011

Кнопки действий добавляются в столбцы jqGrid, используя colmodel ниже.Ширина столбца 45 достаточна для удержания обеих кнопок в одном ряду.Кнопки редактирования и удаления появляются в отдельных строках, а высота строк увеличивается.По неизвестной причине перед обеими кнопками есть свободное место, в левой части столбца они не отображаются.

Если начинается встроенное редактирование, кнопки сохранения и отмены также появляются в отдельных строках.

Как выполнитьзаставить кнопки появляться в одной строке без увеличения ширины столбца?

grid.jqGrid({
  colModel: [{name:_actions,width:45,
  formatter:"actions",
  formatoptions:
    {keys:true}
}, ....

update

Панель инструментов содержит текст справа от кнопки.Удаление 30px из стиля создает перекрывающиеся кнопки, поэтому я не могу удалить его.

В соответствии с предложением Олега, я добавил

.ui-inline-edit, .ui-inline-del, .ui-inline-save, .ui-inline-cancel
{
    margin-right: 0px !important;
}

и

                colModel: [{"hidden":false,"label":" Muuda ","name":"_actions","width":($.browser.webkit == true? 58: 53)
,"align":"center","sortable":false,"formatter":"actions","formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {
actionresponse = jqXHR;
return true;
}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse)}
,"onError":errorfunc
,"extraparam":{"_dokdata":FormData
},"afterRestore":setFocusToGrid
,"onEdit":function (rowID) {
                            if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
                                       cancelEditing($('#grid'));
                           lastSelectedRow = rowID;
                                  }
}},

к стилю, но это не такизменить что-нибудь, кнопки по-прежнему появляются в два ряда.Как исправить?

Обновление 2

добавление исправлено: true ставит кнопки в одну строку.Есть две проблемы:

Две маленькие кнопки

В столбце есть только кнопка редактирования (delbutton: используется опция false).Ширина кнопки редактирования мала, а значок не центрирован.Как увеличить ширину кнопки редактирования до ширины столбца - несколько пикселей, чтобы щелчок в любом месте столбца включал режим редактирования и показывал значок редактирования в центре столбца?Как увеличить ширину кнопок сохранения рекламного блока, чтобы они занимали 50% - несколько пикселей ширины столбца действия?

Многократные быстрые щелчки вызывают кнопку редактирования, поэтому перестает работать

Кнопка сохранения появляется в одном местекак кнопка редактирования и сохранения на сервере занимает некоторое время.Если быстро щелкнуть по этому месту, режим встроенного редактирования переключается до завершения сохранения, и элементы управления автозаполнением больше не создаются.после этого кнопка редактирования вообще не работает.Как предотвратить многократное нажатие кнопки сохранения: отключить кнопку сохранения или всю сетку при щелчке один раз или другое решение и показывать сообщение «Сохранение ...» до тех пор, пока сохранение не будет завершено?

используемый стиль:

td.ui-pg-button > div.ui-pg-div { margin-right: 30px } 

colmodel:

colModel: [{
fixed:true,
label:" Change ",
name:"_actions",
width:($.browser.webkit == true? 58: 53)
,align:"center",
sortable:false,
formatter:"actions",
formatoptions:{"keys":true,"delbutton":false,
  "onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
  ,"afterSave":function (rowID) {
      cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse);actionresponse=null; }
  ,"onError":errorfunc
  ,"extraparam":{"_dokdata":FormData
  },
afterRestore:setFocusToGrid
,onEdit:function (rowID) {
     if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
        cancelEditing($('#grid'));
     lastSelectedRow = rowID;
   }
}}

1 Ответ

1 голос
/ 28 августа 2011

Я нахожу 45px в качестве ширины столбца с formatter:"actions" от маленького к маленькому.Мне кажется, что 53px или 58px выглядит лучше.Расчет следующий: каждая кнопка имеет 16 пикселей.Две кнопки будут показаны одновременно.Вторая кнопка (Удалить или Отмена) имеет left-margin:5px.Кроме того, все кнопки будут размещены внутри div, который имеет margin-left: 8px;.Если вы хотите иметь одинаковое поле справа от второй кнопки, общая ширина должна быть 8 + 16 + 5 + 16 + 8 = 53 пикселя.В случае использования браузера Webkit он должен быть на 5px больше из-за другого расчета ширины столбца (расчет будет без полей и отступов, которые по умолчанию составляют 5px).Поэтому я бы порекомендовал вам использовать

width: ($.browser.webkit == true? 58: 53)

. Ваша основная проблема существует из-за того, что вы установили margin-right:30px класса ui-pg-div в своем CSS .Я мог видеть это только потому, что вы ранее отправили мне URL своей демонстрационной страницы.

Все кнопки действий используют ui-pg-div вместе с ui-inline-edit, ui-inline-del, ... для кнопок действий.Поэтому вам необходимо: либо удалить настройку margin-right:30px для класса ui-pg-div, либо перезаписать margin-right для ui-inline-edit, ui-inline-del, ui-inline-save и ui-inline-cancel с учетом дополнительного атрибута !important.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...