细胞编辑在分格和jqGrid的

Question

的家长格我有四级钻的倒在我的网格，其中，我想要做的单元格编辑在所有四个级别。我使用Grid作为子网格。

我的问题是，当我选择任何次网格内的任何小区（等级2，3，4）。同一个单元格正在所有级别上被选中。

即如果我选择，在上述水平列细胞也越来越选择在第4级的量。

以下是我工作的代码与JSON数据重新生产的场景。

请帮助。

在此先感谢。

jQuery(document).ready(function() 
    { 

var lastSelAsset; 
var lastSel; 
var transDate; 
var rowDataTest=""; 
var detailLevelLastSel; 
var thirdLevelLastSel; 
var levelTwoTableId; 
var levelFourSecurityNum; 
var levelThreePager; 
var transactionData = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}]; 


var transactionDataSecondLevel = [ 
    {id:"20",invdate:"2007-10-02",name:"test2",note:"note2",amount1:"300.00",tax1:"20.00",total1:"320.00"}, 
    {id:"21",invdate:"2007-09-01",name:"test3",note:"note3",amount1:"400.00",tax1:"30.00",total1:"430.00"}, 
    {id:"22",invdate:"2007-10-04",name:"test",note:"note",amount1:"200.00",tax1:"10.00",total1:"210.00"}, 
    {id:"23",invdate:"2007-10-05",name:"test2",note:"note2",amount1:"300.00",tax1:"20.00",total1:"320.00"}, 
    {id:"24",invdate:"2007-09-06",name:"test3",note:"note3",amount1:"400.00",tax1:"30.00",total1:"430.00"}]; 

var transactionDataThirdLevel = [ 
    {id:"25",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"26",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"28",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"29",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"30",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"31",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"32",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"33",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"34",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"35",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"36",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"37",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"38",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"39",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"40",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"41",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"42",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"43",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"44",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"45",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"46",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"47",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"48",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"49",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"50",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"51",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"52",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"53",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"54",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}]; 

