Jqgrid入门-显示基本的表格(一)

最新推荐文章于 2019-05-20 08:37:10 发布

aichuxia4449

最新推荐文章于 2019-05-20 08:37:10 发布

阅读量519

点赞数 1

文章标签： json javascript ui ViewUI

原文链接：http://www.cnblogs.com/hongzai/p/3158052.html

版权

首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。

特点如下:

完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
自定义的工具列。
预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
完整的分页功能。
按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。
预设的action formatter，可以快速而直觉地对每笔资料做运算。
支持多种数据格式。比如json、xml、array等。

这是我自己做的DEMO，先上个图片，当大家看看吧。

其实要实现上面图中的效果也不难。跟着我的步骤一步一步实现它吧！

（1）HTML部分

想要顺利的使用Jqgrid，需要引用下面6个文件。分别是：

jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）
ui.jqgrid.custom.css（专用于jqGrid界面的CSS文件）
jquery-1.7.2.js（jQuery的核心）
jquery-ui-1.8.1.custom.min.js（用于支持jQuery UI界面）
grid.locale-zh-CN.js（针对jqGrid的locale设置，根据locale不同，选择不同的尾缀）
jquery.jqGrid.min.js（jqGrid的核心，可以到jqGrid网站，根据需求选择模块下载）

然后在html的body里面创建一个table和div并赋予id属性就行了。如图，非常简洁。

 
      
           <link href= 
           "<%=basePath%>main/css/ui.jqgrid.css" 
           rel= 
           "stylesheet" 
           type= 
           "text/css" 
           /> 
          
 
           <link href= 
           "<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" 
           rel= 
           "stylesheet" 
           type= 
           "text/css" 
           /> 
          
 
           <script type= 
           "text/javascript" 
           src= 
           "<%=basePath%>main/js/jquery-1.7.2.js" 
           ></script> 
          
 
           <script type= 
           "text/javascript" 
           src= 
           "<%=basePath%>main/js/grid.locale-zh_CN.js" 
           ></script> 
          
 
           <script type= 
           "text/javascript" 
           src= 
           "<%=basePath%>main/js/jquery.jqGrid.min.js" 
           ></script> 
          
 
           <script type= 
           "text/javascript" 
           src= 
           "<%=basePath%>main/js/grid.custom.js" 
           ></script> 
          
 
    

（2）JS部分

官方文档说实现一个要想生成一个 Jqgrid ，最直接的方法就是：

$(“#grid_id”).jqGrid(options);也就是得到一个table的jquery对象，然后传递options就可以得到一个Jqgrid对象。

简单的介绍下options中最重要的部分。

1. jqGrid的重要选项

具体的options参考，可以访问Jqgrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：

url：提交处理数据的地址。
datatype：这个参数用于设定将要得到的数据类型。我最常用的是“json”，其余的类型还包括：xml、xmlstring、local、javascript、function。
mtype: 定义使用哪种方法发起请求，GET或者POST。
height：Grid的高度，可以接受数字、%值、auto，默认值为150。
width：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
shrinkToFit：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
autowidth：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
pager：定义页码控制条PageBar
sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到服务端。
viewrecords：设置是否在PagerBar显示所有记录的总数。
caption：Grid的标题。如果设置了，则将显示在Grid的Header层；如果未设置，则标题区域不显示。
rowNum：用于设置Grid中一次显示的行数，默认值为20。
rowList：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
prmNames：这是一个数组，用于设置jqGrid将要向服务端传递的参数名称。我们一般不用去改变什么。
colModel：最重要的数组之一，用于设定各列的参数。（稍后详述）
jsonReader：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

2. colModel的重要选项

和Jqgrid一样colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。

name：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
index：设置排序时所使用的索引名称，这个index名称会作为sidx参数传递到服务端。
label：表格显示的列名。
width：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
sortable：设置该列是否可以排序，默认为true。
search：设置该列是否可以被列为搜索条件，默认为true。
resizable：设置列是否可以变更尺寸，默认为true。
hidden：设置此列初始化时是否为隐藏状态，默认为false。
formatter：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档）。

3. jsonReader选项

jsonReader是Jqgrid的一个重要选项，用于设置如何解析从服务端发回来的json数据。其默认值为：

 
           jsonReader : { 
          
           root :  
           "rows" 
           ,  
           // 实际模型的人口 
          
           page :  
           "page" 
           ,  
           // 当前页码 
          
           total : total,  
           // 当前共多少页 
          
           records :  
           "records" 
           ,  
           // 总共多少行数据 
          
           repeatitems :  
           true 
           , 
          
           cell :  
           "cell" 
           , 
          
           id :  
           "id" 
           , 
          
           userdata :  
           "userdata" 
           ,  
           // 数据 
          
           subgrid : { 
          
           root :  
           "rows" 
           , 
          
           repeatitems :  
           true 
           , 
          
           cell :  
           "cell" 
          
           } 
          
           }

我们可以这样理解，prmNames设置了如何将Grid所需要的参数传给服务端，而jsonReader设置了如何去解析从服务端传回来的json数据。如果没有设置jsonReader的话，Jqgrid将会根据默认的设置来解析json数据，并显示在表格里。一般情况下，我们修改jsonReader的root为服务端传递过来的数组就可以满足要求了。比如：

 
           jsonReader : { 
          
           root :  
           "dataList" 
           ,  
           // 服务端保存数据的集合 
          
           records :  
           "record" 
           ,  
           // 可以不要,因为我的服务端是record,不是默认的,才加上的 
          
           repeatitems :  
           false 
          
           // 其它的全部默认就行 
          
           }