文档章节

jQuery学习之:jqGrid表格插件——第一个Demo

-鹏
 -鹏
发布于 2015/09/08 13:28
字数 966
阅读 23
收藏 0

应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种方法:通过jQuery的插件来实现信息的展示以及对数据的操作等功能。


在网上,关于jQuery的表格插件有不少。其中有几款做的很好,比如:flexiGrid和jqGrid。不过flexGrid网上的资料很少,官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址:http://www.trirand.com/jqgridwiki /doku.php?id=wiki:jqgriddocs。


学习任何一项技术,第一个例子相当的重要,如果第一个例子都不能运行成功,那接下来的学习将是相当的困难,甚至没法进行下去。所以,在此先实现第一个例子,希望对刚刚接触jqGrid的人有所帮助。

  
jqGrid获得数据的方式有多种,包括xml和JSON等。第一个例子,我使用了更简单的方式,即Array方式。之后的例子会用json从服务器端获得数据。本例子没有从跟后台交互。


本例子的效果如下:

效果图

列出关键代码:

 

HTML代码:

<link id="uiThemes" rel="stylesheet" type="text/css" media="screen"href="styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="styles/themes/ui.jqgrid.css" />
    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="scripts/jQuery/plugins/grid.locale-zh_CN.js" type="text/javascript"></script>
    <script src="scripts/jQuery/plugins/jquery.jqGrid.min.js" type="text/javascript"></script>
...
<body>
        <table id="gridTable"></table>
        <div id="gridPager"></div>
</body>

 

因为jqGrid3.6集成了jQuery UI,所以,此处需要导入UI相关js和css。另外,grid.locale-zh_CN.js这个国际化文件是自己翻译的,因为官方网站没有中文的国际化文件(官方提供了很多中语言的国际化文件,但是没有提供中文的,什么意思嘛!)。另外,这个文件必须在jquery.jqGrid.min.js之前导入,否则会出问题。


javascript代码:

$(function()
    {
        $("#gridTable").jqGrid({
                datatype: "local",
                height: 250,
                colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
                colModel:[
                        {name:'id',index:'id', width:60, sorttype:"int"},
                        {name:'userName',index:'userName', width:90},
                        {name:'gender',index:'gender', width:90},
                        {name:'email',index:'email', width:125,sorttype:"string"},
                        {name:'QQ',index:'QQ', width:100},                
                        {name:'mobilePhone',index:'mobilePhone', width:120},                
                        {name:'birthday',index:'birthday', width:100, sorttype:"date"}                
                ],
                sortname:'id',
                sortorder:'asc',
                viewrecords:true,
                rowNum:10,
                rowList:[10,20,30],
                pager:"#gridPager",
                caption: "第一个jqGrid例子"
        }).navGrid('#pager2',{edit:false,add:false,del:false});
        var mydata = [
                {id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
                {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
                {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
                {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
                {id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
                {id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
                {id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
                {id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
                {id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
                ];
        for(var i=0;i<=mydata.length;i++)
                jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
        });

可以看出,jqGrid的使用是:$("#tableId").jqGrid(optional);其中,optional是一个对象,有很多属性,具体什么含义,怎么配置,之后的文章我会介绍,也可以在官方网站找到详细的介绍。 


jsp/Servlet集成jqGrid、Struts2集成jqGrid请关注本人之后的博客文章。

 

由于很多人问我要例子的源代码,polaris也都发给了大家,然而有时候很晚才看到,发的会有点晚。鉴于此,特提供下载polaris的jqGrid的例子代码,谢谢大家的支持!

 

可以到:http://www.beijixing001.com/?p=406文章结尾下载我的例子代码。

本文出自 “徐新华polaris” 博客,请务必保留此出处http://polaris.blog.51cto.com/1146394/259336


本文转载自:http://polaris.blog.51cto.com/1146394/259336

-鹏

-鹏

粉丝 21
博文 155
码字总数 92388
作品 0
杭州
前端工程师
私信 提问
jqGrid 如何获取格式前的数据

我用jqGrid画了一个表格,里面有一列的数据被我格式了。现在我想在选择表格中某一行的时候读取被格式那一列的为格式之前的数据,要怎么写呢? 我的代码: var mystr="CODE1Name 1CODE2Name ...

洪洪K_HONG
2012/06/08
1K
1
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
0
8
jqGrid的选中行问题

想通过jQuery("#temp_table").jqGrid('setSelection',entityId); 来设置一行选中,但发现选中的行不是我要的那一行。 jqGrid初始化表的时候,id我传了自己的对象的id值,比如1、2、4、5 四个...

白小衣
2017/06/08
339
4
如何快速学习掌握jqGrid

由于公司项目需要,现在要用到jquery的jqGrid插件,第一次接触这个插件,不知道该找那些书籍来看,各位大侠对这熟悉的可否介绍介绍。如何能在最短时间内学习好jqGrid。

july0302
2012/09/11
878
1
jqGrid 4.0 发布,jQuery表格插件

jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 jqGrid 4.0 版本是在 4月9日发布的,主要增加对 jQuery 1.5 的支持,详细改进内容请看这里。...

红薯
2011/06/02
4.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

所以说这才是Redis进化史吗?看Redis是如何变成最强缓存的

写在前面:笔者翻阅了很多资料,只能找到Redis2.2及以后的主要版本的发布日志。所以,让我们从2.2开始一步一步深入了解Redis。 2.2 redis-cli命令非常大的改进: Tab补全,支持help(例如help ...

Java干货分享
36分钟前
1
0
manjaro抽风,/usr/lib/modules目录丢失

现象 2019年6月16日这周,突然发现manjaro抽风: 先是启动时无法加载一些内核模块,导致启动失败 然后用启动盘重新pacman -S linux,第一次启动是好的,再启动就有问题了 原因 翻来覆去搞不定...

chuqq
41分钟前
5
0
MyClouds-2.0-RC 发布,企业级微服务平台

MyClouds企业级微服务平台 MyClouds-V2.0-RC 已发布。 更新如下 [优化] 重构了系统架构。(移除myclouds-admin-webserver工程,停用后端thymeleaf模版引擎,前后端彻底分离;移除了myclouds-...

xiongchun
42分钟前
0
0
Wine-Staging 4.9 发布,增添一些新补丁

Wine-Staging的工作还在继续,到4.9版为止,在上游Wine代码库上有超过830个补丁。 在上周五的Wine 4.9发布之后,Wine-Staging 4.9已经发布了,之前的一些暂存工作现在围绕Windows编解码器和D...

linuxCool
47分钟前
1
0
JAVA8新特性(吐血整理)

一、Java 8 Lambda 表达式 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性。 Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中)。 使用Lambda 表达式可以...

天王盖地虎626
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部