使用JqGrid来实现列表功能非常方便快捷，但在使用的过程中还会遇到一些定制化的问题。这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。
字段较少情况
在字段较少的情况，直接使用即可，无效做其他调整。下面贴一下简单的示例代码：
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'biz/message/list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'id', width: 50, key: true },
{ label: '标题', name: 'title', index: 'title', width: 80 },
{ label: '内容', name: 'content', index: 'content', width: 80 },
{ label: '类型', name: 'type', index: 'type', width: 80 ,
formatter: function (value, options, row) {
if(value == '0'){
return '<span class="label label-success">定时</span>';
} else if(value == '1'){
return '<span class="label label-danger">手动</span>';
}
}},
{ label: '状态', name: 'status', index: 'status', width: 80 ,
formatter: function (value, options, row) {
if(value == '0'){
return '<span class="label label-success">待发送</span>';
} else if(value == '1'){
return '<span class="label label-default">已发送</span>';
}
}},
{ label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },
{ label: '更新时间', name: 'updateTime', index: 'update_time', width: 80 }
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
});
默认情况下没有开启水平滚动条，无论有多少字段，都会显示在这一屏，字段比较少时无影响。但字段一旦多了，问题就出来了。此种情况下，jqGrid显示的内容的列宽并没有按照设置的列宽显示。列被压缩。则按比例初始化列宽度。
字段较多情况
针对字段较多的情况，官方提供了两个属性来进行解决。
shrinkToFit:false,
autoScroll: true,
shrinkToFit：用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度。默认值为true。
autoScroll：如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth。
了解了这两个属性的值之后，我们就可以对上面的代码进行重新修改，以满足需求。
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'biz/message/list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'id', width: 50, key: true },
{ label: '标题', name: 'title', index: 'title', width: 80 },
{ label: '内容', name: 'content', index: 'content', width: 80 },
{ label: '类型', name: 'type', index: 'type', width: 80 ,
formatter: function (value, options, row) {
if(value == '0'){
return '<span class="label label-success">定时</span>';
} else if(value == '1'){
return '<span class="label label-danger">手动</span>';
}
}},
{ label: '状态', name: 'status', index: 'status', width: 80 ,
formatter: function (value, options, row) {
if(value == '0'){
return '<span class="label label-success">待发送</span>';
} else if(value == '1'){
return '<span class="label label-default">已发送</span>';
}
}},
{ label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },
{ label: '更新时间', name: 'updateTime', index: 'update_time', width: 80 }
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
// 新增的部分
shrinkToFit:false,
autoScroll: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
}
});
});
当使用上述代码完成调整之后，还需要做的一件事就是将每列数据的width值进行大小的调整，以适合具体的展示效果。
在上述实例中，针对列表还展示了formatter对应函数用来格式化具体数据项的操作，大家也可以进行参考。
原文链接：《JqGrid实现超长水平（左右）滚动条功能》
精品SpringBoot 2.x视频教程
《Spring Boot 2.x 视频教程全家桶》，精品Spring Boot 2.x视频教程，打造一套最全的Spring Boot 2.x视频教程。
