Extjs动态生成grid

最新推荐文章于 2017-12-06 13:14:59 发布

玉&心

最新推荐文章于 2017-12-06 13:14:59 发布

阅读量215

点赞数 1

分类专栏： EXTJS JAVA 文章标签： JAVA EXTJS

本文链接：https://blog.csdn.net/XinhuaShuDiao/article/details/84714083

版权

JAVA 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

EXTJS

7 篇文章 0 订阅

订阅专栏

在Extjs中生成表格的页面数据是Extjs提供的强大功能。在这里主要是做了一个简单的从后台通过structs2获取数据显示在页面的示例。json数据在后台是通过fastjson.jar封装的。

java代码:

Bo类：

package com.test.bo;

import java.util.List;

public class GridBo {
private int totalProperty;
private String id;
private String name;
private List root;
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List getRoot() {
return root;
}
public void setRoot(List root) {
this.root = root;
}
}

action类：

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSONObject;
import com.test.bo.GridBo;

public void grid(){

//获取当前的起始行
int start = Integer.parseInt(ServletActionContext.getRequest().getParameter("start"));

//获取每页的显示行数
int limit = Integer.parseInt(ServletActionContext.getRequest().getParameter("limit"));
GridBo grid = new GridBo();
grid.setTotalProperty(100);
List list = new ArrayList();
String root = "";
for(int i = start;i < start+limit;i++){
Map obj=new HashMap();
obj.put("id", i);
obj.put("name", "name"+i);
list.add(obj);
}
grid.setRoot(list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(grid).toString());
} catch (IOException e) {
e.printStackTrace();
}
}

}

jsp页面：

<html>
<head>
<script type="text/javascript"></script>
<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/grid1.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
<script type="text/javascript">

</script>
</head>

<body>
<div id="container">
<div id="grid"></div>
</div>
</body>
</html>
js页面：

Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:50,sortable:true},
{header:'名称',dataIndex:'name',width:100,sortable:true}
]);
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'function_grid.action'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root',
fields:[
{name:'id'},
{name:'name'}
]})
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoWidth:true,
autoHeight:true,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true,
enableRowBody:true,
columnsText:'显示的列',
sortAscText:'升序',
sortDescText:'降序',
scrollOffset:1
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
store.load({params:{start:0,limit:10}});
});

效果图如下:
[img]http://e.hiphotos.bdimg.com/album/pic/item/0824ab18972bd407410d8a617a899e510eb30967.jpg[/img]

玉&心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs动态生成grid

在Extjs中生成表格的页面数据是Extjs提供的强大功能。在这里主要是做了一个简单的从后台通过structs2获取数据显示在页面的示例。json数据在后台是通过fastjson.jar封装的。 java代码: Bo类： package com.test.bo;import java.util.List;public class GridBo...
复制链接

扫一扫

专栏目录