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

I know how to do the inline edit with the main grid but is there a way to do it for the sub grids?

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

Here is my JS file:

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

});
});

2 个解决方案

#1

You can use grid the subgrid as grid option as detailed on the jqgrid wiki here:

你可以使用网格子网格作为网格选项，详见jqgrid wiki：

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

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

I've used this on a current project and it works well. The advantage is you can use any grid feature because the subgrid is just another grid. So you don't need any of the subGrid style options. Instead you'd have something like:

我在当前的项目中使用了它，效果很好。优点是您可以使用任何网格功能，因为子网格只是另一个网格。所以你不需要任何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"
       });
   }
  }); 

#2

Ed Gibbs is on the right track above. True, when you create the grid as a subgrid you have access to all the options you would on a regular grid. It is critical that you have these two options defined in your subgrid. Omitting these options will not allow you to perform inline editing.

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

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