extjs4动态生成多表头

通过json生成表头

效果图:

复制代码
  1 Ext.onReady(function () {
  2     //header也就是你应该从后台取回的表头数据,现在写死在了这里
  3     //var grid;
  4     Ext.Ajax.request({
  5         params: {
  6             parafdno: '',
  7             parafcy: '',
  8             pararepnum: ''
  9         }, //发送的参数
 10         url: "../BLL/H_yus/H_pinpdpfyysBLL.ashx?action=tlist", //请求的地址
 11         success: function (response, option) {
 12             //alert("rsptest:" + response.responseText);
 13             var forminfo = Ext.decode(response.responseText);
 14             //var forminfo = [{ name: 'company', header: 'Company' }, { name: 'price', header: 'Price' }, { name: 'change', header: 'change'}]
 15             Ext.define('model', {
 16                 extend: 'Ext.data.Model',
 17                 fields: forminfo.fields,
 18                 validations: [{//满足该条件才会提交
 19                     type: 'length',
 20                     field: 'bennfpxse',
 21                     min: 1
 22                 }]
 23             });
 24             var store = Ext.create('Ext.data.Store', {
 25                 //autoDestroy: true,
 26                 autoLoad: false,
 27                 autoSync: true,
 28                 model: 'model',
 29                 proxy: {
 30                     type: 'ajax',
 31                     //url: 'H_cuxfaBLL.ashx?action=list',
 32                     api: {
 33                         read: '../BLL/H_yus/H_pinprwfjBLL.ashx?action=read',
 34                         create: '../BLL/H_yus/H_pinprwfjBLL.ashx?action=create',
 35                         update: '../BLL/H_yus/H_pinprwfjBLL.ashx?action=update',
 36                         destroy: '../BLL/H_yus/H_pinprwfjBLL.ashx?action=destory'
 37                     },
 38                     extraParams: {
 39                         'parafcy': '',
 40                         'parafdno': '',
 41                         'pararepnum': ''
 42                     },
 43                     reader: {
 44                         type: 'json',
 45                         successProperty: 'success', //判断是否成功时的返回标题
 46                         root: 'items', //根目录
 47                         messageProperty: 'Msg'//返回的错误信息等其他信息的标题
 48                     },
 49                     writer: {
 50                         type: 'json',
 51                         //writeAllFields: false,
 52                         encode: true,
 53                         root: 'items', //将提交行的数据易json格式传递到后台
 54                         allowSingle: false
 55                     },
 56                     listeners: {
 57                         exception: function (proxy, response, operation) {
 58                             Ext.MessageBox.show({
 59                                 title: 'REMOTE EXCEPTION',
 60                                 msg: operation.getError(),
 61                                 icon: Ext.MessageBox.ERROR,
 62                                 buttons: Ext.Msg.OK
 63                             });
 64                         }
 65                     }
 66                 }
 67             });
 68             //alert(forminfo.columns);
 69             var columns = [];
 70             var coms = [];
 71             Ext.each(forminfo.columns, function (s) {
 72                 //alert(s);
 73                 coms.push({
 74                     header: s.header,
 75                     dataIndex: s.name
 76                 });
 77             });
 78             Ext.define('grid', {
 79                 extend: 'Ext.grid.Panel',
 80                 store: store,
 81                 alias: 'widget.writergrid',
 82                 height: 300,
 83                 requires: ['Ext.grid.plugin.CellEditing', 'Ext.form.field.Text', 'Ext.toolbar.TextItem'],
 84 
 85                 initComponent: function () {
 86 
 87                     this.editing = Ext.create('Ext.grid.plugin.CellEditing');
 88 
 89                     Ext.apply(this, {
 90                         iconCls: 'icon-grid',
 91                         frame: true,
 92                         defaultType: 'textfield',
 93                         viewConfig: { loadMask: new Ext.LoadMask(this, { msg: '正在加载数据...' }) },
 94                         plugins: [this.editing],
 95                         dockedItems: [{
 96                             xtype: 'toolbar',
 97                             items: [{
 98                                 iconCls: 'icon-add',
 99                                 icon: '../Scripts/img/add.gif',
100                                 text: '加行',
101                                 disabled: false,
102                                 scope: this,
103                                 handler: this.onAddClick
104                             }, {
105                                 iconCls: 'icon-delete',
106                                 icon: '../Scripts/img/delete.gif',
107                                 text: '减行',
108                                 disabled: true,
109                                 itemId: 'delete',
110                                 scope: this,
111                                 handler: this.onDeleteClick
112                             }]
113                         }],
114                         columns: forminfo.columns
115                     });
116                     this.callParent();
117                     this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
118                 },
119 
120                 onSelectChange: function (selModel, selections) {
121                     this.down('#delete').setDisabled(selections.length === 0);
122                     selections = this.getView().getSelectionModel().getSelection()[0];
123                 },
124 
125                 onSync: function () {
126                     this.store.sync();
127                 },
128 
129                 onDeleteClick: function () {
130                     var selection = this.getView().getSelectionModel().getSelection()[0];
131                     if (selection) {
132                         this.store.remove(selection);
133                     }
134                 },
135 
136                 onAddClick: function () {
137                     var rec = new model({
138                         shangpbm: '',
139                         shangpmc: '',
140                         guig: '',
141                         fenl: 0,
142                         fenlnew: 0
143                     }),
144                      edit = this.editing;
145                     //this.store.reload();
146                     edit.cancelEdit();
147                     this.store.insert(0, rec);
148                     edit.startEditByPosition({
149                         row: 0,
150                         column: 0
151                     });
152                     //alert(rec);
153                 }
154 
155             });
156 
157             initform();
158             //grid.render('form-ct');
159         }
160     });
161 
162 });
复制代码

