ExtJs 实现动态列,动态多表头

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16:  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\"}]}"

1:  Ext.onReady(function() {

2:          var conn = new Ext.data.Connection();

3:          conn.request({ url: '/Power/PowerStatList', callback: function(options, success, response) {

4:              var a = response.responseText;

5:              var json = new Ext.util.JSON.decode(eval(a));

6:              var jsonrows = "[[";

7:              var rows = {};

8:              var _temp = [];

9:              for (var item in json.columModle) {

10:                  if (item >= 0) {

11:                      var tempHeader = json.columModle[item].header

12:                      if (tempHeader.split('_').length > 1) {

13:                          _temp.push(tempHeader.split('_')[0]);

14:                          json.columModle[item].header = tempHeader.split('_')[1];

15:                      }

16:                      else

17:                          _temp.push("");

18:                  }

19:              }

20:              var i = 1;

21:              for (var item in _temp) {

22:                  if (item >= 0) {

23:                      if (_temp[item] != _temp[Number(item) + 1]) {

24:                          jsonrows += "{header:'" + _temp[item] + "',colspan:" + i + ",align:'center'},";

25:                          i = 1;

26:                      }

27:                      else {

28:                          i++;

29:                      }

30:                  }

31:              }

32:              jsonrows = jsonrows.substring(0, jsonrows.length - 1);

33:              jsonrows += "]]";

34:              var cm = new Ext.grid.ColumnModel({ columns: json.columModle,

35:                  rows: new Ext.util.JSON.decode(jsonrows)

36:              });

37:              var ds = new Ext.data.JsonStore({

38:                  data: json.data,

39:                  fields: json.fieldsNames

40:              });

41:              var grid = new Ext.grid.EditorGridPanel({

42:                  height: 400,

43:                  region: 'center',

44:                  split: true,

45:                  border: false,

46:                  store: ds,

47:                  plugins: [new Ext.ux.plugins.GroupHeaderGrid()],

48:                  cm: cm

49:              });

50:              grid.render('grid-example');

51:          }

52:          });

53:      });