Adding a button to a row in jqgrid

Asked
Viewd53411

17

I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something

53411

5 ответов

8

текущий самый высокий ответ помещает пользовательский код кнопки в loadComplete. это должно быть gridComplete . API, вероятно, был изменен после того, как был дан ответ на вопрос.

16

Here's one example, from the jqGrid demos page:

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

You can also do it with a custom formatter.

  • You add a button the exact same way, but you put a different JavaScript method in the onclick. No, you do not override saveRow or editRow. That would break editing!

    Craig Stuntz20 августа 2009, 13:10
  • that will only enable buttons for Save,editing , what I want is to fire a function that opens the new window. I guess I just override the .saveRow or .EditRow

    20 августа 2009, 13:05
0

Этот пример может оказаться полезным. См. Эту страницу wiki и этот ответ от Олега.

6

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

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

Я использую 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.