JqGrid实现超长水平（左右）滚动条功能

使用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视频教程。

程序新视界
公众号“程序新视界”，一个让你软实力、硬技术同步提升的平台