如何使用JqGrid子网格进行内联编辑？

Question

我知道如何使用主网格进行内联编辑，但是有没有办法为子网格执行？

这里是我的JS文件：

$(function(){ 
    var lastsel; 
$("#list").jqGrid({ 
url:'example.php', 
postData:{q:1}, 
datatype: 'json', 
mtype: 'GET', 
colNames:['Anchor','Description','Email','Url','In Today','Out Today','In Total','Out Total','Credits','Ratio','Status'], 
colModel :[ 
    {name : 'anchor' , index : 'anchor', width : 55, 'editable':true, 'editoptions':{'size':30}}, 
    {'name' : 'description' , 'index' : 'description', 'width' : 55, 'editable':true, 'edittype':'textarea', 'editoptions':{'rows':'3','cols':'30'}}, 
    {'name' : 'email' , 'index' : 'email', 'width' : 55, 'editable':true, 'editoptions':{'size':30}}, 
    {'name' : 'url' , 'index' : 'url', 'width' : 55, 'editable':true, 'editoptions':{'size':30}}, 
    {'name' : 'in_today' , 'index' : 'in_today', 'width' : 55, 'align' : 'right'}, 
    {'name' : 'out_today' , 'index' : 'out_today', 'width' : 55, 'align' : 'right'}, 
    {'name' : 'in_total' , 'index' : 'in_total', 'width' : 55, 'align' : 'right'}, 
    {'name' : 'out_total' , 'index' : 'out_total', 'width' : 55, 'align' : 'right'}, 
    {'name' : 'credits' , 'index' : 'credits', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}}, 
    {'name' : 'ratio' , 'index' : 'ratio', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}}, 
    {'name' : 'status' , 'index' : 'status', 'width' : 55,'align' : 'center', 'editable':true, 'edittype':'checkbox', 'editoptions':{'value':"On:Off"}} 
], 
pager: '#pager', 
rowNum:10, 
rowList:[10,20,30], 
sortname: 'anchor', 
sortorder: 'desc', 
viewrecords: true, 
caption: 'My first grid', 
subGrid: true, 
subGridUrl: 'example.php?q=2', 
subGridModel: [{ name : ['Game','URL'],width : [200,300] }], 
onSelectRow: function(id){ 
    if(id && id!=lastsel){ 
     jQuery('#list').jqGrid('restoreRow',lastsel); 
     jQuery('#list').jqGrid('editRow',id, true, '', '', '', {'q':3,'oper':'trades-edit'}); 
     lastsel=id; 
    } 
}, 
editurl: "example.php" 

}); 
}); 

Answer 1

您可以使用网子网格为网格选项在jqGrid的维基这里详述：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid

我用这个上目前的项目，它运作良好。优点是你可以使用任何网格功能，因为子网格只是另一个网格。所以你不需要任何的子网格样式选项。相反，你会有这样的事情：

subGrid: true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
    // we pass two parameters 
    // subgrid_id is a id of the div tag created within a table 
    // the row_id is the id of the row 
    // If we want to pass additional parameters to the url we can use 
    // the method getRowData(row_id) - which returns associative array in type name-value 
    // here we can easy construct the following 
     var subgrid_table_id; 
     subgrid_table_id = subgrid_id+"_t"; 
     jQuery("#"+subgrid_table_id).jqGrid({ 
      url:"subgrid.php?q=2&id="+row_id, 
      datatype: "json", 
      colNames: ['Game','Url'], 
      colModel: [ 
      {name:"game",index:"num",width:80,key:true}, 
      {name:"url",index:"item",width:130}, 
      ], 
      height: 100%, 
      rowNum:20, 
      sortname: 'num', 
      sortorder: "asc" 
     }); 
    } 
    }); 

Answer 2

埃德吉布斯是在上面的正确轨道上。诚然，当你创建网格作为子网格时，你可以访问常规网格上的所有选项。在子网格中定义这两个选项至关重要。省略这些选项将不允许您执行内联编辑。

subGridRowExpanded: function(subgrid_id, row_id) { 
     ... 
     cellEdit: true, 
     cellsubmit: 'clientarray' 
     ... 
     .. 
    });