日期:2014-05-16  浏览次数:20432 次

ExtJs 实现动态列,动态多表头 在这里添加日志标题

先看看效果

ExtJs 实现动态列,动态多表头 在这里添加日志标题 - dingtao-wgs - 程序员驿站

效果不错吧,就是样式稍微差点,没办法Extjs的表头是渐变的,不过样式改起来应该不难.

接下来是数据:

"{columModle:[{header:\"用电单位\",dataIndex:\"用电单位\"},

{header:\"2009-06 _度数\",dataIndex:\"2009-06 _度数\"},

{header:\"2009-06 _单价\",dataIndex:\"2009-06 _单价\"},

?{header:\"2009-06 _金额\",dataIndex:\"2009-06 _金额\"},

?{header:\"2009-07 _度数\",dataIndex:\"2009-07 _度数\"},

?{header:\"2009-07 _单价\",dataIndex:\"2009-07 _单价\"},

?{header:\"2009-07 _金额\",dataIndex:\"2009-07 _金额\"},

{header:\"2009-08 _度数\",dataIndex:\"2009-08 _度数\"},

{header:\"2009-08 _单价\",dataIndex:\"2009-08 _单价\"},

?{header:\"2009-08 _金额\",dataIndex:\"2009-08 _金额\"},

?{header:\"合计_度数\",dataIndex:\"合计_度数\"},

?{header:\"合计_金额\",dataIndex:\"合计_金额\"}],

?fieldsNames:[{name:\"用电单位\"},{name:\"2009-06 _度数\"},{name:\"2009-06 _单价\"},{name:\"2009-06 _金额\"},{name:\"2009-07 _度数\"},

{name:\"2009-07 _单价\"},{name:\"2009-07 _金额\"},{name:\"2009-08 _度数\"},{name:\"2009-08 _单价\"},{name:\"2009-08 _金额\"},

{name:\"合计_度数\"},{name:\"合计_金额\"}],

?data:[{\"用电单位\":\"1\",\"2009-06 _度数\":\"\",\"2009-06 _单价\":\"\",\"2009-06 _金额\":\"\",\"2009-07 _度数\":\"1.00\",\"2009-07 _单价\":\"2.00\",\"2009-07 _金额\":\"2.0000\",\"2009-08 _度数\":\"4.00\",\"2009-08 _单价\":\"2.00\",\"2009-08 _金额\":\"8.0000\",\"合计_度数\":\"5.00\",\"合计_金额\":\"10.0000\"}]}"

主要是红色的部分

然后是js:

? Ext.onReady(function() {
??????????? var conn = new Ext.data.Connection();
??????????? conn.request({ url: 'FuelCompany.ashx', callback: function(options, success, response) {
??????????????? var a = response.responseText;
??????????????? var json = new Ext.util.JSON.decode(a);
??????????????? var jsonrows = "[[";
??????????????? var rows = {};
??????????????? var _temp = [];
??????????????? for (var item in json.columModle) {
??????????????????? if (item >= 0) {
??????????????????????? var tempHeader = json.columModle[item].header
??????????????????????? if (tempHeader.split('_').length > 1) {
??????????????????????????? _temp.push(tempHeader.split('_')[0]);
??????????????????????????? json.columModle[item].header = tempHeader.split('_')[1];
??????????????????????? }
??????????????????????? else
??????????????????????????? _temp.push("");
??????????????????? }
??????????????? }
??????????????? var i = 1;
??????????????? for (var item in _temp) {
??????????????????? if (item >= 0) {
??????????????????????? if (_temp[item] != _temp[Number(item) + 1]) {
??????????????????????????? jsonrows += "{header:'" + _temp[item] + "',colspan:" + i.toString() + ",align:'center'},";
??????????????????????????? i = 1;
??????????????????????? }
??????????????????????? else
??????????????????????????? i++;
??????????????????? }
??????????????? }
??????????????? jsonrows = jsonrows.substring(0, jsonrows.length - 1);
??????????????? jsonrows += "]]";
??????????????? var cm = new Ext.grid.ColumnModel({
??????????????????? columns: json.columModle,
??????????????????? rows: new Ext.util.JSON.decode(jsonrows)
??????????????? });
??????????????? var ds = new Ext.d