jqGrid入门使用

jqGrid做什么

在我看来，jqGrid就是把后台的数据通过表格的形式，展现给前台。

基本使用步骤

1.在HTML页面中

<div id = "jqGrid"></div>
<div id = "jqPager"></div>

2.在js中

// 表格
$("#jqGrid").jqGrid({ // 使用jQuery选择器，并调用jqGrid方法
	url : ... // 请求的地址
	datatype : ...// 服务器端返回的数据类型(xml默认,json)
	mtype : ...// 请求类型 get(默认)/post
	postData : ...// 要提交的数据{}
	colModel : [..// 表格的属性信息
		{
			name : xx, // 获取数据的列的名字,对应数据库属性值
			label : xx, // 列的名字
			key : true, //主键
			width : xx, //宽度
			formatter : function(value,options,rows{..} // 格式化
		},{
			name : xx,
			...
		}
		...
	],
	// jqGrid分页区
	viewrecords : true , //是否显示总记录数
	height : xx, // 表格的高度
	rownumWidth : xx, // 每一列的宽度
	rowNum : 10, // 设置每页显示的数量
	rowList : [10,20,30], // 每页显示多少条记录数
	rownumbers : true, // 显示行号
	multiselect : true, // 显示左侧复选框
	autowidth : true, // 单元格宽度自动调整
	pager : "#jqPager", // 配置分页区id
	// 解析后台获取的数据
	jsonReader : {
		root : "xx",// 查询的记录结果，也就是表格显示的数据
		page : "xx",// 当前页
		total : "xx" ,// 总页码
		records :"xx" ,// 总记录数
	},
})

3.以下为真实案例

// HTML 与上面一致
function tableInit() {
	$("#jqGrid").jqGrid({ // 表格初始化 需要指定表格的id
		url : baseURL + "/category/list",// 请求的地址
		datatype : "json",// 服务器端返回的数据类型，默认xml
		mtype : "POST",// 请求类型 默认的是get

		postData : {},// 提交的数据

		colModel : [ // 表格的属性信息
		{// label 列名，name 获取到的列的值
			label : "分类id",
			name : "categoryId",
			key : true,
			width : 50,
		}, {
			label : "分类名字",
			name : "categoryName",
			width : 100
		}, {
			label : "分类级别",
			name : "level",
			width : 50,
			formatter : function(value, options, row) {// value 当前的对象 row 当前行
				if (value == 1) {
					return "一级分类";
				} else if (value == 2) {
					return "二级分类";
				}
			}
		}, {
			label : "创建时间",
			name : "createTime",
			width : 100,
		}

		],

		viewrecords : true, // 是否显示总记录数
		height : 385, // 表格的高度
		rownumWidth : 25, // 每一行的宽度
		rowNum : 10, // 设置每一页显示的记录数
		rowList : [ 10, 20, 30 ], // 改变表格每页显示的数据条数
		rownumbers : true, // 左侧的选择框
		multiselect : true, // 左侧的复选框
		autowidth : true, // 宽度自动调整
		pager:"#jqGridPager",//设置分页区域
		
		jsonReader:{// 解析后台获取的数据 CategoryController
			root : "page.rows",// 查询的记录结果,表格显示的数据
			page : "page.pageNum",//当前页码
			total : "page.pages",//总页码
			records : "page.total",// 总记录数
		},
		prmNames : {
			page:"page"
		}
	})
}