jqGrid隐藏加/减/打开图标列使子网格不如主行宽
关于隐藏加/减/打开图标列的这个post之后，我已经应用了这些建议，所以在CSS文件中：
.subgrid-cell { display: none; }
一切都好：
但是子网格没有填充主网格右列的宽度。
请问，我的代码中有错误，
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');});
或者有什么方法可以解决或扭转这种麻烦吗？
非常感谢谁能给我一些帮助。祝你有愉快的一天
JiheL
1 个答案:
答案 0 :(得分：2)
如果我理解您的问题，您可以通过添加
来解决问题autowidth: true
选项（请参阅您使用的两个回调subGridRowExpanded。）
我建议您另外使用JSLint或JSHint等工具验证您的代码。您会看到您的代码使用了许多未定义的变量（colModel，sortName，rowdata）。此外，严格建议在jqGrid中使用带有子网格的idPrefix选项，以防止可能的id重复。
更新：发布the fiddler demo后，我了解问题所在。要解决此问题，我建议在colspan类<td>上设置subgrid-data属性。例如，可以在subGridRowExpanded中回调该行
$("#" + subgrid_id).closest("td").attr("colspan", 3);
在您的演示中解决问题。请参阅http://jsfiddle.net/Cs9CP/11/（或the full screen demo）。另外，我建议对所有子网格使用height: "auto"。结果你会看到像
如果需要，还可以使用行
隐藏子网格中的第一个空列$("# + subgrid_id).closest(".ui-subgrid").find("td[colspan=1]").first().hide();
请参阅http://jsfiddle.net/Cs9CP/12/（或the full screen demo）：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？