使用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視頻教程。
