Редактирование ячеек во вспомогательной сетке и родительской сетке 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 для вас.

Чтобы исправить ошибку, я предлагаю сделать небольшое изменение в строке 2276 из grid.base.js.Проблема в том, что click будет запущен дважды - один раз для внутренней сетки (сетка следующего уровня) и второй раз для сетки.Я думаю, что щелчки от внутренней сетки должны игнорироваться во внешней сетке.

Для этого я изначально подумал предложить изменить строку 2279 из grid.base.js или строку 2279jquery.jqGrid.src.js (в jqGrid 4.2.0) от

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

в качестве исправления ошибки.Как вы можете видеть из демоверсии , проблема будет исправлена ​​изменением.