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

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

这是我的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 wiki：

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

我在当前的项目中使用了它，效果很好。 优点是您可以使用任何网格function，因为子网格只是另一个网格。 所以你不需要任何subGrid样式选项。 相反，你会有类似的东西：

  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

Ed Gibbs在正确的轨道上方。 确实，当您将网格创建为子网格时，您可以访问常规网格上的所有选项。 在子网格中定义这两个选项至关重要。 省略这些选项将不允许您执行内联编辑。

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