jqGrid 是一个用来显示网格数据的
jQuery
插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：
http://www.trirand.com
。
一、jqGrid特性：
· Ajax分页，可以控制每页显示的记录数。
· 支持XML，JSON，数组形式的数据源。
· 提供丰富的选项配置及方法事件接口。
· 支持表格排序，支持拖动列、隐藏列。
· 支持滚动加载数据。
· 支持实时编辑保存数据内容。
· 支持子表格及树形表格。
· 支持多语言。
二、jqGrid使用方式：
1.下载文件
1. 下载jqGrid的软件包，目前最新版本为4.4.1 下载地址为：
http://www.trirand.com/blog/?page_id=6
2. 下载jQuery文件，目前最新版本为1.8.2 下载地址为：
http://code.jquery.com/jquery-1.8.2.min.js
2.准备文件
在项目的根目录下，建立相应的文件夹，放入下载的文件，目录结构如下图：
3.页面中得代码
3.1、head中加入引用
<
link
type
="text/css"
rel
="stylesheet"
href
="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<
link
type
="text/css"
rel
="stylesheet"
href
="jqGrid/themes/ui.jqgrid.css">
· js文件引入：
<
script
type
="text/javascript"
src
="jquery-1.8.2.min.js"
/>
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>
3.2、body中的代码
<!-- jqGrid table list4 -->
<
table
id
="list4"></
table
>
<!-- jqGrid 分页 div gridPager -->
<
div
id
="gridPager"></
div
>
其中，list4为列表jqGrid，gridPager为列表的分页div
3.3、js中的代码 <重要>
$(document).ready(
function
(){
$("#jqGrid").jqGrid({
url : '/admin/product/ajax_query_list', // 地址
datatype : "json",
jsonReader : {
root : "data", // json中代表实际模型数据的入口
page : "pageIndex", // json中代表当前页码的数据
total : "pageCount", // json中代表页码总数的数据
records : "resultCount", // json中代表数据行总数的数据
repeatitems : false
// 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
},
styleUI : 'Bootstrap',
colModel: [
{
label: '名称',
name: 'name',
width: 30,
resizable:false,
formatter: detail
},
{
label: '产品簇',
name: 'productFamilyName',
resizable:false,
width: 30
},
{
label: '产品类型',
name: 'type',
resizable:false,
width: 30,
formatter: type
},
{
label: '创建人',
name: 'creater',
resizable:false,
width: 30
},
{
label: '创建时间',
name: 'createTime',
resizable:false,
width: 35,
formatter: createTime
},
{
label: '状态',
name: 'status',
width: 30,
resizable:false,
align: 'center',
formatter : status
},
{
label: '操作',
name: 'operate',
width: 42,
resizable:false,
formatter: opInit
}
],
viewrecords: true,
//
确定是否显示总的记录条数。
height: 333,
//表格的高度
scrollOffset:0,
//设置垂直滚动条宽度
rowNum: 10,
//
设置每一个grid的页做多显示多少条记录 参数会通过url参数传递到服务器端进行分页处理。
multiselect: true,
//复选框
rowList: [10, 20, 30],
//
用来为grid生成一个可供选择的调整每页显示记录条数的下拉菜单
pager: "#jqGridPager",
//分页
//多选时
//gridComplete 设置表格数据加载完毕后，所执行的操作
gridComplete: function() {
var rowIds = jQuery("#jqGrid").jqGrid('getDataIDs');
//获得表格所有行的ID
for(var k=0; k<rowIds.length; k++) {
var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k]);
//getRowData 用来获得某行的数据 它有一个rowid参数
var curChk = $("#"+rowIds[k]+"").find(":checkbox");
curChk.attr('name', 'checkboxname');
//给每一个checkbox赋名字
curChk.attr('value', rowIds[k]);
//给checkbox赋值
}
}
//获取到值后，传给后台进行处理
});
});
三、jqGrid表格随窗口大小自适应：
$(function(){
$(window).resize(function(){
$("#listId").setGridWidth($(window).width()); //-->
就是这句
});
});
网页链接