Agregar un botón a una fila en jqgrid

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 tan rico. Estar perdiendo algo

Answer 1

Aquí hay un ejemplo, desde la página de demos 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 puede hacerlo con un custom formatter.

Answer 2

la respuesta más alta actual coloca el código de botón personalizado dentro de loadComplete. debería ser gridComplete. La API probablemente ha cambiado desde que se contestó la pregunta.

Answer 3

Esto example podría ser útil. Consulte esta página wiki y this answer de Oleg.

Answer 4

Estoy usando una jqgrid para mostrar una lista de contactos. Tengo una columna llamada 'Role' con un botón que dice 'Definir', de modo que puede hacer clic en ella y redefinir el rol de ese contacto como primario, secundario, de ventas u otro.

Originalmente, el elemento de botón estaba siendo enviado a la celda de cuadrícula a través de XML, donde $ rowid fue 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 me puse autoencode: true en la parrilla. Con esta opción establecida en verdadero, la columna simplemente mostraba el html.

La respuesta de Craig mostró un comportamiento similar, pero una ligera variación de ella hizo el truco. Yo 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 autoencode define como true, pero el DOM se puede manipular a voluntad dentro del evento gridcomplete.

Answer 5

en colModel, puede dar formato utilizando formateador siguiendo código

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