jqgrid - jqGrid他の行をクリックしたときに行を折りたたむ方法

Question

メイン グリッドで 1 つの行をクリックすると、その行が「強調表示」され、7 つのサブグリッドが表示されます。以下は、最初の行が選択されており、編集が近づいている例です (作業中)。

ここで、メイン グリッドの 2 行目をクリックすると、最初の行が非表示になり、2 番目の行が選択されます。編集ボタンをクリックすると、警告が表示されます。選択された行がありません!

2行目をもう一度クリックすると、選択が解除され、もう一度クリックして選択して編集すると、問題なく実行されます! したがって、折りたたまれた状態と展開された状態を切り替えるためのコードがどこか間違っていると思います:

2013-04-11 更新

Oleg の回答に従って、プログラムの完全なコード (30000 に制限) に参加します。

jQuery(function ($) {
var resetAltRows = function () {
    $(this).children("tbody:first").children('tr.jqgrow').removeClass('myAltRowClass');
    $(this).children("tbody:first").children('tr.jqgrow').each(function(){
        var arbo=$(this).find('td:eq(0)').text().substr(0,1);
        $(this).addClass('myAltRowClass1'+arbo);
        if(arbo==1)$(this).find('td:eq(1) input:checkbox').attr('checked','checked');
    });
    $(this).children("tbody:first").children('tr.jqgrow:visible:odd').addClass('myAltRowClass');
};

var OldSelectedRow=null,
        height=$('body').height()-235,
        numRows=Math.floor(height/23)-(Math.floor(height/23)%5),
        heightRows=numRows*23,
        myGrid = $("#tab51");

//************************
//************************
//************************
myGrid.jqGrid({
    caption:"Liste des BONS DE TRAVAUX STANDARD",
    hidegrid:false,
    url:'opt511.php',
    datatype: "json",
    height:heightRows,
    rowNum:numRows,
    shrinkToFit:true,
    colNames:['Id','A.R.C.','B.T.','Date ARC','Client','Nom','Ville','Cde client','Matériel','Marque','Prest.','Description','N° série','Objet','X','b.type','idref'],
    colModel:[  
        {name:'b.id',index:'b.id', hidden:true,key:true}, 
        {name:'b.arc',index:'b.arc', width:60,align:'center',editable:true}, 
        {name:'b.ind',index:'b.ind', width:30,align:"center"},
        {name:'b.date_in',index:'b.date_in', width:70,align:"center"}, 
        {name:'c.code',index:'c.code', width:40}, 
        {name:'c.descr',index:'c.descr',width:200},
        {name:'c.ville',index:'c.ville', width:200}, 
        {name:'b.cde_clt',index:'b.cde_clt', width:150}, 
        {name:'q.code',index:'q.code', width:80}, 
        {name:'k.code',index:'k.code', width:80}, 
        {name:'b.nature',index:'b.nature', stype:'select',width:40,align:'center',
            searchoptions:{
                dataUrl:'sh51.php'
            },
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                return 'title="' + rawObject[15] + '"';
            }
        }, 
        {name:'2m.descr',index:'2m.descr', width:200}, 
        {name:'p.numserie',index:'p.numserie', width:80}, 
        {name:'b.descr',index:'b.descr', width:200}, 
        {name:'clos',index:'clos', width:20,stype:'select',align:'center',sortable:false,
            searchrules:{date:true}, 
            search:true,
            searchoptions:{
                value:{"": "?", 0:"En cours", 1: "Clôturé"},
                defaultValue:0
            }
        }, 
        {name:'btype',index:'btype', width:40,hidden:true},
        {name:'idref',index:'btype', width:40,hidden:true}
    ], 
    postData: {
            filters:'{"groupOp":"AND","rules":['+
                            '{"field":"clos","op":"eq","data":"0"}]}'
    },
    search:true,
    pager: '#tab51p', 
    sortname: 'b.arc', 
    gridComplete:function(){
        OldSelectedRow=null;
        sortDataCol(this);,
    },
    onSelectRow:function(id,status){
        alert('begin = '+myGrid.jqGrid('getGridParam','selrow'));
        if(OldSelectedRow!=id){
            if(OldSelectedRow!=null){
                myGrid.jqGrid ('collapseSubGridRow', OldSelectedRow);
                $('#'+OldSelectedRow).removeClass('ui-state-highlight');
            }
            $('#'+id).addClass('ui-state-highlight');
            OldSelectedRow=id;
            myGrid.jqGrid('expandSubGridRow',id);
        }else{
            myGrid.jqGrid ('collapseSubGridRow', id);
            $('#'+id).removeClass('ui-state-highlight');
            OldSelectedRow=null;
        }
        alert('end = '+myGrid.jqGrid('getGridParam','selrow'));
    },
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
        //*********************
        //  1ST SUBGRID
        //*********************
        var rowdata = myGrid.jqGrid('getRowData',row_id),
            btr=rowdata['b.id'],
            subgrid_table_id = subgrid_id+"_a", 
            pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511a.php?id="+row_id+"&btr="+btr, 
            datatype: "json", 
            colNames: ['Nature','Information'],
            colModel: [ 
                {name:'c.code',index:'c.code', width:150,align:'right',sortable:false}, 
                {name:'p.coeff',index:'p.coeff', width:630,sortable:false}
            ], 
            height: '100%',
            autowidth:true,
            caption:'1 - INFORMATIONS CLIENT',
        }); 
        //*********************
        //  2ND SUBGRID 
        //*********************
        var clt=rowdata['c.code'],
            subgrid_table_id = subgrid_id+"_b", 
            pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511b.php?id="+row_id+"&clt="+clt, 
            datatype: "json", 
            colNames: ['Id','X','Civilité','Nom','Prénom','Service'],
            colModel: [ 
                {name:'t.id',index:'t.id', width:60, align:"center",hidden:true}, 
                {name:'check',index:'check', width:20,sortable:false,formatter:'checkbox',align:'center',
                    editable: false, edittype: 'checkbox', editoptions: {value: "true:false", defaultValue: "false"}, 
                    formatoptions: {disabled: false}
                },
                {name:'v.code',index:'v.code', width:60,sortable:false},  
                {name:'t.nom',index:'t.nom', width:210,sortable:false}, 
                {name:'t.prenom',index:'t.prenom', width:210,sortable:false},
                {name:'f.descr',index:'f.descr', width:220,sortable:false}
            ], 
            pager: pager_id, 
            sortname: 't.nom',
            hiddengrid:true,
            scroll:true,
            maxheight: 230,
            autowidth:true,
            caption:'2 - PERSONNES A CONTACTER',
            gridComplete:function(){
                OldSelectedRow=null;
                sortDataCol(this);
                    }
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
        //*********************
        //  3TH SUBGRID 
        //*********************
        rowdata = myGrid.jqGrid('getRowData',row_id);
        var parc=rowdata['p.id'];
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_c"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511c.php?id="+row_id+"&parc="+parc, 
            datatype: "json", 
            colNames: ['Id','Ensemble','Quantité','Article','Désignation','Matière'],
            colModel: [ 
                {name:'a.id',index:'a.id', width:60, align:"center",hidden:true}, 
                {name:'c.code',index:'c.code', width:100}, 
                {name:'p.coeff',index:'p.coeff', width:60,align:"center"}, 
                {name:'a.code',index:'a.code', width:80}, 
                {name:'a.descr',index:'a.descr',width:400},
                {name:'m.code',index:'m.code', width:80}
            ], 
            pager: pager_id, 
            sortname: 'c.code', 
            sortorder: "asc", 
            hiddengrid:true,
            rownumbers: true, 
            rownumWidth: 40, 
            gridview: true,
            scroll:true,
            maxheight: 230,
            autowidth:true,
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            altRows:true,
            altclass:'myAltRowClass',
            viewrecords: true,
            caption:'3 - SPECIFICATIONS TECHNIQUES',
            emptyrecords: 'Aucune donnée correspondante...',
        });
        //*********************
        //  4TH SUBGRID 
        //*********************
        rowdata = myGrid.jqGrid('getRowData',row_id);
        var parc=rowdata['idref'];
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_d"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511d.php?id="+row_id+"&parc="+parc, 
            datatype: "json", 
            colNames: ['Id','Ensemble','Quantité','Article','Désignation','Matière'],
            colModel: [ 
                {name:'a.id',index:'a.id', width:60, align:"center",hidden:true}, 
                {name:'c.code',index:'c.code', width:100}, 
                {name:'p.coeff',index:'p.coeff', width:60,align:"center"}, 
                {name:'a.code',index:'a.code', width:80}, 
                {name:'a.descr',index:'a.descr',width:400},
                {name:'m.code',index:'m.code', width:80}
            ], 
            pager: pager_id, 
            sortname: 'c.code', 
            sortorder: "asc", 
            hiddengrid:true,
            rownumbers: true, 
            rownumWidth: 40, 
            gridview: true,
            scroll:true,
            maxheight: 230,
            autowidth:true,
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            altRows:true,
            altclass:'myAltRowClass',
            viewrecords: true,
            caption:'4 - PIECES A PREPARER',
            emptyrecords: 'Aucune donnée correspondante...',
            gridComplete:function(){
                colModel = $("#"+subgrid_id+'_d').jqGrid('getGridParam', 'colModel');
                sortName =$("#"+subgrid_id+'_d').jqGrid('getGridParam', 'sortname');
                $('#gbox_' + $.jgrid.jqID($("#"+subgrid_id+'_d')[0].id) +
                        ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                        var cmi = colModel[i], colName = cmi.name;
                        if (cmi.sortable !== false) {
                                $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
                        } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
                                $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
                        }
                        if (cmi.name === sortName) {
                                $(this).addClass('ui-state-active');
                                //alert(i);
                                var gridId = $("#"+subgrid_id+'_d').jqGrid('getDataIDs');
                                for (var countRow = 0; countRow < gridId .length; countRow ++)
                                {
                                    var rowId = gridId [countRow ];
                                    var dataFromTheRow = $("#"+subgrid_id+'_d').jqGrid ('getRowData', rowId);
                                    $("#"+subgrid_id+'_d').jqGrid('setCell',rowId, i, '','ui-widget-header');
                                    $("#"+subgrid_id+'_d').jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                                }
                        }
                });
            },
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
        //*********************
        //  5TH SUBGRID 
        //*********************
        rowdata = myGrid.jqGrid('getRowData',row_id);
        var btr=rowdata['b.id'],lastId='';
        var prest=rowdata['btype'];
        var nature=rowdata['b.nature'];
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_e"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511e.php?id="+row_id+"&btr="+btr, 
            datatype:"json",
            mType:'POST',
            loadui: "disable",
            colNames:['id','Prestations','Radio','Checked','Disabled','Select','Informations'],
            colModel:[
                    {name:'id',index:'id',width:100,hidden:true},
                    {name:'name',index:'name',width:550,sortable:false,
                        formatter: function (cellvalue,options,rowObject) {
                            if(rowObject.radio.length==0){
                                if(rowObject.id.substr(0,1)=='1'){
                                    var check="checked='checked'";
                                }else{
                                    var check='';
                                }
                                if(rowObject.disabled>'0'){
                                    var disabled="disabled";
                                }else{
                                    var disabled='';
                                }
                                var box="<input type='checkbox' class='itmchk' "+check+" "+disabled+"/>";
                            }else{
                                var box="<input type='radio' class='itmrad' id='"+rowObject.radio+"' name='"+rowObject.radio+"' "+(rowObject.checked>0?'checked':'')+" />";
                            }
                            switch(rowObject.level){
                                case '0':
                                    var bstyle="<strong>", estyle="</strong>";
                                    break;
                                case '1':
                                    var bstyle="", estyle="";
                                    break;
                                default:
                                    var bstyle="<em>", estyle="</em>";
                            }
                            return box + bstyle + $.jgrid.htmlEncode(cellvalue) + estyle;
                        }
                    },
                    {name:'radio',index:'radio',width:30,sortable:false,hidden:true},
                    {name:'checked',index:'checked',width:30,sortable:false,hidden:true},
                    {name:'disabled',index:'disabled',width:30,sortable:false,hidden:true},
                    {name:'select',index:'select',width:200,sortable:false,hidden:true},
                    {name:'data',index:'data',width:230,sortable:false,
                        formatter: function (cellvalue,options,rowObject) {
                            var cell='';
                            if(rowObject.select>" "){
                                var tab=rowObject.select.split("|");
                                var id=rowObject.id.substr(0,1);
                                cell="<select class='itmsel'>";
                                for(var i=0;i<tab.length;i++){
                                    var fld=tab[i].split(';');
                                    var opt="<option value='"+fld[0]+"' class='myAltRowClass1"+id+"'";
                                    if(i==0){
                                        opt+=" style='font-style:italic;'";
                                    }else{
                                        opt+=" style='color:red;'";
                                    }
                                    opt+=">"+(i>0?'&nbsp;&nbsp;• ':'')+fld[1]+"</option>";
                                    cell+=opt;
                                }
                                cell+='</select>';
                            }
                            return cell;
                        }
                    }
            ],
            sortname: 'id', 
            sortorder: "asc", 
            hiddengrid:true,
            gridview: true,
            treeGrid:true,
            pager:pager_id,
            treeGridModel: "adjacency",
            treedatatype: 'json',
            ExpandColumn: 'name',
            jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj; },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
            },
            scroll:true,
            autowidth:true,
            height: 230,
            loadComplete: function() {
                var grid = this;
                resetAltRows.call(this);
                $(this).find('tr.jqgrow td div.treeclick').click(function(){
                        resetAltRows.call(grid);
                });
                $(this).find('tr.jqgrow td span.cell-wrapper').click(function(){
                        resetAltRows.call(grid);
                });
                $("#"+subgrid_table_id).jqGrid('setLabel', 'name', '<b>'+nature+' - '+prest+'</b>');
                //
            },
            beforeSelectRow: function (rowid, e) {
                var $this = $(this),
                isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
                localIdName = $this.jqGrid("getGridParam", "localReader").id,
                localData,
                state,
                setCheckedStateOfChildrenItems = function (children) {
                    $.each(children, function () {
                        $("#" + this[localIdName] + " input.itmchk").prop("checked", state);
                        if (!this[isLeafName]) {
                            setCheckedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
                        }
                    });
                };
                if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) {
                    state = $(e.target).prop("checked");
                    localData = $this.jqGrid("getLocalRow", rowid);
                    setCheckedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state);
                }
            },
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            caption:'5 - TRAVAUX A EFFECTUER',
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
        //*********************
        //  6TH SUBGRID 
        //*********************
        rowdata = myGrid.jqGrid('getRowData',row_id);
        var parc=rowdata['p.id'];
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_f"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511f.php?id="+row_id+"&parc="+parc, 
            datatype: "json", 
            colNames: ['Id','Ensemble','Quantité','Article','Désignation','Matière'],
            colModel: [ 
                {name:'a.id',index:'a.id', width:60, align:"center",hidden:true}, 
                {name:'c.code',index:'c.code', width:100}, 
                {name:'p.coeff',index:'p.coeff', width:60,align:"center"}, 
                {name:'a.code',index:'a.code', width:80}, 
                {name:'a.descr',index:'a.descr',width:400},
                {name:'m.code',index:'m.code', width:80}
            ], 
            pager: pager_id, 
            sortname: 'c.code', 
            sortorder: "asc", 
            hiddengrid:true,
            rownumbers: true, 
            rownumWidth: 40, 
            gridview: true,
            scroll:true,
            maxheight: 230,
            autowidth:true,
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            altRows:true,
            altclass:'myAltRowClass',
            viewrecords: true,
            caption:'6 - INTERVENANTS',
            emptyrecords: 'Aucune donnée correspondante...',
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
        $("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        //  montre la colonne triée au chargement des données
        colModel = $("#"+subgrid_table_id).jqGrid('getGridParam', 'colModel');
        sortName = $("#"+subgrid_table_id).jqGrid('getGridParam', 'sortname');
        $('#gbox_' + $.jgrid.jqID($("#"+subgrid_table_id)[0].id) +
                ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                var cmi = colModel[i], colName = cmi.name;
                if (cmi.sortable !== false) {
                        $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
                } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
                        $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
                }
                if (cmi.name === sortName) {
                        $(this).addClass('ui-state-active');
                }
        });
        //*********************
        //  7TH SUBGRID 
        //*********************
        rowdata = myGrid.jqGrid('getRowData',row_id);
        var parc=rowdata['p.id'];
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_g"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg511g.php?id="+row_id+"&parc="+parc, 
            datatype: "json", 
            colNames: ['Id','Ensemble','Quantité','Article','Désignation','Matière'],
            colModel: [ 
                {name:'a.id',index:'a.id', width:60, align:"center",hidden:true}, 
                {name:'c.code',index:'c.code', width:100}, 
                {name:'p.coeff',index:'p.coeff', width:60,align:"center"}, 
                {name:'a.code',index:'a.code', width:80}, 
                {name:'a.descr',index:'a.descr',width:400},
                {name:'m.code',index:'m.code', width:80}
            ], 
            pager: pager_id, 
            sortname: 'c.code', 
            sortorder: "asc", 
            hiddengrid:true,
            rownumbers: true, 
            rownumWidth: 40, 
            gridview: true,
            scroll:true,
            maxheight: 230,
            autowidth:true,
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            altRows:true,
            altclass:'myAltRowClass',
            viewrecords: true,
            caption:'7 - PLAN DE PREVENTION',
            emptyrecords: 'Aucune donnée correspondante...',
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
        $("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        var subgridg="#"+subgrid_id;
        //  #tab_51_1;
        var chaine='abcdefg';
        $(".ui-jqgrid-titlebar",subgridg).click(function(){
            var titlebar=this;
            var clicked=chaine.indexOf($(titlebar).parent().attr('id').substr(-1));
            //  id is 'tab51_1_a' so clicked is 0
            var depart=$(titlebar).parent().parent().parent().attr('id');
            //  I run my search from id 'tab51_1' class 'tablediv'
            $('#'+depart).find('.ui-jqgrid-view').each(function(idx){
                if(idx==clicked){
                    $(".ui-jqgrid-titlebar-close", titlebar).click();
                }else{
                    if(typeof $(subgridg).find('.ui-jqgrid-bdiv:eq('+idx+')').css('display')=='undefined'||$(subgridg).find('.ui-jqgrid-bdiv:eq('+idx+')').css('display')=='block'){
                        $(subgridg).find(".ui-jqgrid-titlebar-close:eq("+idx+")").click();
                    }
                }
            });
        });
    },
    subGridRowColapsed: function(subgrid_id, row_id) { 
        $("#"+subgrid_id+"_a").remove();
        $("#"+subgrid_id+"_b").remove();
        $("#"+subgrid_id+"_c").remove();
        $("#"+subgrid_id+"_d").remove();
        $("#"+subgrid_id+"_e").remove();
        $("#"+subgrid_id+"_f").remove();
        $("#"+subgrid_id+"_g").remove();
        myGrid.jqGrid('resetSelection');            
    }
});});

