一、前台页面:
将以下两个Div放在Body标记中,table是数据的容器,div是工具栏
<DIV class="ui-layout-center">
<table id="gridList"></table>
<div id="pagerBar"></div>
</DIV>
//js部分
//定义列名称
var jqgrid_colNames=['nodeCode','nodeName', 'domain'];
//定义列模型
var jqgrid_colModel = [
{
name:'nodeCode',
index:'nodeCode',
width:80,
align:"center",
editable:true
},{
name:'nodeName',
index:'nodeName',
width:80,
editable:true,
editoptions:{size:10},
required:true
},{
name:'domain',
index:'domain',
width:90,
editable:true,
editoptions:{size:25},
required:true
}
];
//初始化jqgrid,放在jquery的ready内
function jqgridInit () {
jQuery("#gridList").jqGrid({
url:'/ibrms/brm/dirMgt_testJQGrid.action',
datatype: "json",
colNames:jqgrid_colNames,
colModel:jqgrid_colModel,
rowNum:10,
rowList:[10,20,30],
pager: '#pagerBar',
sortname: 'nodeCode',
viewrecords: true,
sortorder: "desc",
caption:"子目录列表",
height:"400",
autowidth:true,
toolbar: [true,'top'],
editurl:"someurl.php",
jsonReader:{
root:"dataRows",
page: "currentPage",
total: "totalPages",
records: "records",
repeatitems: false
}
}).navGrid('#pagerBar',{ edit:true, add:true, del:true});
二、后台:
//将要转换为json对象的类
//为了方便,将jqgrid需要的参数封装了一个类。
public class JQGridResponse {
private int totalPages; //总页数
private int currentPage; //当前页码
private int records; //总记录数
private JSONArray dataRows;//JSONArray记录集合
public JQGridResponse() {
this.totalPages = 0;
this.currentPage = 0;
this.records = 0;
this.dataRows = new JSONArray();
}
//以下省略get/set方法
}
Action:
public void testJQGrid(){
JQGridResponse grid= new JQGridResponse();
//构造数据
BrmNode brmNode1 = new BrmNode();
brmNode1.setNodeCode("001");
brmNode1.setNodeName("node1");
brmNode1.setDomain("ibrms");
BrmNode brmNode2 = new BrmNode();
brmNode2.setNodeCode("002");
brmNode2.setNodeName("node2");
brmNode2.setDomain("ibrms");
BrmNode brmNode3 = new BrmNode();
brmNode3.setNodeCode("003");
brmNode3.setNodeName("node3");
brmNode3.setDomain("ibrms");
//将数据加入list
List list = new ArrayList();
list.add(brmNode1);
list.add(brmNode2);
list.add(brmNode3);
//设置分页等参数
grid.setCurrentPage(1);
grid.setTotalPages(1);
grid.setRecords(3);
//将list转换为JSONArray对象
grid.setDataRows(JSONArray.fromObject(list));
ResponseWriteUtil.print2JsonObj(response, grid);
}
ResponseWriteUtil.print2JsonObj方法:
public static void print2JsonObj(HttpServletResponse response,Object object) {
PrintWriter out = null;
try {
out = response.getWriter();
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(Timestamp.class,new JsonValueProcessorTimestamp());
JSONObject jsonObject = JSONObject.fromObject(object, jsonConfig);
log.debug(jsonObject.toString());
out.print(jsonObject);
} catch (IOException e) {
log.debug(e);
} finally {
out.close();
}
}
Struts2配置:
<package name="com.test" namespace="/brm" extends="json-default">
<action name="dirMgt_*" class="com.test.action.DirMgtAction" method="{1}">
<result name="success"></result>
</action>
</package>
分享到:
相关推荐
第一个jqGrid例子 第一个jqGrid例子 第一个jqGrid例子
JQGrid例子
asp.net 解决json不显示数据 jqgrid完整例子。
jqGrid的asp.net例子,数据库是sql2008的AdventureWorks
jqgrid简单实例,利用jqgrid做了一个页面展示的示例.
JqGrid 小例子 vs2010+mvc,JqGrid 小例子 vs2010+mvc,JqGrid 小例子 vs2010+mvc
jqgrid下载及相关例子
利用jquery的插件jqgrid实现表头合并、分组、合计、例子
jqgrid.rar
1、jqGrid中文说明,对jQgrid表格关键使用方法中文说明 2、列举了添加、删除等一些功能代码,进行说明,详细介绍了展现jQgrid表格的方法
jqgrid加载本地数据并且分页例子,下载直接搭环境使用
在ASP.NET 下的jqgrid 的示例
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid代码例子[参考].pdf
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
最近研究jqgrid,网上找了很多的demo都是php的,很是气愤,没办法只有自己动手了,给用java的人一点参考,希望大家互相切磋!
运用了jqGrid实现数据的展示,分页,运用dialog弹出层进行增删改,弹出层代码分页写,用了ajax传值,同时也是MVC的运用。调用数据库则用的是linq
使用asp.net,jquery,ajax,jqgrid,json开发,多标签未完成进销存项目前端源代码aspx+javascript+ 数据库脚本,无刷新提交,tab页绝非iframe,供学习、二次开发或者程序定制。 演示地址:218.95.37.10:8083/login....
jqgrid 资料合集(包括一个例子) 倒开即可运行
jqgrid