jqgrid使用

   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里面。

}
});
  }