ここではsubGridOptionsを使用していないため、falseがreloadOnExpandのdefaultValueであると思います。関数の開始時と終了時に、OnSelectedRow 関数 2 アラートを追加しました。最初のクリックでは、開始と終了の細かいセローが表示されますが、次のクリックでは終了アラートに「null」が表示されます。

また、すべてのパーツを「subGridRowExpanded」および「subGridRowColapsed」関数に削除しようとしました。トラブルは発生せず、開始と終了のセルローは問題なく、行を自由に編集できます。

jqGrid の内部動作は、私がそれに慣れていないため、非常に複雑に思えます。また、初心者を支援するために費やしたすべての時間にもう一度感謝しなければなりません。あなたのコメントはいつも正しく、このフォーラムに長くいてくれることを願っています。再度、感謝します。良い１日を。ジヘル

2013-04-22 更新

Oleg からのすべての提案を適用した後、アプリの 20 のスクリプトにいくつかの変更を加えました。これらはすべて同じ方法で作成されています。このテーマでは、変更した onSelectRow の小さな部分を次に示します。

    onSelectRow:function(id){
        var expanded = $("td.sgexpanded", myGrid)[0];
        if(expanded){
            $(expanded).trigger("click").parent().removeClass('ui-state-highlight');                
        }
        myGrid.jqGrid('expandSubGridRow',id);
        $('#'+id).addClass('ui-state-highlight');
        alert(id+' '+myGrid.jqGrid('getGridParam','selrow'));
    },

