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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
查看全文
  • 相关阅读:
    Lambda表达式、依赖倒置
    ASP.NET vNext 概述
    Uname
    RHEL4 i386下安装rdesktop【原创】
    Taxonomy of class loader problems encountered when using Jakarta Commons Logging(转)
    How to decompile class file in Java and Eclipse
    先有的资源,能看的速度看,不能看的,抽时间看。说不定那天就真的打不开了(转)
    Google App Engine 学习和实践
    【VBA研究】VBA通过HTTP协议实现邮件轨迹跟踪查询
    js正則表達式语法
  • 原文地址:https://www.cnblogs.com/maoan/p/2376077.html
  • Copyright © 2011-2022 走看看