Я хочу добавить кнопку в каждую строку в моей сетке, которая откроет новое окно. Не видите эту функцию в этом очень богатом элементе управления. Должно быть что-то отсутствует
Добавление кнопки в строку в jqgrid
Ответ 1
Вот один пример из демонстрационной страницы jqGrid:
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act', index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});
Вы также можете сделать это с помощью пользовательского форматирования.
Ответ 2
текущий самый высокий ответ помещает код пользовательской кнопки в loadComplete. it shoudl be gridComplete. Вероятно, API был изменен с момента ответа на вопрос.
Ответ 3
в colModel, вы можете форматировать форматтера, следуя коду
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
Ответ 4
Этот пример может оказаться полезным. Смотрите этот wiki и этот ответ от Олега.
Ответ 5
Я использую jqgrid для отображения списка контактов. У меня есть столбец с именем "Роль" с кнопкой "Определить", чтобы вы могли щелкнуть по ней и переопределить эту контактную роль как первичный, вторичный, коммерческий или другой.
Первоначально элемент кнопки отправлялся в ячейку сетки через XML, где $rowid был идентификатором строки (PHP):
<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>
Это работало нормально, пока я не установил autoencode: true
в сетке. Если для этой опции установлено значение true, столбец просто отображает html.
Крэйг ответил на аналогичное поведение, но небольшая вариация этого сделала трюк. Я думал, что поделюсь:
gridcomplete: function() {
var ids = $grid.getDataIDs();
for (var i=0;i<ids.length;i++){
var cl = ids[i],
button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
if (cl.substr(0,2) !== "jq") {
$('#'+cl).find('td[aria-describedby="list_role"]').html(button);
}
}
}
Другими словами, метод setRowData не работал с autoencode, установленным в true, но DOM можно манипулировать по желанию в событии gridcomplete.