- 浏览: 1073322 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (453)
- Struts2 (30)
- Spring (14)
- iBATIS (6)
- Hibernate (13)
- JVM (5)
- JSON (10)
- Ajax (5)
- Flex (1)
- JavaScript (25)
- PowerDesigner (4)
- 项目管理 (7)
- 数据库 (29)
- 生活 (18)
- 软件应用 (21)
- 无线技术 (2)
- Linux (39)
- TOP开发学习 (2)
- JAVA工具小TIPS (2)
- Java通用 (52)
- XML (3)
- 软件测试 (29)
- Maven (10)
- Jquery (1)
- 正则表达式 (3)
- 应用服务器 (15)
- Android (5)
- linux 和windowx 下 tomcat 设置JVM (8)
- 应用服务器 连接池 (4)
- Linux 后台输出中文乱码 (1)
- Hadoop (28)
- python (2)
- Kafka (7)
- Storm (5)
- Elasticsearch (7)
- fddd (1)
最新评论
-
kafodaote:
Kafka分布式消息系统实战(与JavaScalaHadoop ...
分布式消息系统Kafka初步 -
小灯笼:
LoadRunner性能测试实战课程网盘地址:http://p ...
LoadRunner性能测试应用(八) -
成大大的:
Kafka分布式消息系统实 ...
分布式消息系统Kafka初步 -
hulalayaha2:
Loadrunner性能测试视频教程下载学习:http://p ...
LoadRunner性能测试应用(八) -
993042835:
搞好 谢谢
org.hibernate.exception.ConstraintViolationException: could not delete:
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<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” 博客,请务必保留此出处http://polaris.blog.51cto.com/1146394/259336 本文出自 51CTO.COM技术博客 |
发表评论
-
java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream
2013-05-10 16:10 778C:\Program Files (x86)\MyEc ... -
读取word pdf中的文字 用第三方组件 pdfbox 和 poi
2013-03-20 23:51 944读取word pdf中的文字 用第三方组件 pdfbox 和 ... -
非常好使的FileUtil 类
2013-03-09 12:45 969package com.zqk.util; imp ... -
eclipse 3.4.1 导入项目后 Target runtime Apache Tomcat v5.0 is not defi...
2012-05-29 09:27 1776下载最新版本eclipse3.4.1后,导入以前的项目,报 ... -
MyEclipse 6.5 序列号生成器
2011-06-10 09:47 1633import java.awt.event.ActionEve ... -
字节序 整形与字节数组转换
2010-12-15 13:43 2310Big Endian and Little Endian ... -
JPEG文件数据结构以及将位图保存为JPG的代码 转2
2010-12-02 13:31 2802三、实例分析 用系统自带的画图程序画一个32×24的红色方块 ... -
JPEG文件数据结构以及将位图保存为JPG的代码 转1
2010-12-02 13:30 3007JPEG文件数据结构以及将位图保存为JPG的代码一、简 ... -
Nginx+resin调优文档
2010-11-18 17:02 2271http://blog.liuts.com/post/204/ ... -
分析 Tomcat startup.bat 启动脚本
2010-11-03 14:53 3188分析 Tomcat startup.bat 启 ... -
Tomcat配置优化 转
2010-11-03 14:51 10351.精简Tomcat和配置文件1.1 .删除不需要的管理应用和 ... -
URLConnection 读取字节流
2010-10-27 13:15 32292008-11-08 山寨Wget实现又惹事了 h ... -
字节到整形的转换
2010-10-27 12:47 1368public byte[] intToByte(int i) ... -
Gif 文件格式分析
2010-10-27 11:45 1018GIF文档ˉˉˉˉˉˉ 1.概述~~~~~~~~ ... -
JPG文件格式解码图片高度和宽度的分析
2010-10-27 10:34 977213. 简单说一下 JPG 文件的解码 ---------- ... -
CSS制作多种链接样式
2010-10-15 11:54 1085多种链接样式制作方法 ... -
虚拟主机上给一个网卡设置多个IP地址
2010-10-13 17:22 1832配置虚拟主机时有一种方式是在一块网卡上绑定多个IP,操作如下: ... -
linux下一个网卡配置多个IP
2010-10-13 17:21 928文本控制台下面有netconfig,还有ifconfig工具, ... -
[转载]linux中sar的详细使用
2010-10-13 17:06 857在使用UNIX操作系统的过程中,我们常常 ... -
Linux中sar命令
2010-10-13 17:05 958Linux中sar命令 sar这东 ...
相关推荐
jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid...
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
jquery表格插件
jqGrid表格插件——参数配置,使用举例
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能,该版本为官方最新版,附带Demo
jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用
jqGrid详解及高级应用
NULL 博文链接:https://lkf009.iteye.com/blog/1707013
jqGrid表格插件(带中文/英文文档)
代码简介:jqGrid表格内容查询读取代码是一款列表详细页表格布局,生成表格内容,表格查询代码等。
jquery ui tabs_jqgrid demo
好用的jquery表格插件jqGrid。 本压缩包含源码和DEMO,还有一个3.4的DOC。
jquery 表格插件,功能强大,适合于学习jquery 技术的同学
jqueryGridDemo jqGriddemo38 jquery jqgrid demo与文档
jquery的 表格操作demo,程序是vs2010的,类似excel表格操作数据的话,还是很有用的,简单实用强大。
之前网上没找到现成的jqgrid表格前台导出插件,都或多或少带后台,也不想换表格插件,所以参照extjs自己改了个前台导出插件,支持多表头和分组table带表头导出,引用方法文件有详细注释,直接能用,如有不足还请见谅...
Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
无刷新增删改查,网上都有免费下载,所以就不设置积分了。
jquery.jqgrid