Редактиране на клетки в подрешетка и родителска мрежа на JQGrid

Имам четири нива на Drill down в моята мрежа, в които искам да редактирам клетки във всичките четири нива. Използвам 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

person Aditya K    schedule 22.10.2011    source източник


Отговори (1)


Тълкувам проблема като грешка в jqGrid. Така че +1 за вас.

За да коригирате грешката, предлагам да направите малка промяна в от ред 2276 от grid.base.js. Проблемът е, че click ще бъде изстрелян два пъти - един път за вътрешната мрежа (решетката на следващото ниво) и вторият път за мрежата. Мисля, че щракванията от вътрешната решетка трябва да се игнорират във външната решетка.

За да направя това, първоначално мислех да предложа да променя ред 2279 от grid.base.js или ред 2279 от jquery.jqGrid.src.js (в jqGrid 4.2.0) от

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

to

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

След модификацията проблемът ще бъде решен в IE, Firefox и Opera. Проблемът все още съществува в уеб браузърите 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) {

като корекция на грешка. Но можете да видите от демонстрацията проблемът ще бъде решен от промяната .

person Oleg    schedule 22.10.2011
comment
Благодаря много, Олег. Това е адски страхотен грид инструмент, който имаме... Поправката работи като чар... - person Aditya K; 23.10.2011
comment
@stacktrace: Добре дошли сте! Ще публикувам корекцията днес във форума на trirand, за да я включа в основния код на jqGrid. - person Oleg; 23.10.2011
comment
@stacktrace: Грешката вече е коригирана в основния код на jqGrid в github (вижте корекцията тук). - person Oleg; 29.10.2011
comment
Здравей Олег, ще ми помогнеш ли, моля, в това.? връзка - person Aditya K; 08.11.2011
comment
Здравей Олег, Имам нужда от помощ... връзка - person Aditya K; 17.05.2012