jqGrid如何在单击另一行时折叠行 [英] jqGrid how to collapse row when clicking on other row
问题描述
在主网格中，当我单击一行时，它变为突出显示"，并显示七个子网格. 这是一个示例，其中选择了第一行，并且即将对其进行编辑(正在进行中):
In a main grid, when I click on one row, it become 'highlighted' and the seven subgrids are showed. Here is an example where first row is selected, and near to be edited (work in progress) :
现在，如果我单击主网格的第二行，则第一行被隐藏，第二行被选中.我单击编辑"按钮后，出现警告:没有选中的行！
Now, if I click on second row of the main grid, the first is hidden and the second selected. I click after on edit button and a warning appears : no selected row !
如果我再次单击第二行，它将变为未选中状态，然后再次单击以进行选择和编辑，一切正常！因此，我认为我在折叠状态和展开状态之间进行切换的代码有误:
If I click again on the second row, it become unselected, and again I click for selecting and editing, that runs fine ! So I presume that my code for switching between collapsed and expanded status is somewhere wrong :
已更新2013-04-11
按照Oleg的回答，我加入了程序的完整代码(限制为30000):
Following Oleg's answer, I join the full code (limited to 30000) of my program :
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?' • ':'')+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".
where I don't use any subGridOptions so I think that false is the defaultValue of reloadOnExpand. I have added in OnSelectedRow function 2 alerts, at beginning and ending of function. The first click display fine selrows for begin and end, but for next click, the end alert displays 'null'.
我也尝试将所有部分删除到"subGridRowExpanded"和"subGridRowColapsed"函数中. 麻烦不会发生，开始和结束都很好，我可以根据需要编辑行.
I have tried also to delete all parts into 'subGridRowExpanded' and 'subGridRowColapsed' functions. The trouble doesn't happen, begin and end selrows are fine and I can edit row as I want.
jqGrid的内部工作对我来说非常复杂，因为我不习惯使用它，并且我还要感谢您在所有为我提供帮助的过程中所花费的时间.您的评论总是正确的，我希望您能在这个论坛上停留很长时间. 再次感谢.祝你今天过得愉快.吉禾L
Inner workings of jqGrid seem very complicate for me as I'm not used to work with it, and I have to thank you one more time for all time you spend for helping noobs as me. You are always right in your comments and I hope you will be for long time on this forum. Thanks again. Have a nice day. JiheL
更新日期2013-04-22
应用了Oleg的所有建议后，我对应用程序的20个脚本进行了一些更改，这些脚本都是以相同的方式构建的. 对于这个主题，这是我更改的onSelectRow的一小部分:
After applying all suggests from Oleg, I made some changes in the 20 scripts of my app, which all are built in the same way. For this subject, here is the small part of onSelectRow I changed :
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'));
},
但是结果再没有运气了，我无法编辑折叠另一行后已扩展的行.我不明白为什么在折叠旧行并展开选定的行后，更改后的借值会有所变化. 我希望有人可以驱使我解决这个问题，我想我并不孤单地遇到这个问题. 在此先感谢您的帮助，非常感谢.吉禾L
but no more luck for the result, I can't edit a row which has been expanded after collapse other row. I don't understand why selrow changes after collapse old row and expand selected row. I hope someone could drive me about this trouble, I think I'm not alone to meet this problem. Many thanks in advance for your kind help, really appreciated. JiheL
更新日期2013-04-23
在应用了Oleg的建议后，似乎可以解决主要问题(折叠其他行后编辑扩展行).但是将选定的行设置为网格顶部时，前五行可以正常运行，但随后的几行则不能.奇怪的 ！这是事实的快照:
After applying Oleg's suggests the main problem (edit an expanded row after collapsing other) seems to be solved. But setting selected row to top of grid runs fine with five first rows, but not with following rows. Strange ! Here is a snapshot of fact :
奇怪，因为 http://jsfiddle.net/jihel/JMcKF/中的演示运行正常并已使用我的应用代码创建！我正在搜索可能出错的地方或更改scrollTop，如果有人已经遇到了这样的麻烦并且有解决的想法，非常感谢您的所有帮助.祝你有美好的一天
Strange because demo in http://jsfiddle.net/jihel/JMcKF/ runs fine and has been created with my app code ! I'm searching what can be wrong or alter scrollTop, if someone has already met such a trouble and have an idea for solving, many thanks for all your help. Have a nice day
推荐答案
很难分析那么长的代码.因此，我只发表了一些有关潜在问题的注释，这些注释在我仔细检查后可以在代码中看到.
It's difficult to analyse so long code. So I post just some comments about the potential problems which I can see in the code after I looked through it.
我看到的主要问题:您应该在所有子网格中使用idPrefix选项(或在主网格和子网格中). idPrefix选项的值应取决于rowid将在其中打开子网格的位置.例如，您可以使用
The main problem which I see: you should use idPrefix option in all subgrids (or in the main grid and subgrid). The value of idPrefix option option should depend on rowid where the subgrid will be opened. For example you can use
idPrefix: "s_" + row_id + "_a_"
对于第一个子网格，idPrefix: "s_" + row_id + "_b_"对于第二个子网格，依此类推.
for the first subgrid, idPrefix: "s_" + row_id + "_b_" for the second subgrid and so on.
我建议您不要使用.(点)或任何其他元列名称中输入-个字符 .它是您的代码和jqGrid代码中潜在错误的根源.您应该了解name属性将用于构建jqGrid的某些内部元素的id属性. CSS中有一些限制，id属性中允许使用哪些字符.另外，jqGrid必须构建选择器才能从页面获取相应的元素.例如，如果rowid包含.，则$("#" + rowid)将是错误的选择器，因为选择器("#a.b")将被解释为:具有id=a和类b而不是id="a.b"的元素. jqGrid的旧版本根本无法使用此类ID和此类名称. jqGrid的最新版本应该可以使用，但是在id中使用元字符会在很多时候增加代码的复杂性.你真的需要吗?
I recommend you don't use . (dot) or any other meta-characters in the column name. It's origin of potential errors in your code and in the code of jqGrid. You should understand that the name property will be used to build id attributes of some internal elements of jqGrid. There are some restrictions in CSS which characters are permitted in id attribute. Additionally jqGrid have to build selectors to get the corresponding elements from the page. For example $("#" + rowid) will be wrong selector if rowid includes . because the selector ("#a.b") will be interpreted as: element with id=a and the class b instead of id="a.b". Old versions of jqGrid don't worked at all with such ids and such names. Recent version of jqGrid should works, but nevertheless usage of meta-characters in ids increase the complexity of the code in many time. Do you really need it?
由于几乎相同的问题，我不建议您对不同的表使用相同的name属性.如果计划将搜索过滤器用于多个网格或子网格(对于多个网格使用filterToolbar)，则可能会很重要.当前，例如在多个子网格中使用'c.code'，这可能是未来问题的潜在根源.
Because of almost the same problem I don't recommend you to use the same name property for different tables. It could be important if you plan to use searching filter for multiple grids or subgrids (to use filterToolbar for multiple grids). Currently you use 'c.code' for example in multiple subgrids which is potential origin of the future problems.
如果您真的需要 来使用.进行搜索，并且使用datatype: "json"而不使用loadonce: true，则可以使用具有.的index和不具有.的name ..例如，您可以使用name: 'b_id', index: 'b.id'.如果使用与name属性的值相同的index值，建议从列定义中删除 index属性.
If you really need to use . for searching and you use datatype: "json" without loadonce: true then you can use index which has . and name which has no .. For example you can use name: 'b_id', index: 'b.id'. If you use index value which is the same as the value of name property, it's recommended to remove index property from the column definition.
此外，我不建议使用jqGrid的scroll:true选项.通常，虚拟滚动是一个不错的功能，但在我看来，虚拟滚动的实现有很多错误和副作用.所以我建议不要使用它.如果您真的不需要此功能，则应以scroll:1的形式使用它，并且必须在调试上投入更多时间.
Additionally I would don't recommend to use scroll:true option of jqGrid. In general virtual scrolling is nice feature, but in my opinion the implementation of virtual scrolling have many bugs abd side effects. So I recommend don't use it. If you really hardly need the feature then you should use it in the form scroll:1 and you have to invest more time in the debugging.
最后一句话:我不建议使用gridComplete.我建议改用loadComplete.有关更多详细信息，请参见答案.
The last remark: I don't recommend usage of gridComplete. I recommend to use loadComplete instead. See the answer for more details.
最后一句话:我建议在所有使用的网格和子网格中使用gridview: true.
The last remark: i recommend to use gridview: true in all grids and subgrids which you use.
更新:我不确定我是否完全了解您要在onSelectRow中实现的行为，但是下面的实现
UPDATED: I am not sure that I full understand which behavior you want to implement in onSelectRow, but the following implementation
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);
}
这篇关于jqGrid如何在单击另一行时折叠行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