传过来的json格式

复制代码
{
  "columns ": [
    {
      "dataIndex ": "shangpbm ",
      "header ": "商品编码 ",
      "field ": {
        "xtype ": "textfield "
      }
    },
    {
      "dataIndex ": "shangpmc ",
      "header ": "商品名称 ",
      "align ": "center ",
      "field ": {
        "xtype ": "textfield "
      }
    },
    {
      "text ": "02-02品牌部费用-人员费用 ",
      "columns ": [
        {
          "dataIndex ": "02020004 ",
          "header ": "品牌人员工资 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "02020005 ",
          "header ": "品牌人员费用 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "02020006 ",
          "header ": "后勤人员费用 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "02020039 ",
          "header ": "品牌人员招待费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        }
      ]
    },
    {
      "text ": "02-03品牌部费用-预留费用 ",
      "columns ": [
        {
          "dataIndex ": "02030007 ",
          "header ": "预留费用1 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "02030008 ",
          "header ": "预留费用2 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        }
      ]
    },
    {
      "text ": "03-04销售部费用-管理费用 ",
      "columns ": [
        {
          "dataIndex ": "03040009 ",
          "header ": "管理人员工资 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040010 ",
          "header ": "管理人员绩效奖金 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040011 ",
          "header ": "管理人员住宿费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040012 ",
          "header ": "管理人员通讯费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040013 ",
          "header ": "管理人员汽车费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040014 ",
          "header ": "管理人员差旅费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040015 ",
          "header ": "业务人员工资 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040016 ",
          "header ": "业务人员绩效奖金 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040017 ",
          "header ": "业务人员住宿费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040018 ",
          "header ": "业务人员通讯费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040019 ",
          "header ": "业务人员汽车费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040020 ",
          "header ": "业务人员差旅费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040021 ",
          "header ": "促销人员工资 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040022 ",
          "header ": "促销人员奖金提成 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040023 ",
          "header ": "业务招待费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040024 ",
          "header ": "业务用酒费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040025 ",
          "header ": "办公费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03040038 ",
          "header ": "办公租赁费 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        }
      ]
    },
    {
      "text ": "03-05销售部费用-市场费用 ",
      "columns ": [
        {
          "dataIndex ": "03050026 ",
          "header ": "终端补助 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050027 ",
          "header ": "终端包装 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050028 ",
          "header ": "终端促销 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050029 ",
          "header ": "终端促销品 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050030 ",
          "header ": "终端拉动 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050031 ",
          "header ": "销售返利1 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050032 ",
          "header ": "销售返利2 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050033 ",
          "header ": "流通促销 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050034 ",
          "header ": "流通促销品 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050035 ",
          "header ": "流通包装 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050036 ",
          "header ": "商超费用 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        },
        {
          "dataIndex ": "03050037 ",
          "header ": "商超促销 ",
          "field ": {
            "xtype ": "numberfield ",
            "minValue ": "0 "
          }
        }
      ]
    }
  ],
  "fields ": [
    {
      "name ": "shangpbm "
    },
    {
      "name ": "shangpmc "
    },
    {
      "name ": "02020004 "
    },
    {
      "name ": "02020005 "
    },
    {
      "name ": "02020006 "
    },
    {
      "name ": "02020039 "
    },
    {
      "name ": "02030007 "
    },
    {
      "name ": "02030008 "
    },
    {
      "name ": "03040009 "
    },
    {
      "name ": "03040010 "
    },
    {
      "name ": "03040011 "
    },
    {
      "name ": "03040012 "
    },
    {
      "name ": "03040013 "
    },
    {
      "name ": "03040014 "
    },
    {
      "name ": "03040015 "
    },
    {
      "name ": "03040016 "
    },
    {
      "name ": "03040017 "
    },
    {
      "name ": "03040018 "
    },
    {
      "name ": "03040019 "
    },
    {
      "name ": "03040020 "
    },
    {
      "name ": "03040021 "
    },
    {
      "name ": "03040022 "
    },
    {
      "name ": "03040023 "
    },
    {
      "name ": "03040024 "
    },
    {
      "name ": "03040025 "
    },
    {
      "name ": "03040038 "
    },
    {
      "name ": "03050026 "
    },
    {
      "name ": "03050027 "
    },
    {
      "name ": "03050028 "
    },
    {
      "name ": "03050029 "
    },
    {
      "name ": "03050030 "
    },
    {
      "name ": "03050031 "
    },
    {
      "name ": "03050032 "
    },
    {
      "name ": "03050033 "
    },
    {
      "name ": "03050034 "
    },
    {
      "name ": "03050035 "
    },
    {
      "name ": "03050036 "
    },
    {
      "name ": "03050037 "
    }
  ]
}
复制代码

附加个json.net的写法

复制代码
        JObject jo = new JObject{
            new JProperty("columns",new JArray(
                new JObject{
                    new JProperty("dataIndex","shangpbm"),
                    new JProperty("header","商品编码"),
                    new JProperty("field",new JObject{
                        new JProperty("xtype","textfield")
                    })
                },
                new JObject{
                    new JProperty("dataIndex","shangpmc"),
                    new JProperty("header","商品名称"),
                    //new JProperty("width","320"),
                    new JProperty("align","center"),
                    new JProperty("field",new JObject{
                        new JProperty("xtype","textfield")
                    })
                },
                from p in dth.AsEnumerable()
                select new JObject{
                    new JProperty("text",p["A1"].ToString()+p["A2"].ToString()),
                    new JProperty("columns",new JArray(
                        from q in dt.AsEnumerable()
                        where q["A1"].ToString()==p["A1"].ToString()
                        select new JObject{
                            new JProperty("dataIndex",q["ZACCTYP_0"]),
                            new JProperty("header",q["ZACCDES_0"]),
                            new JProperty("field",new JObject{
                                new JProperty("xtype","numberfield"),
                                new JProperty("minValue","0")
                            })
                        }
                        )
                    )
                }
            )),
            new JProperty("fields",new JArray(
                new JObject{
                    new JProperty("name","shangpbm")
                },
                new JObject{
                    new JProperty("name","shangpmc")
                },
                from q in dt.AsEnumerable()
                select new JObject{
                    new JProperty("name",q["ZACCTYP_0"])
                }
            ))
        };
复制代码

 

还有一个看到的似乎也异曲同工

http://blog.csdn.net/myairen1365/article/details/8197977

复制代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>动态生成表格</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <link rel="stylesheet" type="text/css"
            href="ext4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext4/bootstrap.js"></script>
        <script type="text/javascript" src="ext4/ext-all.js"></script>
        <script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>

        <script type="text/javascript">
    Ext.onReady(function() {

        var json_f;
        Ext.Ajax.request({//store对象在创建时需要制定fields属性,因此使用ajax首先从后台获得列名
            url : 'json/testUser!testPage.action', //从action返回的response中读取数据,也可以从其他地方获取数据 
            method : 'POST',
            async : false,
            success : function(response) {
                //将返回的结果转换为json对象,注意extjs4中decode函数已经变成了:Ext.JSON.decode

                s = response.responseText;
                json_f = Ext.JSON.decode(response.responseText); //获得后台传递json 

            }
        });
        var thePageSize = 5;

        //JSON数据源,此处创建了带有分页功能的store数据源
        var humresStore = Ext.create('Ext.data.Store', {
            pageSize : thePageSize,
            fields : json_f.fields,//根据上面的ajax从后台action动态获得

            proxy : {
                type : 'ajax',
                url : 'json/testUser!testPage.action',//获取数据的url
                method : 'POST',
                reader : {
                    type : 'json',
                    root : 'data',
                    totalProperty : 'totalRecord'//json数据,表示分页数据总数
                }
            },

            sorters : [ {
                property : 'id',
                direction : 'DESC'
            } ]
        });

        humresStore.load({
            params : {
                start : 0,
                limit : thePageSize
            }
        });

        //创建表格,可以加入更多的属性。
        Ext.create("Ext.grid.Panel", {
            title : '动态表格~~~~~~~~~~~',
            width : 400,
            height : 300,
            id : 'configGrid',
            name : 'configGrid',
            columns : [], //注意此行代码,至关重要
            displayInfo : true,
            emptyMsg : "没有数据显示",
            renderTo : 'grid',//渲染到页面
            forceFit : true,
            dockedItems : [ {
                xtype : 'pagingtoolbar',
                store : humresStore,
                dock : 'bottom',
                displayInfo : true,
                //displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',
                emptyMsg : "没有记录!"
            } ]
        });

        //通过ajax获取表头以及表格数据
        Ext.Ajax
                .request({
                    url : 'json/testUser!testPage.action', //从json文件中读取数据,也可以从其他地方获取数据 
                    method : 'POST',
                    success : function(response) {
                        //将返回的结果转换为json对象,注意extjs4中decode函数已经变成了:Ext.JSON.decode
                        
                        var json = Ext.JSON.decode(response.responseText); //获得后台传递json
                        
                        //根据store和column构造表格
                        Ext.getCmp("configGrid").reconfigure(humresStore,
                                json.columns);
                        
                    }
                });

    })
</script>
    </head>

    <body>
        <!-- 将表格渲染在此处 -->
        <div id="grid"></div>
    </body>
</html>
复制代码

还一个本来打算弄不出来的时候试试,后来没用着

http://253405050.iteye.com/blog/1330734

1.创建DynamicGrid.js

复制代码
Ext.define('Ext.grid.DynamicGrid',{
    extend : 'Ext.grid.Panel',
    
    alias : 'widget.dynamicgrid',
    
    initComponent : function() {
        var me = this;

        var store = Ext.create('Ext.data.JsonStore', {
            fields: [],
            pageSize: 5,
            proxy: {
                type: 'ajax',
                url : 'data.js',
                reader: {
                    type: 'json',
                    root: 'recordList',
                    totalProperty : 'recordCount'
                }
            }
        });
        
        var headerCtCfg = {
            items: [],
            border: me.border
        };
        
        me.columns = headerCtCfg.items;
        
        me.headerCt = Ext.create('Ext.grid.header.Container', headerCtCfg);

        this.bindStore(store);
        this.bbar.bindStore(this.store, true);
        
        this.callParent();
    },
    
    onRender: function(ct, position) {
        this.store.on('load', function(store, records) {
            var jsonData = store.proxy.reader.jsonData;
            
            if (typeof(jsonData.columns) === 'object') {
                var columns = [];
                
                if (this.rowNumberer) {
                    columns.push(new Ext.grid.RowNumberer());
                }
                
                if (this.checkboxSelModel) {
                    this.selModel = new Ext.selection.CheckboxModel();
                }
                
                Ext.each(jsonData.columns, function(column) {
                    columns.push(column);
                });
                
                var store = Ext.create('Ext.data.Store', {
                    fields : jsonData.fields,
                    data : jsonData.recordList
                });
                
                this.reconfigure(store, columns);
                this.render();
            }
        }, this);
        
        this.store.load();
        
        Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);
    }
});
复制代码

2.创建grid

复制代码
var dynamicGrid = Ext.create('Ext.grid.DynamicGrid', {
        title: '测试动态列',
        renderTo: 'dynamic-grid',
        storeUrl: 'data.json',
        width : 600,
        height: 300,
        store: store,
        rowNumberer: true,
        checkboxSelModel: false,
        bodyStyle: 'padding-top: 22px',    //不知道什么原因,列头会把第一行给覆盖,所以需要加上这个样式
        bbar : new Ext.PagingToolbar({
            store: store,
            pageSize: 5,
            displayInfo: true,
            displayMsg: '显示第{0}到{1}条数据,共{2}条',
            emptyMsg: "没有数据",
            beforePageText: "第",
            afterPageText: '页 共{0}页'
        })  
    });
复制代码

返回的数据格式:

复制代码
{  
    'fields': [  
        {'name': 'id', 'type': 'int'},  
        {'name': 'name', 'type': 'string'},  
        {'name': 'sex', 'type': 'boolean'}
    ],
    'success': true,  
    'recordCount': 50,  
    'recordList': [  
        {'id': '1', 'name': 'AAA', sex: 1},  
        {'id': '2', 'name': 'BBB', sex: 1},  
        {'id': '3', 'name': 'CCC', sex: 0},  
        {'id': '4', 'name': 'DDD', sex: 1},  
        {'id': '5', 'name': 'EEE', sex: 1}
    ],  
    'columns': [  
        {'header': 'ID', 'dataIndex': 'id'},  
        {'header': 'User', 'dataIndex': 'name'},  
        {'header': 'SEX', 'dataIndex': 'sex'}
    ]  
}
复制代码

你可能感兴趣的:(extjs4)