1.假分页
jqgrid用来加载分页体验是很好,但是有时候我们需要假分页。
解决方式: 在jqgrid配置中添加 loadonce : true属性,数据一次性全部返回即可。
2、隐藏显示列
$("#jqGrid").setGridParam().showCol("name"); jqGrid 容器id name:列名。
$("#jqGrid").setGridParam().hideCol("name");
3、设置左右上下滚动条。
解决方式: 在jqgrid配置中添加 scroll:true,
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
//显示上下滚动条(固定表头)
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
4、添加单元格样式
解决方式: 在colmodel中添加cellattr函数,可以通过此方式设置单元格样式和合并单元格
例子: 添加样式: { label: '练习次数', name: 'currentMonthData.count',width:80,cellattr: addCellAttr},
function addCellAttr(rowId, val, rawObject, cm, rdata) {
if (val.indexOf("0") == 0) {
return "style='color:red'";
}
}
合并单元格: 百度一下有很多,遇到问题欢迎咨询。
5、设置两列表头。
grid.jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'centerName', numberOfColumns: 3, titleText: '<em>合并前三列</em>'},
{startColumnName: 'currentMonthData.count', numberOfColumns: 3, titleText: '<em>'+((new Date).getMonth()+1)+'当前月</em>'},
{startColumnName: 'oneMonthBeforeData.count', numberOfColumns: 3, titleText: '<em>'+(new Date).getMonth()+'上个月</em>'},
{startColumnName: 'twoMonthBeforeData.count', numberOfColumns: 3, titleText: '<em>'+((new Date).getMonth()-1)+'前月</em>'}
]
});