最近使用了JqGrid表格,但是在设置水平滚动条时,一直没有效果,列也没有显示全。效果如下所示:
解决这个问题的方法:
如代码块中所示,必须要像下面一样设置下面的三个属性,shrinkToFit一定是false,默认是 true 的,也需要 autowidth 为 true
// 自定义列宽 必须属性
shrinkToFit: false,
// 设置水平滚动条
autoScroll : true,
// 自适应宽度
autowidth:true,
要是还不显示就强行设置,在 loadComplete 事件和 gridComplete 事件中都强行设置
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
具体的代码请查看下面的代码块,为了方面阅读代码块,代码块中只保留了部分属性和事件,方便查看上面的红色字体是在哪个地方的。
$("#jqGrid").jqGrid({
url: baseURL + 'XXXXX',
datatype: "json",
postData: {"project":option, "testDate":testDate, "station": stationVal},
colModel: [
{ label: "主键", name: "id", hidden: true,formatter:"integer", formatoptions: { defaultValue: '0' } , key: true},
{ label: '时间', name: 'testDate', hidden: true}
],
// 表格名称
caption : "明细",
// 加载完成后事件
loadComplete:function () {
// 水平滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
// 垂直滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-y" : "scroll" });
},
// 自定义列宽 必须属性
shrinkToFit: false,
// 设置水平滚动条
autoScroll : true,
// 自适应宽度
autowidth:true,
height: 385,
viewrecords: true,
width:"100%",
rowNum: 10,
rowList : [10,26,50],
rownumbers: true,
rownumWidth: 25,
multiselect: true,
gridComplete:function(){
// X 轴和 Y 轴的滚动条 隐藏 $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
// $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
}
}).trigger("reloadGrid");
然后应该能出来,反正我这是出来了,至于为什么,我是一点儿都不清楚。
希望这个东西对你们有帮助