extjs4动态生成多表头
来源：互联网 发布：信达证券交易软件 编辑：程序博客网 时间：2024/06/07 04:01
通过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.onAddClick104 }, {105 iconCls: 'icon-delete',106 icon: '../Scripts/img/delete.gif',107 text: '减行',108 disabled: true,109 itemId: 'delete',110 scope: this,111 handler: this.onDeleteClick112 }]113 }],114 columns: forminfo.columns115 });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: 0143 }),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: 0151 });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'} ] }
0 0
- extjs4动态生成多表头
- UltraWebGrid动态生成多表头
- 使用POI生成动态多行表头
- easyui 表头动态生成
- Extjs动态生成表头
- easyui 表头动态生成
- bootstrapTable 动态表头生成
- ExtJS4学习--多表头Grid
- gridview动态生成表头、合并表头
- Flex中动态生成表头
- flex复杂表头动态生成
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(六)---多表头Grid
- extjs4 数据库读取数据动态生成表单
- PAIP.从DATATABLE动态生成表头
- Siverlight 动态生成datagrid复杂表头
- Flex中动态生成DataGrid以及动态生成表头
- EXTJS4.2 前台导出多表头grid（曲线救国版）
- 【cocos2d-x】cocoStdio帧事件
- 百度大更新 搜索结果视觉体验大改观
- C语言单向链表的实现(转载)
- C语言 rand()函数和srand()函数
- man技巧
- extjs4动态生成多表头
- Delphi TMS TTreelist的用法
- pjsip： 修改SDP的属性
- 移动开发之浅析cocos2d-x的中文支持问题
- pjsip 视频部分学习思路
- android中listview的一些样式设置
- HTMLParser使用详解
- 网络电子采购系统的一些介绍
- ONE源代码分析——movement4之BusMovement
