free-jqGrid

PM> Install-Package free-jqGrid

 

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为： http://www.trirand.com。

 

一、jqGrid特性：

• 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
• 兼容目前所有流行的web浏览器。
• 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
3. 下载jqGrid皮肤，下载地址为：http://jqueryui.com/themeroller/ 我使用的是：ThemeRoller->gallery->cupertino样式

2.准备文件

在项目的根目录下，建立相应的文件夹，放入下载的文件，目录结构如下图：

3.页面中得代码

3.1、head中加入引用

• css文件引入：

<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(){     $("#list4").jqGrid({         url:contextPath + "search.action",         datatype:"json", //数据来源，本地数据         mtype:"POST",//提交方式         height:420,//高度，表格高度。可为数值、百分比或'auto'         //width:1000,//这个宽度不能为百分比         autowidth:true,//自动宽         colNames:['添加日期', '手机号码', '银行卡号','备注','操作'],         colModel:[             //{name:'id',index:'id', width:'10%', align:'center' },             {name:'createDate',index:'createDate', width:'20%',align:'center'},             {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'},             {name:'cardNo',index:'cardNo', width:'20%', align:"center"},             {name:'remark',index:'remark', width:'35%', align:"left", sortable:false},             {name:'del',index:'del', width:'10%',align:"center", sortable:false}         ],         rownumbers:true,//添加左侧行号         //altRows:true,//设置为交替行表格,默认为false         //sortname:'createDate',         //sortorder:'asc',         viewrecords: true,//是否在浏览导航栏显示记录总数         rowNum:15,//每页显示记录数         rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。         jsonReader:{             id: "blackId",//设置返回参数中，表格ID的名字为blackId             repeatitems : false         },         pager:$('#gridPager')     }); });

 

至此，整个使用jqGrid的前端使用就基本完毕了，当加载此页面的时候，将初始化jqGrid表格，并通过url请求数据，返回datatype类型的数据。至于后台的数据，大家可以自己调用，并返回json格式的数据即可填充表格。 具体的参数可以查询jqGrid API。

http://www.cnblogs.com/huozhicheng/archive/2012/11/11/2765610.html

http://www.trirand.com/blog/jqgrid/jqgrid.html

http://www.nuget.org/packages/free-jqGrid/4.8.0