说明:
之前在公司实习的时候,做了一个简单的涉及账务的管理系统,是用Struts2+Hibernate+ExtJS3.2开发的。由于每个月支出的日期是不一样的,所以Ext的表头必须是动态生成的,下面我将自己实现的动态表头和大家分享一下。
1、ExtJS代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 Ext.onReady(function() {
2 Ext.QuickTips.init();// 初始化
3 Ext.form.Field.prototype.msgTarget = 'side';
4
5 Ext.Ajax.request({
6 method:'post',
7 url:'report?type=make_grid',
8 async : false,
9 success:function(response, opts){
10
11 var limit=10;
12 var start=0;
13
14 var obj = Ext.decode(response.responseText);// obj储存响应的数据
15 var fieldDatas=(obj.columModle);
16 var fieldsNames=(obj.fieldsNames);
17 var cm = new Ext.grid.ColumnModel(fieldDatas);
18 var store = new Ext.data.JsonStore({
19 root : 'root',
20 totalProperty : 'totalCount',
21 url : 'report?type=report',
22 fields: fieldsNames
23 });
24
25 var grid = new Ext.grid.GridPanel({
26 title:'动态表头',
27 layout:'fit',
28 stripeRows : true, // 斑马线
29 selModel : new Ext.grid.RowSelectionModel({
30 singleSelect : true
31 }),// 只允许选中一行
32 loadMask : {
33 msg : '正在加载数据,请稍侯……'
34 },
35 iconCls : 'information',
36 trackMouseOver : true,
37 frame : true,
38 height:200,
39 autowidth:true,
40 region: 'center',
41 split: true,
42 border:false,
43 store:store,
44 viewConfig : {
45 forceFit : true
46 },
47 cm:cm,
48 bbar : new Ext.PagingToolbar({
49 pageSize : limit,
50 store : store,
51 displayInfo : true,// 显示分页按钮
52 displayMsg : '<font size=2>第 {0} 条到 {1} 条,一共 {2} 条记录</font>',
53 emptyMsg : '没有记录'
54 })
55 });
56
57 new Ext.Viewport({
58 layout:'fit',
59 items : grid
60 });
61 // -----装载数据
62 store.load({
63 params : {
64 start : start,
65 limit : limit
66 }
67 });
68 }
69 });
70 });
2、后台代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 if(this.getType().equals("make_grid")){
2
3 /**
4 * 取到上个月信息
5 */
6 String nowDate=DateUtil.format(new Date(), "yyyy-MM");
7
8 String lastTime="";
9 lastTime=getTime(nowDate);
10 //
11 StringBuffer sb=new StringBuffer();
12 //
13 sb.append("{'columModle':[");
14 sb.append("{'header': '用户名称','dataIndex': 'username'},");
15 sb.append("{'header': '上月节余','dataIndex': 'remainfare'},");
16 sb.append("{'header': '本月预交','dataIndex': 'shangjiao'},");
17 //活动平摊时间
18 ///
19 String fareInf="select distinct(uf.zhichutime) from Userfare uf where substring(uf.zhichutime,1,7)='"+lastTime+"' order by uf.zhichutime";
20 List<?> fareInfList=this.activityServiceImpl.query(fareInf);
21 if(fareInfList.size()>0){
22 for(int i=0;i<fareInfList.size();i++){
23 sb.append("{'header': '"+fareInfList.get(i).toString().substring(5,10)+"','dataIndex': '"+fareInfList.get(i).toString().substring(5,10)+"'},");
24 }
25 }
26 //
27 sb.append("{'header': '合计','dataIndex': 'total'},");
28 sb.append("{'header': '余额','dataIndex': 'monthMoney'},");
29 sb.append("{'header': '备注','dataIndex': 'remarks'}");
30 sb.append("],");
31 sb.append("'fieldsNames':[");
32 sb.append("{name:'uid'},");
33 sb.append("{name:'username'},");
34 sb.append("{name:'remainfare'},");
35 sb.append("{name:'shangjiao'},");
36 /
37 if(fareInfList.size()>0){
38 for(int i=0;i<fareInfList.size();i++){
39 sb.append("{'name': '"+fareInfList.get(i).toString().substring(5,10)+"'},");
40 }
41 }
42
43 sb.append("{name:'total'},");
44 sb.append("{name:'monthMoney'},");
45 sb.append("{name:'remarks'}");
46 sb.append("]}");
47 response.getWriter().write(sb.toString());
48 }
总结与一些问题:
总结:
我感觉这个是在所有动态生成表头中最简单的一种,应该还有更多的方法可以实现,只是由于技术和能力的问题,理解不太到位,希望各位网友能指导一下。谢谢。
问题:
Ajax异步传输的一些问题,不知能不能定义组件的时候能不能不要success方法里写,简单来说就是独立出来,我在解决的时候老是报出fields: fieldsNames中的fieldsNames为undefined,但是写到success的时候就不会。