1.准备工作
首先,要引入基本的jquery文件,然后是下载jqgrid插件,我这里引入的有jquery.jqGrid.src.js,grid.setcolumns.js,grid.locale-en.js,jqgrid.css,ui.multiselect.css.
2.创建用来承载jqgrid的标签
<table id="gridTable"></table>
<div id="gridPager"></div>//显示分页工具条
3.填写jqgrid初始化信息
(1)有查询参数需要从后台加载数据并分页显示
function inittestGrid()
{
var jsonReader = {
root : "items",// 数据模型
total : "total",// 数据总页数
page : "page",// 数据页码
records : "records"// 数据总记录数
};
var options = {
datatype : "local",//可以是json
mtype : "POST",
caption : "标题",
// 添加表单数据到postData
beforeRequest : putFormData,//请求前调用函数
autowidth : false,
shrinkToFit : false,
autoScroll : false,
height : 700,
rowNum : 30,
page : 1,
beforeProcessing : function(d, status, xhr) {//在执行某操作前调用,这里主要是将数据全部显示的all字符串转换为该数据的总条数
if ($(this).jqGrid("getGridParam", "rowNum") == "all")
$(this).setGridParam({
rowNum : d.records
});
},
jsonReader : jsonReader,
pager : "#gridPager",//显示分页
rowList : [ 30, 50, 100, 'all' ],//每页显示记录数,值去正整数,特殊情况需要处理。
viewrecords : true,
multiselect : true,//是否设置多选
hoverrows : true,
rownumbers : true,
colNames : [ 'Test001', 'Test002'],//设置标题列
colModel : [
{
name : "test001",
//hidden : true 是否隐藏该列
},
{
defval : "test002",
width : document.body.clientWidth * 0.12,//格式化某一列的显示值
sortable:false,
formatter : function(cellvalue, options, rowObject) {
if (rowObject.test002== "false" && rowObject.test001=="")
return "";
if (rowObject.test002=="true" && rowObject.test001== "")
return "Yes";
if(rowObject.test001!= "")
return "<font color='red'>No</font>";
}
}
]
};
$("#gridTable").jqGrid(options);
}
(2)如果不分页且没有查询参数可以这样写。
function inittestGrid() {
var options = {
datatype : "local",
mtype : "POST",
autowidth : true,
autoheight : true,
shrinkToFit : false,
autoScroll : false,
viewrecords : true,
hoverrows : true,
rownumbers : true,
colNames : ['Test001','Test002'],
colModel : [
{
name : "test001",
sortable: false,
width : document.body.clientWidth * 0.16
},
{
name : "test002",
sortable: false,
width : document.body.clientWidth * 0.16
}
]
};
$("#gridTable").jqGrid(options);
}
4.加载数据。
1)分页情况。
$("#gridTable").jqGrid("setGridParam", {
url : ‘’,//查询数据Url
postData : param,//请求参数
datatype : "json"
}).trigger("reloadGrid");
2)不分页。
function getData()
{
var param={};
param.test=test;
request(__path + "***",
{
data:param,
success:
function(data)
{
var costData = [];
if(data != ""&&data!=null&&data!="null"){
var json = eval(data);
$(json).each(function(){
costData.push({
test001: this.test01,//test001需要与jqgrid初始化时设置的列名一样,test01与json的属性名一样.
test002:this.test02,
});
});
}
$("#gridTable")[0].addJSONData(costData);//将数据手动装载到jqgrid里面。
}
});
}