jqGrid 다른 행을 클릭 할 때 행을 접는 방법

Question

주 그리드에서 한 행을 클릭하면 '강조 표시'되고 7 개의 하위 글리드가 표시됩니다. 내가 주 그리드의 두 번째 행을 클릭하면 가

자, 첫 번째가 숨겨진 선택한 두 번째 : 다음은 첫 번째 행을 선택하고, 근처 편집 할 예 (진행 중)입니다. 편집 버튼을 클릭하면 경고가 나타납니다 : 선택한 행이 없습니다!

내가 두 번째 행을 다시 클릭하면 선택되지 않은되고, 다시 내가 선택하고 편집을 클릭합니다, 그건 잘 실행! 그래서 축소 및 확장 상태 사이의 전환에 대한 내 코드 어딘가에 잘못되었다는 가정 :

올렉의 대답에 따라

2013년 4월 11일 업데이트, 나는 내 프로그램의 (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 개의 경고를 추가했습니다. 첫 번째 클릭 표시는 시작과 끝을 위해 selrows를 잘 나타내지 만 다음 클릭시 끝 경고는 'null'을 표시합니다.

나는 모든 부품을 'subGridRowExpanded'및 'subGridRowColapsed'기능으로 삭제하려고 시도했습니다. 문제가 발생하지 않습니다. 시작과 끝은 selrows가 정상이며 원하는대로 행을 편집 할 수 있습니다.

jqGrid의 내부 작동은 익숙하지 않기 때문에 매우 복잡해 보입니다. 그리고 나에게 멍청한 놈을 돕기 위해 한 번 더 시간을내어 감사드립니다. 당신은 항상 귀하의 의견에 있으며 나는이 포럼에서 오랜 시간 동안있을 것이기를 희망합니다. 다시 한번 감사드립니다. 좋은 하루 되세요. JiheL

올렉에서 모든 제안 적용한 후

2013년 4월 22일 업데이트, 나는 모두가 같은 방식으로 내장되어 내 응용 프로그램의 20 스크립트에 약간의 변화를 보였습니다.

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')); 
    }, 

하지만 결과, 나는이 붕괴 다른 행 후 확장 된 행을 편집 할 수 없습니다 더 이상 운 :이 주제에 대한 , 여기에 내가 변경 onSelectRow의 작은 부분이다. 나는 왜 셀 로우가 낡은 줄을 붕괴하고 선택된 줄을 확장 한 후에 변화하는지 이해하지 못한다. 누군가이 문제에 대해 저를 몰아 줄 수 있기를 바랍니다. 나는이 문제를 해결하기 위해 혼자만 있지는 않다고 생각합니다. 많은 도움을 주신 귀하의 친절한 도움에 감사드립니다. JiheL

이 (다른 붕괴 후 확장 된 행을 편집) 올렉의 주 문제를 제시 적용한 후

2013년 4월 23일 업데이트하면 해결 될 것으로 보인다. 그러나 선택된 행을 그리드의 맨 위로 설정하면 5 행의 첫 행만 실행되지만 다음 행은 실행되지 않습니다. 이상한 !여기에 사실의 스냅 샷은 다음과 같습니다

때문에 데모 http://jsfiddle.net/jihel/JMcKF/ 실행 미세 이상하고 내 응용 프로그램 코드로 만들어졌습니다! 나는 누군가가 이미 그런 곤경을 겪었고 해결을위한 아이디어를 가지고 있다면, 당신의 모든 도움에 많은 감사를 드리며 무엇이 잘못되었거나 scrollTop을 바꿀 수 있는지 찾고 있습니다. 좋은 하루 되세요

Answer 1

이렇게 긴 코드를 분석하는 것은 어렵습니다. 따라서 코드를 살펴본 후 코드에서 볼 수있는 잠재적 인 문제에 대한 몇 가지 의견을 게시합니다.

내가보기에 가장 큰 문제 : 옵션을 모든 서브 그리드 (또는 기본 그리드와 서브 그리드)에 사용해야합니다. idPrefix 옵션 옵션의 값은 서브 그리드가 열리는 rowid에 의존해야합니다. 예를 들어, 당신은 두 번째 아 격자 등을위한 최초의 아 격자에 대한

idPrefix: "s_" + row_id + "_a_" 

, idPrefix: "s_" + row_id + "_b_"를 사용할 수 있습니다.

. (점) 또는 다른 meta-characters을 열 이름에 사용하지 마십시오. 그것은 당신의 코드와 jqGrid의 코드에서 잠재적 인 오류의 기원입니다. name 속성은 jqGrid의 일부 내부 요소의 id 특성을 작성하는 데 사용된다는 것을 이해해야합니다. CSS에는 문자가 id 속성에서 허용되는 몇 가지 제한 사항이 있습니다. 또한 jqGrid는 페이지에서 해당 요소를 가져 오기 위해 선택기를 작성해야합니다. 예를 들어 $("#" + rowid)이 rowid에 .을 포함하는 경우 선택자 ("#a.b")이 id=a 인 요소와 id="a.b"이 아닌 b 인 것으로 해석되기 때문에 잘못된 선택자가됩니다. 이전 버전의 jqGrid는 그런 ID와 같은 이름으로 전혀 작동하지 않습니다. jqGrid의 최신 버전이 작동해야하지만, id에 메타 문자를 사용하더라도 많은 시간에 코드의 복잡성이 증가합니다. 너 정말 필요해?

거의 동일한 문제로 다른 테이블에 동일한 name 속성을 사용하지 않는 것이 좋습니다. 여러 개의 그리드 또는 하위 그리드에 대해 검색 필터를 사용하려는 경우 (여러 개의 그리드에 filterToolbar을 사용하는 경우) 중요 할 수 있습니다. 현재 예를 들어 'c.code'을 향후 여러 문제의 원인이 될 수있는 여러 하위 격자에서 사용합니다.

당신 정말 검색을위한 .를 사용하는이 필요하고 당신이 다음 .을 가지고 index 더 .이 없습니다 name을 사용할 수 있습니다 loadonce: true없이 datatype: "json"를 사용하는 경우. 예를 들어 name: 'b_id', index: 'b.id'을 사용할 수 있습니다. name 속성의 값과 동일한 index 값을 사용하는 경우 은 열 정의에서index 속성을 제거하는 것이 좋습니다.

또한 scroll:true 옵션 인 jqGrid를 사용하지 않는 것이 좋습니다. 일반적으로 가상 스크롤 좋은 기능이지만 제 생각에는 가상 스크롤의 구현은 많은 버그 abd 부작용이 있습니다. 그래서 나는 그것을 사용하지 않는 것이 좋습니다. 기능이 거의 필요 없다면 scroll:1 형태로 사용해야하며 디버깅에 더 많은 시간을 투자해야합니다.

마지막주의 사항 : gridComplete의 사용을 권장하지 않습니다.대신 loadComplete을 사용하는 것이 좋습니다. 자세한 내용은 the answer을 참조하십시오.

마지막주의 사항 : 나는 사용하는 모든 그리드와 서브 그리드에서 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); 
}