我正在使用jqGrid 4.8.2并设置了固定宽度的网格。但是,当我使用columnChooser修改显示的列时,网格的宽度将重新调整为所有列的组合宽度,水平滚动消失。我已经尝试重置“完成”中的宽度。 columnChooser param但它不起作用。经过一些调试后,似乎在完成'之后发生了调整大小。完成后,对话框窗口关闭。我创建了一个按钮来手动重置宽度,这很好,所以我知道重置宽度可能会发生。我只是不知道用哪个事件来触发它。
var defaultColModel =
[
{name:'REQUESTEDDATE'
,index:'r.requestedDate'
,label:'Request Date'
,sorttype:"date"
,template: "date"
,search:true
,width:100
,hidden:false
},
{name:'VENDORNAME'
,index:'v.companyName'
,label:'Vendor'
,search:true
,stype:'text'
,width:150
,formatter:'showlink'
,formatoptions:{baseLinkUrl:'<cfoutput>#application.rootpath#</cfoutput>', addParam: '&page=dsp_request#vendorT', idName:'REQUESTID'}
,hidden:false
},
{name:'VENDORID'
,index:'r.vendorID'
,label:'Vendor ID'
,search:true
,stype:'text'
,width:100
,hidden:true
},
{name:'VENDORCONTACT'
,index:'vendorContact'
,label:'Vendor Contact'
,stype:'text'
,search:true
,width:100
,hidden:true
} // there are many more cols. Just showing a few to illustrate how they are defined.
]
var myGrid = jQuery("#contract_grid").jqGrid({
url: 'cfc/com_ajxRequestNew.cfc?method=getReqJSON&returnformat=json',
datatype: 'json',
postData: {filters: myFilters},
mtype: 'POST',
search: true,
colModel: defaultColModel,
gridview: false, //added for IE
altRows: true,
emptyrecords: 'NO DATA FOUND',
height: 400,
width: 1200,
sortname: lastSortName,
sortorder: lastSortOrder,
page: lastPage,
pager: jQuery('#report_pager'),
rowNum: lastRowNum,
rowList: [10,20,50,100],
viewrecords: true,
clearSearch: false,
caption: "Contracts Dashboard",
sortable: true,
shrinkToFit: false,
excel: true,
ajaxSelectOptions: {type: "GET"},
gridComplete: function() {//removed code for simplicity}
});
jQuery("#contract_grid").navGrid('#report_pager',{
edit:false,
add:false,
del:false,
search:false,
refresh:false
}).navButtonAdd("#report_pager",{
caption: "Columns",
buttonicon: "ui-icon-calculator",
title: "Select and Reorder Columns",
jqModal: true,
onClickButton: function(e){
$('#contract_grid').jqGrid('columnChooser', {
dialog_opts: {
modal: true,
minWidth: 470,
show: 'blind',
hide: 'explode'
},
done : function (perm) {
if (perm) {
// "OK" button are clicked
$('#contract_grid').jqGrid("remapColumns", perm, true);
// **UPDATED WORKING CODE**get the width set for the grid
var gwdth = $('#contract_grid').jqGrid("getGridParam","width");
// set the tblwidth so the grid does not get resized
$('#contract_grid').setGridParam({tblwidth:gwdth});
} else {
// we can do some action in case of "Cancel" button clicked
}
}
});
}
});
答案 0 :(得分:1)
您没有发布代码中最重要的部分:colModel
。至少应该“固定”的列的定义很重要。
应具有固定宽度的列应具有fixed: true
属性。它会阻止它的宽度变化。
更新:我仍然不确定你想要实现什么,但我不知道jqGrid 4.8.2的具体行为,因为我开发了替代fork free jqGrid你可以尝试在GitHub上包含代码的URL(参见here)。
通常,存在两个重要的内部参数:tblwidth
和width
。 tblwidth
是网格主体的宽度(<table>
),并且存在width
,即网格的总宽度:宽度外部的div。我认为jqGrid 4.8.2在tblwidth
和width
之间做出了错误的选择。我建议您尝试将var gwdth = $('#contract_grid').jqGrid("getGridParam","width");
回调代码中的done
替换为var gwdth = $('#contract_grid').jqGrid("getGridParam","tblwidth");
免费jqGrid会保存您在jqGrid的width
选项中创建网格时使用的原始 widthOrg
,它使用columnChooser
<内的以下行/ p>
$self.jqGrid("setGridWidth",
!p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%") ? p.tblwidth : p.width,
p.shrinkToFit);
您未指定autowidth: true
并且在创建网格时使用了width: 1200
选项(稍后将widthOrg
)。因此,免费的jqGrid默认情况下会使用tblwidth
,而不是width
。