zoukankan      html  css  js  c++  java
  • Extjs动态生成表头(适用报表)

    说明:

      之前在公司实习的时候,做了一个简单的涉及账务的管理系统,是用Struts2+Hibernate+ExtJS3.2开发的。由于每个月支出的日期是不一样的,所以Ext的表头必须是动态生成的,下面我将自己实现的动态表头和大家分享一下。

     

      1、ExtJS代码  

     

    View Code
     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 autotrue,
    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、后台代码

     

    View Code
     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的时候就不会。



  • 作者: swyma
    出处: http://www.cnblogs.com/maoan/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
查看全文
  • 相关阅读:
    asp.NET中,密码输入框一刷新后输入的密码就清空,但刷新后保留刷新前输入的密码怎么做?
    js 调用C#.NET后台方法 转载自:http://www.cnblogs.com/lizhao/archive/2010/11/23/1990436.html
    Oracle Class8. 子程序和程序包 全新时代
    Oracle Class6. PL/SQL 简介(数据类型,逻辑比较,控制结构,错误处理) 全新时代
    Oracle Class5. Oracle 中的 OOP 概念(ordbms与rdbms比较,oracle中的对象) 全新时代
    Oracle Class4. 数据库对象(同义词,序列,视图,索引,簇) 全新时代
    Oracle Class9. 数据库触发器和内置程序包 全新时代
    Oracle Class61. PL/SQL 简介(数据类型,逻辑比较,控制结构,错误处理) 全新时代
    Oracle Class3. 锁和表分区 全新时代
    Oracle Class2. SQL查询和SQL函数(Oracle数据类型,ddl,dml,dcl,事务控制语言tcl,sql操作符,sql函数,select语句,运算符,分析函数,临时表) 全新时代
  • 原文地址:https://www.cnblogs.com/maoan/p/2376077.html
  • Copyright © 2011-2022 走看看