jqGrid隐藏的加号/减号/打开图标列使子网格的宽度不如主行 [英] jqGrid hidden plus/minus/open icon column make subgrid less wide as main row
本文介绍了jqGrid隐藏的加号/减号/打开图标列使子网格的宽度不如主行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Following to this post about hiding plus/minus/open icon column, I have applied these suggests, so in CSS file :
.subgrid-cell { display: none; }
一切正常:
，但子网格未填充主网格右列的宽度.
but the subgrid don't fill the width of right column of main grid.
请，我的代码有误
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
推荐答案
如果我理解正确的问题，则可以通过添加
If I understand correct your question you can fix the problem by adding
autowidth: true
两者子网格的
选项(请参阅您使用的两个回调subGridRowExpanded).
我建议您另外使用JSLint或JSHint之类的工具来验证您的代码.您会看到您的代码使用了许多未定义的变量(colModel，sortName，rowdata).此外，强烈建议在jqGrid中将idPrefix选项与子网格一起使用，以防止可能的id重复.
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.
更新:发布提琴手演示之后，我了解问题.要解决此问题，我建议在具有subgrid-data类的<td>上设置colspan属性.例如，可以在subGridRowExpanded回调中包含该行
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);
在演示中按
即可解决此问题.请参见 http://jsfiddle.net/Cs9CP/11/(或.结果，您将看到类似
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();
请参见 http://jsfiddle.net/Cs9CP/12/(或全屏演示):
这篇关于jqGrid隐藏的加号/减号/打开图标列使子网格的宽度不如主行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