var transactionDataFourthLevel = [ 
    {id:"55",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"56",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
    {id:"57",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
    {id:"58",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"59",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} 
]; 


$("#tList").jqGrid({ 
    data: transactionData,//Level 1 
    width: 1160, 
    multiselect: false, 
    height:275, 
    datatype: "local", 
    colNames : [ 'Inv No', 'Date', 
      'Client', 'Amount', 'Tax', 
      'Total', 'Notes' ], 
    colModel : [ { 
     name : 'id', 
     index : 'id', 
     width : 60, 
     sorttype : "int" 
    }, { 
     name : 'invdate', 
     index : 'invdate', 
     width : 90, 
     sorttype : "date" 
    }, { 
     name : 'name', 
     index : 'name', 
     width : 100 
    }, { 
     name : 'amount', 
     index : 'amount', 
     width : 80, 
     align : "right", 
     sorttype : "float", 
     editable : true 
    }, { 
     name : 'tax', 
     index : 'tax', 
     width : 80, 
     align : "right", 
     sorttype : "float", 
     editable : true 
    }, { 
     name : 'total', 
     index : 'total', 
     width : 80, 
     align : "right", 
     sorttype : "float", 
     editable : true 
    }, { 
     name : 'note', 
     index : 'note', 
     width : 150, 
     sortable : false 
    } ], 
    gridComplete: function(){ 

     $("#tList").setGridWidth($(window).width()-50); 
    }, 
    cellEdit: true, 
    cellsubmit: 'clientArray', 
    subGrid: true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
     var subgrid_table_id, pager_id; 
     subgrid_table_id = subgrid_id+"_per"; 
     //alert(subgrid_table_id +" -- Second level"); 
     levelTwoTableId = subgrid_table_id; 
     pager_id = "p_"+subgrid_table_id; 
     $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); 
     jQuery("#"+subgrid_table_id).jqGrid({ 
      data: transactionDataSecondLevel,//Level 2 
      datatype: "local", 
      autowidth : true, 
      multiselect: false, 
      colNames : [ 'Inv No', 'Date', 
          'Client', 'Amount1', 'Tax1', 
          'Total1', 'Notes' ], 
      colModel : [ { 
       name : 'id', 
       index : 'id', 
       width : 60, 
       sorttype : "int" 
      }, { 
       name : 'invdate', 
       index : 'invdate', 
       width : 90, 
       sorttype : "date" 
      }, { 
       name : 'name', 
       index : 'name', 
       width : 100 
      }, { 
       name : 'amount1', 
       index : 'amount1', 
       width : 80, 
       align : "right", 
       sorttype : "float", 
       editable : true 
      }, { 
       name : 'tax1', 
       index : 'tax1', 
       width : 80, 
       align : "right", 
       sorttype : "float", 
       editable : true 
      }, { 
       name : 'total1', 
       index : 'total1', 
       width : 80, 
       align : "right", 
       sorttype : "float", 
       editable : true 
      }, { 
       name : 'note', 
       index : 'note', 
       width : 150, 
       sortable : false 
      } ], 

      rowNum:-1, 
      sortname: 'num', 
      sortorder: "asc", height: '100%', 
      gridComplete: function(){ 

       $("#"+levelTwoTableId).setGridWidth($(window).width()-50); 
      }, 
      cellEdit: true, 
      cellsubmit: 'clientArray', 
      subGrid: true, 
      subGridRowExpanded: function(subgrid_id, row_id) { 
       var subgrid_table_id, pager_id; 
       subgrid_table_id = subgrid_id+"_asd"; 
       //alert(subgrid_table_id +" -- Third level"); 
       pager_id = "h_"+subgrid_table_id; 
       $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); 
       jQuery("#"+subgrid_table_id).jqGrid({ 
        data: transactionDataThirdLevel,//Level 3 
        datatype: "local", 
        height:"auto", 
        multiselect: false, 
        colNames : [ 'Inv No', 'Date', 
            'Client', 'Amount', 'Tax', 
            'Total', 'Notes' ], 
        colModel : [ { 
         name : 'id', 
         index : 'id', 
         width : 60, 
         sorttype : "int" 
        }, { 
         name : 'invdate', 
         index : 'invdate', 
         width : 90, 
         sorttype : "date" 
        }, { 
         name : 'name', 
         index : 'name', 
         width : 100 
        }, { 
         name : 'amount', 
         index : 'amount', 
         width : 80, 
         align : "right", 
         sorttype : "float", 
         editable : true 
        }, { 
         name : 'tax', 
         index : 'tax', 
         width : 80, 
         align : "right", 
         sorttype : "float", 
         editable : true 
        }, { 
         name : 'total', 
         index : 'total', 
         width : 80, 
         align : "right", 
         sorttype : "float", 
         editable : true 
        }, { 
         name : 'note', 
         index : 'note', 
         width : 150, 
         sortable : false 
        } ], 
        sortname: 'num', 
        sortorder: "asc", 
        gridComplete: function(){ 


        }, 
        cellEdit: true, 
        cellsubmit: 'clientArray', 
        subGrid: true, 
        subGridRowExpanded: function(subgrid_id, row_id) { 
         var subgrid_table_id_fourth, pager_id; 
         subgrid_table_id_fourth = subgrid_id+"_xcv"; 
         //alert(subgrid_table_id_fourth +" -- Fouth level"); 
         $("#"+subgrid_id).html("<table id='"+subgrid_table_id_fourth+"' class='scroll'></table>"); 
         jQuery("#"+subgrid_table_id_fourth).jqGrid({ 
          data: transactionDataFourthLevel,//Level 4 
          datatype: "local", 
          multiselect: false, 
          colNames : [ 'Inv No', 'Date', 
              'Client', 'Amount1', 'Tax1', 
              'Total1', 'Notes' ], 
          colModel : [ { 
           name : 'id', 
           index : 'id', 
           width : 60, 
           sorttype : "int" 
          }, { 
           name : 'invdate', 
           index : 'invdate', 
           width : 90, 
           sorttype : "date" 
          }, { 
           name : 'name', 
           index : 'name', 
           width : 100 
          }, { 
           name : 'amount', 
           index : 'amount', 
           width : 80, 
           align : "right", 
           sorttype : "float", 
           editable : true 
          }, { 
           name : 'tax', 
           index : 'tax', 
           width : 80, 
           align : "right", 
           sorttype : "float", 
           editable : true 
          }, { 
           name : 'total', 
           index : 'total', 
           width : 80, 
           align : "right", 
           sorttype : "float", 
           editable : true 
          }, { 
           name : 'note', 
           index : 'note', 
           width : 150, 
           sortable : false 
          } ], 
          rowNum:-1, 
          sortname: 'num', 
          sortorder: "asc", height: '100%', 
          gridComplete: function(){ 

          }, 
          cellEdit: true, 
          cellsubmit: 'clientArray', 
          rowNum : -1, 
          sortname : 'Sr. No.', 
          viewrecords : true, 
          sortorder : "desc", 
          caption : "", 
          forceFit : false 
          });//Level 4 close 
        },  
        sortname : 'Sr. No.', 
        viewrecords : true, 
        sortorder : "desc", 
        caption : "", 
        forceFit : false 
        });//Level 3 close 
      }, 
      rowNum : -1, 
      sortname : 'Sr. No.', 
      viewrecords : true, 
      sortorder : "desc", 
      caption : "", 
      forceFit : false 
      });//Level 2 close 
    }, 
    sortname : 'Sr. No.', 
    viewrecords : true, 
    sortorder : "desc", 
    caption : "" 
}); 
});//Document ready close 

Answer 1

我将该问题解释为jqGrid中的一个错误。所以为你+1。

为了解决这个问题，我建议在的grid.base.js这个小小的改动里做一些修改。问题是click将会被触发两次 - 一次是内部电网（下一级电网），第二次是电网。我认为来自内部网格的点击应该在外部网格中被忽略。

要做到这一点我最初以为建议修改的grid.base.jsthe line 2279或的jquery.jqGrid.src.js（中的jqGrid 4.2.0）从

if($(ptr).length === 0 || ptr[0].className.indexOf('ui-state-disabled') > -1) { 

行2279至

if($(ptr).length === 0 || ptr[0].className.indexOf('ui-state-disabled') > -1 || ts.rows.namedItem(ptr[0].id) === null) { 

修改后该问题将在IE，Firefox和Opera中得到解决。 Webkit浏览器Google Chrome和Safari中仍然存在此问题。我认为这是浏览器中的错误。

所以我决定使用

if($(ptr).length === 0 || ptr[0].className.indexOf('ui-state-disabled') > -1 || $(td,ts).closest("table.ui-jqgrid-btable")[0].id !== ts.id) { 

的bug修复。你可以从the demo看到问题将通过更改来解决。