他の行を折りたたんだ後に展開された行を編集することはできません。古い行を折りたたんで選択した行を展開した後に selrow が変更される理由がわかりません。誰かがこの問題について私を駆り立ててくれることを願っています。この問題に直面しているのは私だけではないと思います。ご親切に助けていただき、本当にありがとうございました。ジヘル

2013-04-23 更新

Oleg の提案を適用した後、主な問題 (他の行を折りたたんだ後に展開された行を編集する) は解決されたようです。ただし、選択した行をグリッドの一番上に設定すると、最初の 5 つの行では正常に実行されますが、次の行では実行されません。変 ！ここに事実のスナップショットがあります:

http://jsfiddle.net/jihel/JMcKF/のデモは正常に動作し、私のアプリコードで作成されているため、奇妙です! 誰かがすでにそのような問題に遭遇し、解決するためのアイデアを持っている場合、私は何が間違っているか、またはscrollTopを変更するかを探しています。あなたの助けに感謝します。良い１日を

Answer 1

非常に長いコードを分析するのは困難です。そのため、コードを調べた後にコードに見られる潜在的な問題について、いくつかのコメントを投稿します。

私が見る主な問題:すべてのサブグリッド (またはメイン グリッドとサブグリッド) でオプションを使用する必要があります。idPrefixidPrefixオプション optionの値はrowid、サブグリッドが開かれる場所によって異なります。たとえば、使用できます

