español - Añadiendo un botón a una fila en jqgrid

jqgrid options

Question

Quiero agregar un botón a cada fila de mi cuadrícula que abrirá una nueva ventana. No vea esta característica en este control muy rico. Debe faltar algo

Answer 1

Aquí hay un ejemplo, desde la página de demostraciones de 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}); 

También puedes hacerlo con un formateador personalizado .

Answer 2

Este jsfiddle.net/russcam/VxpHf puede ser útil. Ver esta página wiki y esta respuesta de Oleg.

Answer 3

Estoy usando un jqgrid para mostrar una lista de contactos. Tengo una columna llamada ''Función'' con un botón que dice ''Definir'', de modo que puede hacer clic en ella y redefinir la función de ese contacto como primaria, secundaria, de ventas u otra.

Originalmente, el elemento del botón se enviaba a la celda de la cuadrícula a través de XML, donde $ rowid era el id de la fila (PHP):

<cell><![CDATA[<button data-idx=''{$rowid}'' class=''contact_role_button btn'' title=''Define Role...''>Define</button>]]></cell> 

Esto funcionó bien hasta que configuré autoencode: true en la cuadrícula. Con esta opción establecida en verdadero, la columna simplemente mostraba el html.

La respuesta de Craig mostró un comportamiento similar, pero una pequeña variación hizo el truco. Pensé en compartir:

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

En otras palabras, el método setRowData no funcionó con autocodificación establecida en verdadero, pero el DOM se puede manipular como se desee dentro del evento de cuadrícula completa.

Answer 4

en colModel, puede formatear usando el formateador siguiendo el código

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

Answer 5

la respuesta más alta actual coloca el código del botón personalizado dentro de loadComplete. debe ser cuadrícula completa . El API probablemente ha sido cambiado desde que se respondió la pregunta.