javascript - 如何使用 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

您可以使用 grid the subgrid 作为 grid 选项，如 jqgrid wiki here 所详述:

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