jqgrid学习-第一个实例-a3mao-iteye技术网站
2011年05月17日
1、html文件
My First Grid html, body { margin: 0; padding: 0; font-size: 75%; } $(document).ready(function(){ jQuery("#jsonmap").jqGrid({ url:WEB_PATH+'/example/JqGridExample.action', //url:WEB_PATH+'/excludes/post.jsp', datatype: 'json', colNames:['编号','姓名','密码','年龄','地址','出生日期'], colModel:[ {name:'id',index:'id', width:90,sorttype:"int"}, {name:'username',index:'name', width:110,sorttype:"int"}, {name:'password',index:'password', width:80}, {name:'age',index:'age', width:80}, {name:'address',index:'address', width:80}, {name:'time',index:'time', width:80,sorttype:"date"} ], imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/css /smoothness/images', rowNum:10, rowList:[10,20,30], pager: "pjmap", multiselect: false, sortname: 'id', viewrecords: true, sortorder: "desc", jsonReader: { root: "dataRows", repeatitems : false }, caption: "jqGrid test", height: 220 }).navGrid('pjmap', {view:true,edit:true,add:false,del:false}, {closeOnEscape:true} ); });
jqGrid需要我们事先指定一个table对象,且有一个唯一的id属性。其他表格属性比如Cellspacing、cellpadding跟border 不要自己设置,jqGrid会设置。
因为我们要分页,所以要定义一个分页的div对象,同样必须有id属性。
jqGrid的用法:
jQuery('#grid_selector').jqGrid( options )
grid_selector就是table的id值,
optoins是一个json对象:
{ url:WEB_PATH+'/example/JqGridExample.action', //url:WEB_PATH+'/excludes/post.jsp', datatype: 'json', colNames:['编号','姓名','密码','年龄','地址','出生日期'], colModel:[ {name:'id',index:'id', width:90,sorttype:"int"}, {name:'username',index:'name', width:110,sorttype:"int"}, {name:'password',index:'password', width:80}, {name:'age',index:'age', width:80}, {name:'address',index:'address', width:80}, {name:'time',index:'time', width:80,sorttype:"date"} ], imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/css /smoothness/images', rowNum:10, rowList:[10,20,30], pager: "pjmap", multiselect: false, sortname: 'id', viewrecords: true, sortorder: "desc", jsonReader: { root: "dataRows", repeatitems : false }, caption: "jqGrid test", height: 220 }
4、服务端文件
package com.test.json.action; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.apache.struts2.json.annotations.JSON; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import com.web.action.BaseAction; public class JqGridAction extends BaseAction { /** * */ private static final long serialVersionUID = 1L; private int page = 1; private int total = 3; private int rows = 0; private List dataRows = new ArrayList(); public String execute() { JSONArray t_list = new JSONArray(); for(int i=0;i
评论
3 楼
aini_ai_love
2012-11-19
2 楼
lwgreatperson
2012-08-10
不好看,不知道在那抄的
1 楼
lwgreatperson
2012-08-10
发表评论
-
通过ACL和.net Framework实施对Windows对象访问的管理
2012-01-20 01:02 833通过ACL和.net Framework实施对Windows对 ... -
Windows Azure(四-2):云端的文件系统(Blob Storage)
2012-01-20 01:02 740Windows Azure(四-2):云端的文件系统(Blob ... -
windows 64bit平台移植总结
2012-01-20 01:02 809windows 64bit平台移植总结 2010年08月10 ... -
Windows Mobile Test Framework实现手机软件自动化测试的介绍
2012-01-20 01:02 853Windows Mobile Test Framework实现 ... -
是谁成就了凤姐的忘形
2012-01-19 08:50 636是谁成就了凤姐的忘形 2010年06月02日 ... -
全国名小吃
2012-01-19 08:50 589全国名小吃 2012年01月14日 广西小吃 广西菜点由 ... -
看“非诚勿扰”(2011.3.27)
2012-01-19 08:50 654看“非诚勿扰”(2011.3.27 ... -
全国各省女孩性格+美丽程度比较分析!
2012-01-19 08:50 771全国各省女孩性格+美丽 ... -
中国不同地方女人的主要特点
2012-01-19 08:50 892中国不同地方女人的主 ... -
转: Boost下载安装编译配置使用指南(含Windows和Linux)
2012-01-17 01:18 609转: Boost下载安装编译配 ... -
Android环境搭建(jdk1.6+eclipes3.4.1+Android sdk2.3+adt0.9.7)
2012-01-17 01:18 782Android环境搭建(jdk1.6+eclipes3.4.1 ... -
Windows系统下查看Android的源码的方法
2012-01-17 01:18 910Windows系统下查看Android的源码的方法 2010 ... -
修复工具类
2012-01-17 01:18 686修复工具类 2011年05月08日 ... -
制作VB安装程序问答(Package & Deployment)
2012-01-15 20:01 780制作VB安装程序问答(Package & Deploy ... -
vb代码2
2012-01-15 20:01 694vb代码2 2010年11月21日 ... -
VB 打开文件
2012-01-15 20:01 985VB 打开文件 2009年07月21日 关于VB中She ... -
VB ShellExecute 函数应用技巧
2012-01-15 20:01 969VB ShellExecute 函数应用技巧 2010年05 ... -
天铭本期热招岗位7.19-7.25
2012-01-15 20:01 10天铭本期热招岗位7.19-7. ... -
程序员如何提升(看了很多文章以后的总结/摘要)--未完待续
2012-01-11 12:11 548程序员如何提升(看了很多文章以后的总结/摘要)--未完待续 ... -
DB2数据库常用命令集
2012-01-11 12:11 594DB2数据库常用命令集 2011年05月01日 mem ...
相关推荐
Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
jqgrid方法-中文 (2).docxjqgrid方法-中文 (2).docx
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip
jquery.jqGrid-4.5.2.zip 官方资源文件
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数...jqGrid 学习 第一个实例 63 使用 jqGrid 修改数据并检查 69">jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid [更多]
NULL 博文链接:https://only-xxp.iteye.com/blog/768029
jqgrid jquey 样式 让表格变得更漂亮
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big ...
jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar
jqGrid-wiki版手册
jqGrid-master最新版,从英文站点下载而来,方便各位下载
jqGrid-3.2 jqgriddocs.pdf jquery.jqGrid.js
jquery.jqGrid-4.1.1.zipjquery.jqGrid-4.1.1.zipjquery.jqGrid-4.1.1.zip
jquery.jqGrid-4.3.2.zip
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jquery.jqGrid-4.4.5,最新版的jqgrid,支持jquery ui皮肤