idPrefix: "s_" + row_id + "_a_"

最初のサブグリッド、idPrefix: "s_" + row_id + "_b_"2 番目のサブグリッドなど。

列名に(ドット) やその他のメタ文字を使用しないこと.をお勧めします。これは、コードおよび jqGrid のコードにおける潜在的なエラーの原因です。nameこのプロパティは、jqGrid の一部の内部要素の id 属性を構築するために使用されることを理解する必要があります。CSS には、属性で使用できる文字の制限がいくつかありidます。さらに、jqGrid はセレクターを作成して、ページから対応する要素を取得する必要があります。たとえば、含まれている場合、セレクターは次のように解釈されるため、$("#" + rowid)間違ったセレクターになります。rowid.("#a.b")id=abid="a.b". 古いバージョンの jqGrid は、そのような ID や名前ではまったく機能しません。jqGrid の最近のバージョンは動作するはずですが、ID にメタ文字を使用するとコードが複雑になります。本当に必要ですか？

nameほとんど同じ問題のため、異なるテーブルに同じプロパティを使用することはお勧めしません。複数のグリッドまたはサブグリッドに検索フィルターを使用する予定がある場合 (複数のグリッドに使用する場合filterToolbar)、重要になる可能性があります。現在'c.code'、たとえば、将来の問題の潜在的な原因である複数のサブグリッドで使用しています。

