Thêm một nút vào một hàng trong jqgrid

Question

Tôi muốn thêm một nút vào mỗi hàng trong lưới của tôi sẽ hiển thị cửa sổ mới. Không thấy tính năng này trong điều khiển rất phong phú này. Phải được thiếu cái gì

Answer 1

Dưới đây là một ví dụ, từ trang demo 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}); 

Bạn cũng có thể làm điều đó với một custom formatter.

Answer 2

câu trả lời cao nhất hiện tại đặt mã nút tùy chỉnh trong loadComplete. nó shoudl là gridComplete. API có thể đã được thay đổi kể từ khi câu hỏi được trả lời.

Answer 3

Điều này example có thể hữu ích. Xem trang này wiki và this answer từ Oleg.

Answer 4

Tôi đang sử dụng một jqgrid để hiển thị danh sách địa chỉ liên hệ. Tôi có một cột có tên 'Vai trò' với nút có nội dung 'Xác định', sao cho bạn có thể nhấp vào cột đó và xác định lại vai trò của liên hệ đó là chính, phụ, bán hàng hoặc khác.

Ban đầu, các yếu tố nút đã được gửi đến các tế bào lưới qua XML, trong đó $ rowid là id của hàng (PHP):

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

này đã làm việc tốt cho đến khi tôi đặt autoencode: true trên lưới. Với tùy chọn này được đặt thành true, cột chỉ đơn giản hiển thị html.

Câu trả lời của Craig hiển thị hành vi tương tự, nhưng một biến thể nhỏ của nó đã thực hiện thủ thuật. Tôi nghĩ rằng tôi muốn chia sẻ:

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

Nói cách khác, phương pháp setRowData đã không làm việc với autoencode thiết lập là true, nhưng DOM có thể được thao tác như mong muốn trong sự kiện gridcomplete.

Answer 5

trong colModel, bạn có thể định dạng sử dụng định dạng theo mã sau

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