首先对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属性就行了。如图,非常简洁。
1
2
3
4
5
6
<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数据。其默认值为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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为服务端传递过来的数组就可以满足要求了。比如:
1
2
3
4
5
6
jsonReader : {
root : "dataList", // 服务端保存数据的集合
records : "record", // 可以不要,因为我的服务端是record,不是默认的,才加上的
repeatitems : false
// 其它的全部默认就行
}

由此,Jqgrid完成一个request,并将得到的response,解析为所需的数据,显示到Grid表格中。整个流程就走完了。

原创文章,转载请注明: 转载自java开发者

本文链接地址: Jqgrid入门-显示基本的表格(一)

Jqgrid入门-显示基本的表格(一)的更多相关文章

  1. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  2. Jqgrid入门-操作表格的数据(二)

    上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据.           jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jq ...

  3. Jqgrid入门-Jqgrid分组的实现(八)

    上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能.         类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...

  4. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

  5. Jqgrid入门-别具特色的Pager Bar (四)

    Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record)         要实 ...

  6. Jqgrid入门-Jqgrid列数据拖动(七)

    上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置.     Jqgrid表格插件自己没有 ...

  7. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...

  8. Jqgrid入门-Jqgrid设置二级表头(六)

    上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如:           要实现这个功能,其实也不难.通过Jqgrid的s ...

  9. Bootstrap入门(四)表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

随机推荐

  1. [搜片神器]使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)

    谢谢园子朋友的支持,已经找到个VPS进行测试,国外的服务器:http://www.sosobta.com   大家可以给提点意见... 出售商业网站代码,万元起,非诚勿扰,谢谢. 联系h31h31 a ...

  2. 一个SQL Server 2008 R2 死锁的问题解决

    问题场景:在客户那碰到一个操作卡死的现象 问题解决: 1.如何挂钩是死锁问题:通过代码跟踪,发现是指执行一个SQL语句超时,因此猜想可能是表锁住了 2.如果确认是思索问题:通过SQL发现死锁,以下是相 ...

  3. JS中删除字符串中的空格

    问题描述:         在进行字符串操作时,由于字符串中存在较多的空格,因此需要考虑取消字符串中的空格 问题解决:       (1)删除字符串中的前导空格(字符串的前面的空格): 注意:这里使用 ...

  4. Matlab中min/max函数的误解

    1.C= min(a):返回最小值:我原来以为如果a是行向量,min(a)返回a本身,因为我记得min(a,1)是按列找最小,这是默认的.doc min发现,只要a是向量,那么返回最小值. 2.C= ...

  5. float2int

    flaot转int时,会直接舍弃小数为,但是当把f所在的地址的数据当成int解析时,就是另外的情况了. #include<iostream> using namespace std; in ...

  6. uva 11489

    简单博弈 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #i ...

  7. c# Invoke和BeginInvoke 区别

    原文:http://www.cnblogs.com/mashang/archive/2009/08/01/1536730.html Control.Invoke 方法 (Delegate) :在拥有此 ...

  8. Oracle调优总结(经典实践 重要)

    转载:http://langgufu.iteye.com/blog/1974211 Problem Description:1.每个表的结构及主键索引情况2.每个表的count(*)记录是多少3.对于 ...

  9. java split IP地址要用双斜杠

    示例代码: public void test() { String address = "11.12.13.14:800"; System.out.println(address. ...

  10. [转]Win7下Eclipse中文字体太小

    最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 3.7 用的字体是 Consolas,显示中文的时候默认太小了.   解决方式有两种:一. ...