本当に検索に使用する必要があり、使用.せdatatype: "json"ずに使用する場合は、 which hasとwhich has no をloadonce: true使用できます。たとえば、 を使用できます。プロパティの値と同じ値を使用する場合は、列定義からプロパティを削除することをお勧めします。index.name.name: 'b_id', index: 'b.id'indexname index

scroll:trueさらに、jqGrid のオプションを使用することはお勧めしません。一般に、仮想スクロールは優れた機能ですが、私の意見では、仮想スクロールの実装には多くのバグと副作用があります。したがって、使用しないことをお勧めします。その機能が本当にほとんど必要ない場合は、フォームで使用する必要がありscroll:1、デバッグにより多くの時間を費やす必要があります。

最後の発言: の使用はお勧めしませんgridComplete。代わりに使用することをお勧めしますloadComplete。詳細については、回答を参照してください。

最後の発言: 使用gridview: trueするすべてのグリッドとサブグリッドで使用することをお勧めします。

更新: で実装したい動作を完全に理解しているかどうかはわかりませんonSelectRowが、次の実装

onSelectRow: function (rowid) {
    var $self = $(this),
        $this = $("#" + $.jgrid.jqID(rowid)), // the row
        $expanded = $self.find("td.sgexpanded");

     if ($expanded.length > 0) {
         $expanded.trigger("click");
     }
     $self.jqGrid("expandSubGridRow", rowid);
     $self.jqGrid("setSelection", rowid, false);
     $this.closest(".ui-jqgrid-bdiv").scrollTop($this.position().top);
}