动态添加datagrid列

xss511

felt 发表于 2014-7-23 11:23
应该可以的
把你写的方法贴出来

function createGrid() {
                    for(var i=0;i<months.length;i++){
                            var theMonth = months;
                            var        columns = [
                                                        { headerAlign: "center", allowSort: true, header: "现金预算执行情况",
                                                                columns:[
                                                                        {headerAlign: "center", allowSort: true, header: theMonth,columns:[
                                                                                {field: "bud_mon", width: 20, headerAlign: "center", allowSort: true, header: "预算"},
                                                                                {field: "pay_mon", width: 20, headerAlign: "center", allowSort: true, header: "执行"},   
                                                                                {field: "wcl", width: 20, headerAlign: "center", allowSort: true, header: "完成率"}
                                                                        ]}
                                                        ]   
                                                    
                                                }   
                                    ];
                            grid.addColumns(columns);
                    }
                grid.load();
            }
我改成这样可以显示，不过会替换之前的列，只显示最后一列

felt

xss511 发表于 2014-7-23 11:29
function createGrid() {
                    for(var i=0;i

setColumns就是重新设置表头，以前的就是替换掉的，你要加上就获取出原来的表头，然后在里面添加
var columns=grid.getColumns()
columns.push(....拼接的column加进去)
grid.setColumns(columns)

xss511

felt 发表于 2014-7-23 11:40
setColumns就是重新设置表头，以前的就是替换掉的，你要加上就获取出原来的表头，然后在里面添加
var col ...

这是我想要的效果      可是使用动态添加的话就成了这样   



代码如下：
function createGrid() {
                grid.set({
                    columns: [
                        { type: "indexcolumn" , width: 40, headerAlign: "center", allowSort: true,header:"行次"},
                        { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "项目编码"},
                        { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "年度预算"},
                        { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "月度现金预<br/>算合计"},
                        { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "实际支出合<br/>计"}
                        /* { headerAlign: "center", allowSort: true, header: "现金预算执行情况"
                                   columns:[
                                        
                                                                {headerAlign: "center", allowSort: true, header: "一月",columns:[
                                                                        {field: "bud_mon", width: 20, headerAlign: "center", allowSort: true, header: "预算"},
                                                                        {field: "pay_mon", width: 20, headerAlign: "center", allowSort: true, header: "执行"},   
                                                                        {field: "wcl", width: 20, headerAlign: "center", allowSort: true, header: "完成率"}
                                                                ]}
                                        
                                                ]
                            
                        } */
                    ]
                });
                    for(var i=0;i<months.length;i++){
                            var theMonth = months;
                            var theCol=grid.getColumns();
                            var        columns = [
                                                { headerAlign: "center", allowSort: true, header: "现金预算执行情况",
                                columns:[
                                                                {headerAlign: "center", allowSort: true, header: theMonth,columns:[
                                                                        {field: "bud_mon", width: 20, headerAlign: "center", allowSort: true, header: "预算"},
                                                                        {field: "pay_mon", width: 20, headerAlign: "center", allowSort: true, header: "执行"},   
                                                                        {field: "wcl", width: 20, headerAlign: "center", allowSort: true, header: "完成率"}
                                                                ]}
                                                        ]
                                }
                                ];
                            theCol.push(columns);
                            grid.setColumns(theCol);
                    }
                grid.load();
            }

felt

xss511 发表于 2014-7-23 12:55
这是我想要的效果      可是使用动态添加的话就成了这样   

1. function createGrid() {
   
2.                
   
3.                 var  columns=[
   
4.                         { type: "indexcolumn" , width: 40, headerAlign: "center", allowSort: true,header:"行次"},
   
5.                         { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "项目编码"},
   
6.                         { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "年度预算"},
   
7.                         { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "月度现金预<br/>算合计"},
   
8.                         { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "实际支出合<br/>计"}
   
9.                      ]
   
10.                 var months=[1,2,3,4]
    
11.                     for(var i=0;i<months.length;i++){
    
12.                             var theMonth = months[i];
    
13.                            
    
14.                             var column = { headerAlign: "center", allowSort: true, header: "现金预算执行情况",
    
15.                                                                  columns:[{headerAlign: "center", allowSort: true, header: theMonth,columns:[
    
16.                                                                                {field: "bud_mon", width: 20, headerAlign: "center", allowSort: true, header: "预算"},
    
17.                                                                               {field: "pay_mon", width: 20, headerAlign: "center", allowSort: true, header: "执行"},   
    
18.                                                                               {field: "wcl", width: 20, headerAlign: "center", allowSort: true, header: "完成率"}
    
19.                                   ]}
    
20.                                                                 ]
    
21.                                                    };
    
22.                                 
    
23.                             columns.push(column);
    
24.                            
    
25.                     }
    
26.                 grid.setColumns(columns)
    
27.             }

复制代码

注意数据格式

xss511

felt 发表于 2014-7-23 13:17
注意数据格式

现在可以显示了，最上一行的列头可以合并吗？

felt

xss511 发表于 2014-7-23 13:50
现在可以显示了，最上一行的列头可以合并吗？

你要合并成什么样，你表头数据生成的时候可以自己控制
就是拼接你需要的数组格式

xss511

felt 发表于 2014-7-23 14:10
你要合并成什么样，你表头数据生成的时候可以自己控制
就是拼接你需要的数组格式 ...

这是拼接后的样式
这个是想要的样式

就是“现金预算执行情况”这些列可不可以合并成一列

felt

xss511 发表于 2014-7-23 14:33
这是拼接后的样式
这个是想要的样式

这不就是你拼错的了吗

1. function createGrid() {      
   
2.     var columns=[
   
3.             { type: "indexcolumn" , width: 40, headerAlign: "center", allowSort: true,header:"行次"},
   
4.             { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "项目编码"},
   
5.             { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "年度预算"},
   
6.             { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "月度现金预<br/>算合计"},
   
7.             { field: "p_code", width: 80, headerAlign: "center", allowSort: true, header: "实际支出合<br/>计"},
   
8.             { headerAlign: "center", allowSort: true, header: "现金预算执行情况",columns:[]}
   
9.          ]         
   
10.     var months=[1,2,3,4]
    
11.     for(var i=0;i<months.length;i++){
    
12.         var theMonth = months[i];
    
13.         var newColumns= {headerAlign: "center", allowSort: true, header: theMonth,columns:[
    
14.                             {field: "bud_mon", width: 20, headerAlign: "center", allowSort: true, header: "预算"},
    
15.                             {field: "pay_mon", width: 20, headerAlign: "center", allowSort: true, header: "执行"},   
    
16.                             {field: "wcl", width: 20, headerAlign: "center", allowSort: true, header: "完成率"}
    
17.                         ]}
    
18.        columns[5].columns.push(newColumns);
    
19.    }
    
20.       
    
21.     grid.setColumns(columns)
    
22. }

复制代码

xss511

felt 发表于 2014-7-23 14:36
这不就是你拼错的了吗

可以了，麻烦你了，谢谢