- 浏览: 191592 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (163)
- Linux (14)
- html (4)
- Lucene (2)
- WebService (4)
- oracle (7)
- spring (2)
- eclipse (15)
- AIX (2)
- windows (3)
- android (1)
- Java基础 (15)
- Struts (7)
- Java面向对象 (2)
- Java Web (1)
- Apache (2)
- Web容器 (12)
- Google (2)
- javascript (32)
- 爬虫 (2)
- MySQL (4)
- C#开发 (3)
- Hibernate (3)
- 面试题 (2)
- Birt报表 (2)
- Flex (1)
- UML (2)
- 非技术 (3)
- Mercurial(hg) (1)
- css (2)
- SVN (1)
- Mac (1)
- ORM框架 (1)
- 测试技术 (2)
- 浏览器兼容 (5)
最新评论
-
xiebo1983:
http://www.sqkoo.com/show/detai ...
完美解决MySQL中文乱码 -
hzy888:
楼主,你好,你说的问题,我自己写例子测试,没有你说的效果,两个 ...
onblur和onclick冲突 -
ahack:
onblur 谢谢。
onblur和onclick冲突 -
lkf009:
an_it_eye_2012 写道降下来了,怎么再升上去呢,需 ...
Windows IE8降为IE6 -
haohao-xuexi02:
貌似这个方法不错啊
Windows IE8降为IE6
jqGrid学习
最近的工作任务频繁涉及到很多的jqGrid这个插件,鉴于刚接触这个东西时不太了解,以至于在这个上面耽误了一些时间,现在将jqGrid学习总结一下:
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种方法:通过jQuery的插件来实现信息的展示以及对数据的操作等功能。
在网上,关于jQuery的表格插件有不少。其中有几款做的很好,比如:flexiGrid和jqGrid。不过flexGrid网上的资料很少,官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs,文档是全英文的,有兴趣的可以去看看。
一、jqGrid的第一个Demo
学习任何一项技术,第一个例子相当的重要,如果第一个例子都不能运行成功,那接下来的学习将是相当的困难,甚至没法进行下去。所以,在此先实现第一个例子,希望对刚刚接触jqGrid的人有所帮助。
jqGrid获得数据的方式有多种,包括xml和JSON,Array等。第一个例子,我使用了最简单的方式,即Array方式。之后的例子会用json从服务器端获得数据。本例子没有从跟后台交互,在这个例子中我们使用到了一个addRowData的方法
我的例子效果如下:
也许大家一般看到的都是蓝色的吧,我的例子的颜色是灰色的,这个是css中定义的样式导致的,有兴趣的可以去jquery-ui-1.8.24.custom.css中看看
前台页面代码如下:
注意:我的jqGrid使用的jqGrid3.8
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<base href="<%=basePath%>">
<title>jqGrid第一个例子</title>
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/jquery-ui-1.8.24.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/ui.jqgrid.css" />
<script src="<%=basePath%>js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=basePath%>js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
…
</script>
<body>
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
</html>
jqGrid3.8集成了jQuery UI,所以,此处需要导入UI相关js和css。另外,grid.locale-cn.js这个国际化文件需要从jqGrid源码包提取。另外,这个文件必须在jquery.jqGrid.min.js之前导入,同时jquery-1.8.2.min.js需要在 grid.locale-cn.js之前导入,因为这个里面调用到了jquery的对象, 而JS是解释型语言,是根据标签引用分块顺序执行的, 必须先有jquery才能保证代码正确执行
javascript代码:
$(document).ready(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:"flySky",gender:"男",email:"skyfly@163.com",QQ:"8000000",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"2",userName:"李雪",gender:"女",email:"xue@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王才",gender:"男",email:"cai@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"马丽",gender:"女",email:"lili@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"赵刚",gender:"男",email:"gang@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"叶公",gender:"男",email:"yegong@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"李晴",gender:"女",email:"qing@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"流星",gender:"男",email:"star@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孙先",gender:"男",email:"xian@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是一个对象,有很多属性,具体什么含义,怎么配置,之后的文章我会介绍,也可以在官方网站找到详细的介绍。
同时jqGrid还有别的调用方法,这个也在以后详细探讨
最后附上例子代码和jqGrid的源码包
- jqGridTest.rar (210.9 KB)
- 下载次数: 15
- jquery.jqGrid-3.8.2.zip (335.5 KB)
- 下载次数: 8
发表评论
-
javascript keycode大全
2014-05-16 15:06 568keycode 8 = BackSpace Ba ... -
20个超实用的JavaScript技巧及最佳实践
2013-12-27 12:53 020个超实用的JavaScript技巧及最佳实践 Java ... -
json2.js 转字符串 中文 ascii
2013-11-07 19:16 1051最笨的方法把Json2.js里的JSON改下名称,改成JS ... -
jquery.uploadify插件实现图片上传和预览效果
2013-09-06 00:30 10641、js代码: <script typ ... -
jQuery获取浏览器中的分辨率
2013-07-24 13:17 846jQuery获取浏览器中的分辨率 <sc ... -
jquery 判断浏览器
2013-07-23 10:30 664<script type="text/ja ... -
javascript 中 关于top、clientTop、scrollTop、offsetTop等
2013-07-15 10:38 851网页可见区域宽: document.body ... -
jquery javascript刷新iframe
2013-07-04 10:56 2894<iframe src="1.htm&quo ... -
jquery 特效
2013-06-30 18:20 673http://www.jsfoot.com/css3/demo ... -
jquery draggable 方法的参数
2013-06-21 11:51 1135draggable方法有很多参数,今天我瞎摸弄明白了一下几个 ... -
js 调用iframe里面的js函数
2013-05-22 12:45 816当iframe有name属性的时候 <iframe ... -
Jquery 调用iframe里面的js函数
2013-05-22 12:44 1当iframe有name属性的时候 <iframe ... -
Jquery 控制disabled和readonly
2013-05-09 16:43 794Jquery的api中提供了对元 ... -
jquery 跳出each循环
2013-05-03 14:42 612答案是使用 return false; 切记哦,不是使用br ... -
js数组的一些技巧算法
2013-05-03 11:43 662js数组倒序 reverse() 方 ... -
iframe的重新加载刷新reload
2013-05-02 18:44 1081window.frames("dbdRightCo ... -
js 控制光标到最后
2013-05-02 13:16 581/** * 使光标到最后 * @param obj ... -
JS判断字串字节数,并截取长度
2013-04-27 11:40 790转自:http://www.cnblogs.com/scy2 ... -
JavaScript几种数组去掉重复值的方法
2013-04-23 10:40 793/** 转自 http://www.nowama ... -
JQuery中使用Ajax赋值给全局变量异常解决方案
2013-04-23 10:23 1268我们在用JQuery的Ajax从后台提取数据后想把它赋 ...
相关推荐
jqGrid表格插件(带中文/英文文档)
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
jqGrid表格插件——参数配置,使用举例
无刷新增删改查,网上都有免费下载,所以就不设置积分了。
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
jquery表格插件
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能,该版本为官方最新版,附带Demo
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数...jqGrid 学习 第一个实例 63 使用 jqGrid 修改数据并检查 69">jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid [更多]
Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
主要参考www helloweba com 作者:月光光 qGrid表格应用 读取与查询数据 还有其他网上作者无私奉献心得 鄙视官方jqgrid Demo 修改了代码中的错误 增加了编辑功能 和jqueryUI 日历datepicker插件
jqgrid表格,单元格合并,并显示,demo版本
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
MVC4网站中集成jqGrid表格插件-示例源代码
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件
好用的jquery表格插件jqGrid。 本压缩包含源码和DEMO,还有一个3.4的DOC。
jqueryGridDemo jqGriddemo38 jquery jqgrid demo与文档
代码简介:jqGrid表格内容查询读取代码是一款列表详细页表格布局,生成表格内容,表格查询代码等。
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqgrid 编辑表格 一列