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