Jqgrid入门-显示基本的表格(一)
2013-06-27 12:07
190 查看
首先对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属性就行了。如图,非常简洁。
(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数据。其默认值为:
我们可以这样理解,prmNames设置了如何将Grid所需要的参数传给服务端,而jsonReader设置了如何去解析从服务端传回来的json数据。如果没有设置jsonReader的话,Jqgrid将会根据默认的设置来解析json数据,并显示在表格里。一般情况下,我们修改jsonReader的root为服务端传递过来的数组就可以满足要求了。比如:
由此,Jqgrid完成一个request,并将得到的response,解析为所需的数据,显示到Grid表格中。整个流程就走完了。
特点如下:
完整的表格呈现与运算功能,包含换页、栏位排序、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属性就行了。如图,非常简洁。
官方文档说实现一个要想生成一个 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数据。其默认值为:
相关文章推荐
- Jqgrid入门-显示基本的表格
- Jqgrid入门-显示基本的表格(一)
- Jqgrid入门-显示基本的表格(一)
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) ------ 显示基本Grid表格 .
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- Jqgrid入门-使用模态对话框编辑表格数据(三)
- jqgrid动态显示隐藏列,同时自动调整表格宽度
- 封装jQuery表格插件jqGrid,控件化jqGrid(二):显示
- jqGrid(3.6版本) 入门——创建jqGrid表格
- Jqgrid入门-操作表格的数据(二)
- Jqgrid表格基本总结
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
- Jqgrid入门-使用模态对话框编辑表格数据(三)