Struts2与ExtJs Grid结合使用json格式数据

最新推荐文章于 2018-09-27 20:43:10 发布

linbooooo1987

最新推荐文章于 2018-09-27 20:43:10 发布

阅读量5.7k

点赞数

分类专栏： struts2 ExtJS javascript 文章标签： struts json extjs user string header

本文链接：https://blog.csdn.net/linbooooo1987/article/details/7368555

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

struts2

11 篇文章 0 订阅

订阅专栏

ExtJS

3 篇文章 0 订阅

订阅专栏

1.引入struts2核心jar包，与jsonplugin-0.32.jar

2.配置struts.xml文件

<constant name="struts.i18n.encoding" value="utf-8"/>
<package name="example" namespace="/" extends="json-default">
        <action name="gridUtil" class="com.bict.GridUtil" method="grid"> 
            <result type="json" /> <!--将bean属性以json字符串返回浏览器-->
        </action> 
	<action name="gridAction" class="com.bict.util.ClientModel" method="getJSONPage">
	    <result name="success">/json_grid.jsp</result>
	</action>
</package>

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

3.后台部分User.java

package com.bict;
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对象，当作数据载体

4.gridUtil.java

package com.bict;

import java.util.ArrayList;
import java.util.List;
import com.bict.User;

import com.opensymphony.xwork2.ActionSupport;

public class GridUtil extends ActionSupport {
	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 grid() {
		root = new ArrayList<User>();
		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);

		return SUCCESS;

	}

}

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

5.json_grid.jsp,引入Ext-3.2.1相关配置

    <link href="ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
    <script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/json_grid.js"></script>
    <body>
       <div id="grid"></div>
    </body>

6.json_grid.js

Ext.onReady(function(){
    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'}
            ])
    });
    

    ds.load({params:{start:0,limit:10}});
    
    
     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: "没有记录" 
        })
    }); 
    grid.render(); 
})

linbooooo1987

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Struts2与ExtJs Grid结合使用json格式数据

1.引入struts2核心jar包，与jsonplugin-0.32.jar2.配置struts.xml文件 /json_grid.jsp 配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。
复制链接

扫一扫

专栏目录