Go语言视频零基础入门到精通

admin

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





  

一、jqGrid特性：

基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
兼容目前所有流行的web浏览器。
Ajax分页，可以控制每页显示的记录数。
支持XML，JSON，数组形式的数据源。
提供丰富的选项配置及方法事件接口。
支持表格排序，支持拖动列、隐藏列。
支持滚动加载数据。
支持实时编辑保存数据内容。
支持子表格及树形表格。
支持多语言。
最关键目前是免费的。

二、jqGrid使用方式：
1.下载文件

下载jqGrid的软件包，目前最新版本为4.4.1 下载地址为：http://www.trirand.com/blog/?page_id=6
下载jQuery文件，目前最新版本为1.8.2 下载地址为：http://code.jquery.com/jquery-1.8.2.min.js
下载jqGrid皮肤，下载地址为：http://jqueryui.com/themeroller/ 我使用的是：ThemeRoller->gallery->cupertino样式

2.准备文件

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




3.页面中得代码
3.1、head中加入引用

css文件引入：



  
  

1. <link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
2. <link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">

复制代码

  
   



js文件引入：



  
  

1. <script type="text/javascript" src="jquery-1.8.2.min.js" />
2. <script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
3. <script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
4. <script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>

复制代码

  
   


3.2、body中的代码


  
  

1. <!-- jqGrid table list4 -->
2. <table id="list4"></table>
3. <!-- jqGrid 分页 div gridPager -->
4. <div id="gridPager"></div>

复制代码

  
   



其中，list4为列表jqGrid，gridPager为列表的分页div

3.3、js中的代码


  
  

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

复制代码

  
   



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

具体的参数可以查询jqGrid API。


详情请看：
http://www.huosen.net/archives/142.html