问题
Following to this post about hiding plus/minus/open icon column, I have applied these suggests, so in CSS file :
.subgrid-cell { display: none; }
All is OK :
but the subgrid don't fill the width of right column of main grid.
Please, is there a mistake in my code,
jQuery(document).ready(function ($) {
var OldSelectedRow=null;
var height=$('body').height()-210;
var numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
var heightRows=numRows*23;
var myGrid = $("#tab22");
myGrid.jqGrid({
caption:"Recherche d'un ARTICLE dans les PARCS CLIENTS",
hidegrid:false,
url:'sub22.php',
datatype: "json",
height:heightRows,
shrinkToFit: true,
rowNum:numRows,
rownumbers:true,
rownumWidth: 40,
gridview: true,
colNames:['Id','Code', 'Désignation', 'Famille','S/famille','Marque','Matière','Réf.constructeur','PV base'],
colModel:[
{name:'a.id',index:'a.id', width:60, align:"right",hidden:true},
{name:'a.code',index:'a.code', width:150},
{name:'a.descr',index:'a.descr', width:200},
{name:'f.code',index:'f.code', width:80},
{name:'s.code',index:'s.code', width:80},
{name:'k.code',index:'k.code', width:80},
{name:'m.code',index:'m.code', width:80},
{name:'a.refc',index:'a.refc', width:150},
{name:'t.pnc',index:'t.pnc', width:80, align:"right"}
],
pager: '#tab22p',
sortname: 'a.code',
sortorder: "asc",
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
altRows:true,
altclass:'myAltRowClass',
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');
},
gridComplete:function(){
OldSelectedRow=null;
colModel = myGrid.jqGrid('getGridParam', 'colModel');
sortName = myGrid.jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID(myGrid[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 = myGrid.jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = myGrid.jqGrid ('getRowData', rowId);
myGrid.jqGrid('setCell',rowId, i, '','ui-widget-header');
myGrid.jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
},
onSelectRow:function(id,status){
if(OldSelectedRow!=id){
if(OldSelectedRow!=null){
myGrid.jqGrid ('collapseSubGridRow', OldSelectedRow);
$('#tab22_'+OldSelectedRow+'_t').remove();
$('#'+OldSelectedRow).removeClass('ui-state-highlight');
}
$('#'+id).addClass('ui-state-highlight');
OldSelectedRow=id;
myGrid.jqGrid('expandSubGridRow',id);
}else{
myGrid.jqGrid ('collapseSubGridRow', id);
$('#tab22'+id+'_t').remove();
$('#'+id).removeClass('ui-state-highlight');
OldSelectedRow=null;
}
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
rowdata = $("#tab22").jqGrid('getRowData',row_id);
var art=rowdata['a.id'],lastId;
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
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:"sg22.php?id="+row_id+"&art="+art,
datatype: "json",
colNames: ['Id','Groupe','Client', 'Nom','Ville','Matériel','Marque','Machine','Série','Type','Modèle','Désignation','N° série'],
colModel: [
{name:'p.id',index:'p.id', width:60, align:"right",hidden:true},
{name:'g.code',index:'g.code', width:80},
{name:'c.code',index:'c.code', width:60},
{name:'c.descr',index:'c.descr', width:200},
{name:'c.ville',index:'c.ville', width:200},
{name:'q.code',index:'q.code',width:80},
{name:'k.code',index:'k.code', width:80},
{name:'2h.code',index:'2h.code', width:60},
{name:'2s.code',index:'2s.code', width:60},
{name:'2t.code',index:'2t.code', width:60},
{name:'2m.code',index:'2m.code', width:60},
{name:'2m.descr',index:'2m.descr', width:200},
{name:'p.numserie',index:'p.numserie', width:80}
],
pager: pager_id,
rownumbers: true,
rowNum:15,
rowNumWidth:40,
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
caption:"Liste des PARCS CLIENTS contenant l'ARTICLE sélectionné",
hidegrid:false,
rownumWidth: 40,
autowidth:true,
altRows:true,
altclass:'myAltRowClass',
sortname: 'c.code',
sortorder: "asc",
height: 345,
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');
},
onSelectRow:function(id,status){
if(lastId!=id){
if(lastId!=null){
$("#"+subgrid_table_id).jqGrid ('collapseSubGridRow', lastId);
$('#'+subgrid_table_id+'t').remove();
$('#'+id).removeClass('ui-state-highlight');
}
$('#'+id).addClass('ui-state-highlight');
}
lastId=id;
$("#"+subgrid_table_id).jqGrid('expandSubGridRow',id);
},
gridComplete:function(){
// 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');
var gridId = $("#"+subgrid_table_id).jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = $("#"+subgrid_table_id).jqGrid ('getRowData', rowId);
$("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
$("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
},
subGrid: true,
subGridRowExpanded: function(subgrid2_id, row2_id) {
rowdata = $(this).jqGrid('getRowData',row2_id);
var parc=rowdata['p.id'],lastId=null;
var subgrid2_table_id, pager2_id;
subgrid2_table_id = subgrid2_id+"_tt";
pager2_id = "p_"+subgrid2_table_id;
$("#"+subgrid2_id).html("<table id='"+subgrid2_table_id+"' class='scroll'></table><div id='"+pager2_id+"' class='scroll'></div>");
$("#"+subgrid2_table_id).jqGrid({
url:"sg22b.php?id="+row2_id+"&parc="+parc,
datatype: "json",
caption:"Détail du PARC",
hidegrid:false,
colNames:['Id','Ensemble','Article', 'Désignation', 'Famille','S/Famille','Matière','PV base','% Remise','PV net'],
colModel:[
{name:'a.id',index:'a.id', width:60, align:"right",hidden:true},
{name:'c.code',index:'c.code', width:100,sortable:false},
{name:'a.code',index:'a.code', width:100,sortable:false},
{name:'a.descr',index:'a.descr', width:400,sortable:false},
{name:'f.code',index:'f.code', width:80,sortable:false},
{name:'s.code',index:'s.code', width:80,sortable:false},
{name:'m.code',index:'m.code', width:80,sortable:false},
{name:'t.pnc',index:'t.pnc', width:80,align:'right',sortable:false},
{name:'rem',index:'rem', width:80,align:'center',sortable:false},
{name:'pv',index:'pv', width:80,align:'right',sortable:false}
],
pager: pager2_id,
rownumbers: true,
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
rownumWidth: 40,
altRows:true,
altclass:'myAltRowClass',
sortname: 'c.code',
sortorder: "asc",
scroll:true,
maxheight: 230,
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');
},
gridComplete:function(){
// montre la colonne triée au chargement des données
colModel = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'colModel');
sortName = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($("#"+subgrid2_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');
var gridId = $("#"+subgrid2_table_id).jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = $("#"+subgrid2_table_id).jqGrid ('getRowData', rowId);
$("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
$("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
}
})
$("#"+subgrid2_table_id).jqGrid('navGrid',"#"+pager2_id,{edit:false,add:false,del:false,search:false});
$("#"+subgrid2_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
}
});
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false});
$("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
$("#"+subgrid_table_id).jqGrid('hideCol', 'subgrid');
},
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_table_id).remove();
myGrid.jqGrid('resetSelection');
}
});
myGrid.jqGrid('navGrid','#tab22p',{search:false,del:false,edit:false,add:false});
myGrid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
myGrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css({
textAlign: "center"
})
.children("span.ui-jqgrid-title")
.css({
float: "none",
color:'red',
fontSize:'16px'
});
myGrid.jqGrid('hideCol', 'subgrid');
$(window).bind('resize', function() {
myGrid.jqGrid('setGridWidth',$('body').width()-22);
var height=$('body').height()-210;
numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
heightRows=numRows*23;
myGrid.jqGrid('setGridParam', {height:heightRows,rowNum:numRows});
myGrid.jqGrid('setGridHeight',heightRows);
myGrid.trigger("reloadGrid");
}).trigger('resize');});
or is there some way to solve or turnaround this trouble ?
Many thanks to whose who could bring me some help. have a nice day
JiheL
回答1:
If I understand correct your question you can fix the problem by adding
autowidth: true
option to both subgrids (see two callbacks subGridRowExpanded which you use).
I recommend you additionally to verify your code with respect of tools like JSLint or JSHint. You would see that your code use many undefined variables (colModel, sortName, rowdata). Additionally it's strictly recommended to use idPrefix option in jqGrid with subgrids to prevent possible id duplicates.
UPDATED: After you posted the fiddler demo I understand the problem. To fix it I suggest to set colspan attribute on the <td> having subgrid-data class. For example one can include in subGridRowExpanded callback the line
$("#" + subgrid_id).closest("td").attr("colspan", 3);
in your demo to fix the problem. See http://jsfiddle.net/Cs9CP/11/ (or the full screen demo). Additionally I recommend to use height: "auto" for all subgrids. As the result you will see something like
If you want you can additionally hide the first empty column in the subgrid with the line
$("# + subgrid_id).closest(".ui-subgrid").find("td[colspan=1]").first().hide();
See http://jsfiddle.net/Cs9CP/12/ (or the full screen demo):
来源：https://stackoverflow.com/questions/15942773/jqgrid-hidden-plus-minus-open-icon-column-make-subgrid-less-wide-as-main-row