2011-10-22 93 views
1

的家長格我有四級鑽的倒在我的網格,其中,我想要做的單元格編輯在所有四個級別。我使用Grid作爲子網格。細胞編輯在分格和jqGrid的

我的問題是,當我選擇任何次網格內的任何小區(等級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 

回答

2

我將該問題解釋爲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看到問題將通過更改來解決。

+0

非常感謝,奧列格。這是驚人的真棒網格工具,我們有...修復工程就像一個魅力... –

+0

@stacktrace:不客氣!今天我將在trirand論壇上發佈修復,將其包含在jqGrid的主代碼中。 – Oleg

+0

@stacktrace:該錯誤是在的jqGrid的主代碼現在固定在[github上](https://github.com/tonytomov/jqGrid/)(見修正結果[這裏](https://github.com/ tonytomov /的jqGrid /提交/ 24ccc88c06683f461809f5848bcfef40fef185c9))。 – Oleg