Добавление кнопки в строку в jqgrid

Question

Я хочу добавить кнопку в каждую строку в моей сетке, которая откроет новое окно. Не видите эту функцию в этом очень богатом элементе управления. Должно быть что-то отсутствует

Answer 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}); 

Вы также можете сделать это с custom formatter.

Answer 2

Текущий самый высокий ответ помещает пользовательский код кнопки в loadComplete. it shoudl be gridComplete. Вероятно, API был изменен с момента ответа на вопрос.

Answer 3

Возможно, это example. См. Эту страницу wiki и this answer от Олега.

Answer 4

Я использую 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, установленным в действительности, но DOM можно манипулировать, как требуется в gridcomplete случае.

Answer 5

в colModel, вы можете отформатировать с помощью форматировщик следуя код

formatter:function (cellvalue, options, rowObject) {  
    return "<input type='button' value='somevalue' onclick='some_function'\>"; 
}