ExtJs的Grid组件配合struts2返回json数据
来源:互联网 发布:马伟明 吹牛 知乎 编辑:程序博客网 时间:2024/04/29 21:06
第一次使用extjs的grid组件,简单做了一个分页条。主要目地是把数据库中的数据呈现到前端的grid中。过程记录如下
首先是JSP页面代码:
<div id="grid" style="width:400px;height:300px"></div>
然后是JS代码:
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号', dataIndex:'id', width:250},
{header:'名字', dataIndex:'name'},
{header:'年纪', dataIndex:'age'},
{header:'地址', dataIndex:'address'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: path + '/index_query.action'}),
reader: new Ext.data.JsonReader({
totalProperty: "total",
root: "rows"
},[
{name:'id'},
{name:'name'},
{name:'age'},
{name:'address'}
])
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid', // 渲染到id=grid在div
autoHeight: true,
store: store,
cm: cm,
width: 600,
height: 300,
frame: true,
forceFit: true,
stripeRows: true,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: "显示{0}条到{1}条记录,一共{1}条记录",
emptyMsg: "没有记录"
})
});
// 如果配置了分页工具条,store.load()就必须在构造表格以后执行,否则分页工具条不起作用
store.load({params:{start:0, limit:10}});
});
Action中的代码:
public class IndexAction extends BaseAction<Person> {
private static final long serialVersionUID = 6187270463225630432L;
@Resource
private PersonService personService; // 用到了spring框架
ExtGrid<Person> extGrid = new ExtGrid<Person>(); // 这里的ExtGrid只是一个简单的javaBean对象
public ExtGrid<Person> getExtGrid() {
return extGrid;
}
public void setExtGrid(ExtGrid<Person> extGrid) {
this.extGrid = extGrid;
}
// limit 10
// start 0
private Integer start;
private Integer limit;
public void setStart(Integer start) {
this.start = start;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
public String query() {
System.out.println("start = " + start);
System.out.println("limit = " + limit);
List<Person> list = personService.findAll();
extGrid.setRows(list);// 设置数据
extGrid.setTotal(list.size()); // 设置总数
return SUCCESS; // 这里要返回String , 如果方法是void的话,界面没数据返回
}
}
struts.xml文件的配置(重点是返回JSON的配置)
<struts>
<package name="json" namespace="/" extends="json-default">
<action name="index_*" class="indexAction" method="{1}">
<result type="json">
<!-- 这里指定将被Struts2序列化的属性,该属性在action中必须有对应的getter方法 -->
<param name="root">extGrid</param>
</result>
</action>
</package>
最终效果如下:
经过查询了很多资料,才总结出这个做法。先记录下来,以后再慢慢改进。。。
- ExtJs的Grid组件配合struts2返回json数据
- struts2 返回json数据(结合Extjs)
- struts2 返回json数据(结合Extjs)
- Struts2与ExtJs Grid结合使用json格式数据
- EXTjs grid与json数据
- EXTjs grid与json数据
- Extjs与Struts2交互,返回JSON数据的两种实现方式
- Extjs与Struts2交互,返回JSON数据的两种实现方式
- struts2拦截器如何返回json数据?如何使用Jquery(ExtJs)接收拦截器返回的数据?
- ExtJs与JSON格式数据绑定的方法(grid)
- Extjs中grid采用json进行数据绑定的实例
- ExtJs:grid中json的数据绑定(转)
- Extjs grid的store数据转成json数组
- Asp.net返回json数据(配合easyui的使用)
- struts2 返回json数据
- Struts2返回JSON数据
- Struts2返回JSON数据
- struts2返回json数据
- 三维数组求深度的平均值问题
- Method Swizzling 和 AOP 实践
- java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()
- 安卓基础(七)
- Leetcode NO.88 Merge Sorted Array
- ExtJs的Grid组件配合struts2返回json数据
- MYSQL存储过程的语法
- 生成随机数
- 整理IOS开发、Mac开发好的中文博客
- Bitmap 不能序列化
- 绘制表格——蓝桥杯2011年Java预赛
- 技术流派创业的几种常用模式
- android 去除SpannableString下划线
- 公交