ExtJs Grid + Struts2 + JSON

最新推荐文章于 2024-06-29 22:22:54 发布

weixin_33834679

最新推荐文章于 2024-06-29 22:22:54 发布

阅读量57

点赞数

文章标签： json java 数据库

原文链接：http://blog.51cto.com/53899960/561566

版权

以前没写过Blog，现在心血来潮想写一篇。呵呵，望大家不要笑话。希望高手能指点，菜鸟们与我一起交流共同进步，终有一天我们也能成为高手，哈哈。

----这是我的项目结构图

ExtJs是一个Ajax框架，我们能它做出很多丰富的效果，而且实现简单。这里我用Struts2 + JSON +ExtJs 的grid组件做了例子。

-------前台部分

首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
    {header:'编号',dataIndex:'id'},
    {header:'年龄',dataIndex:'age'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true}

Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

   var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

ds.load({params:{start:0,limit:10}});

ds对应两部分,proxy与render。proxy告诉我们从哪里得到数据，render告诉我们如何解析得到的数据。现在用的是Ext.data.HttpProxy，它将从向给定地址发送请求，并取得结果数据。Ext.data.JsonReader用来解析取得结果数据，每行按顺序读取四个数据，第一个叫id，第二个叫age，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。

记得要执行一次ds.load()，对数据进行初始化。这里给定两个参数，见名思意，这两个参数是用来进行后台排序的。

----grid.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<title>Struts2 Grid</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>

-----page.js

Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'年龄',dataIndex:'age'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'gridUtil.action'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'},{name:'age'}
])
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm,
title: 'struts2->JSON',
//height:400,
autoHeight: true,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
'-'
// new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
/* tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})*/
});
grid.render();
})

---后台部分

------struts.xml

<?xml version="1.0" encoding="GBK" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="example" extends="json-default" >
<action name="gridUtil" class="org.lee.GridUtil">
<result type="json" />
</action>
</package>
</struts>

第一个地方配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。

第二个地方是配置包，自己的包继承json-defalut包，而不再继承默认defalut包，这是因为只有在该包下才有json结果类型。一旦我们将某个逻辑视图名配成json类型，这将意味着该逻辑视图无须指定物理视图资源，因为json插件会将Action序列化后发送给客户端。

---User.java

package org.lee;
import java.util.List;
public class User {
private int id;
private String name;
private String age;
private String descn;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getDescn() {
return descn;
}
public void setDescn(String descn) {
this.descn = descn;
}
}

这里定义了一个User对像，当作数据载体。

---GridUtil.java

package org.lee;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.Action;
public class GridUtil implements Action{
private int totalProperty = 100;
private List root;
public List getRoot() {
return root;
}
public void setRoot(List root) {
this.root = root;
}
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public String execute(){
root = new ArrayList();
User user1 = new User();
user1.setAge("20");
user1.setDescn("descn1");
user1.setId(1);
user1.setName("name1");
root.add(user1);
User user2 = new User();
user2.setAge("19");
user2.setDescn("descn2");
user2.setId(2);
user2.setName("name2");
root.add(user2);
User user3 = new User();
user3.setAge("14");
user3.setDescn("descn3");
user3.setId(3);
user3.setName("name3");
root.add(user3);
return Action.SUCCESS;
}
}

定义了一个Action用于进行数据转化与返回。可以在这里进行与数据库交互，totalProperty是总记录数，root是所有数据库取出我值，它是一个List集合。

基本就这么多了，剩下的大家运行看看自己应该能理解。项目源文件由于附伯大小限制，我把ExtJs框架从项目里面移除。

转载于:https://blog.51cto.com/53899960/561566

weixin_33834679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs Grid + Struts2 + JSON

以前没写过Blog，现在心血来潮想写一篇。呵呵，望大家不要笑话。希望高手能指点，菜鸟们与我一起交流共同进步，终有一天我们也能成为高手，哈哈。----这是我的项目结构图 ExtJs是一个Ajax框架，我们能它做出很多丰富的效果，而且实现简单。这里我用Struts2 + JSON +ExtJs 的grid组件做了例子。-------前台部分首先，一...
复制链接

扫一扫