Dodawanie przycisku do wiersza w jqgrid

Question

Chcę dodać przycisk do każdego wiersza w mojej siatce, który spowoduje wyświetlenie nowego okna. Nie widzisz tej funkcji w tej bardzo bogatej kontroli. Musi być brakuje czegoś

Answer 1

Oto jeden z przykładów, od strony 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}); 

Można również zrobić to z custom formatter.

Answer 2

Aktualna najwyższa odpowiedź umieszcza niestandardowy kod przycisku w ramach loadComplete. to będzie gridComplete. Interfejs API prawdopodobnie został zmieniony od czasu udzielenia odpowiedzi na pytanie.

Answer 3

Może to być pomocne pod tym numerem example. Zobacz tę stronę wiki i this answer od Oleg.

Answer 4

Używam jqgrid do wyświetlania listy kontaktów. Mam kolumnę o nazwie "Rola" z przyciskiem "Zdefiniuj", która umożliwia jej kliknięcie i ponowne zdefiniowanie roli tego kontaktu jako podstawowej, drugorzędnej, sprzedaży lub innej.

Początkowo element przycisk był wysyłany do komórki siatki poprzez XML, gdzie $ rowid był identyfikator wiersza (PHP):

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

To działało w porządku, dopóki mogę ustawić autoencode: true na siatce. Po ustawieniu tej opcji na true kolumna wyświetlała po prostu HTML.

Odpowiedź Craiga pokazała podobne zachowanie, ale niewielka zmiana tego spowodowała. Myślałam, że dzielę:

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

Innymi słowy, sposób setRowData nie działa z autoencode wartość true, ale DOM można manipulować jako pożądane w gridcomplete imprezy.

Answer 5

w colModel, można sformatować za pomocą formatowania o następujący kod

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