子网格中的单元格编辑和JQGrid的父网格

Question

我在网格中有四个级别的向下钻取，其中，我想在所有四个级别进行单元格编辑。我使用Grid作为子网格。

我的问题是，当我选择任何子网格内的任何单元格时（Level 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的{​​{3}}进行微小更改。问题是click将被触发两次 - 内部网格一次（下一级网格）和第二次网格。我认为应该在外部网格中忽略来自内部网格的点击。

要做到这一点，我最初打算建议修改grid.base.js的{​​{3}}或jquery.jqGrid.src.js（在jqGrid 4.2.0中）的第2279行

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

到

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) {

作为错误修复。你可以从the line 2276看到问题将由变化解决。