jqGrid入门使用

た入场券 2021-09-27 18:38 339阅读 0赞

### jqGrid的基本使用案例 ###

*   *  jqGrid做什么
     *  基本使用步骤
     *   *  1.在HTML页面中
         *  2.在js中
         *  3.以下为真实案例

## jqGrid做什么 ##

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

## 基本使用步骤 ##

### 1.在HTML页面中 ###

### 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"
    		}
    	})
    }