使用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,
1
2
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对应函数用来格式化具体数据项的操作，大家也可以进行参考。
