jQuery MiniUI

标题: 动态添加datagrid列 [打印本页]
作者: xss511    时间: 2014-7-23 09:28:56     标题: 动态添加datagrid列

一个查询页面，根据所选的时间去查询数据，然后根据所选的时间间隔，动态的加载列，请问有没有什么办法去循环加载这些数据？[attach]4870[/attach]
作者: dforce    时间: 2014-7-23 09:39:52

可以拼接出columns数据
然后grid.setColumns(columns)生成表头
作者: xss511    时间: 2014-7-23 09:50:13

dforce 发表于 2014-7-23 09:39
可以拼接出columns数据
然后grid.setColumns(columns)生成表头

可以详细一点吗，或者有没有demo可以借鉴的？
作者: dforce    时间: 2014-7-23 09:58:10

xss511 发表于 2014-7-23 09:50
可以详细一点吗，或者有没有demo可以借鉴的？

http://www.miniui.com/demo/#src=datagrid/setcolumns.html
类似这个，你自己拼接columns数据
作者: xss511    时间: 2014-7-23 10:12:03

dforce 发表于 2014-7-23 09:58
http://www.miniui.com/demo/#src=datagrid/setcolumns.html
类似这个，你自己拼接columns数据 ...

好的，谢谢
作者: xss511    时间: 2014-7-23 10:37:26

xss511 发表于 2014-7-23 10:12
好的，谢谢

还有一个问题，我可以在拼接的columns里面使用循环吗？如果可以的话，是怎么使用的。麻烦了。
作者: xss511    时间: 2014-7-23 10:38:32

dforce 发表于 2014-7-23 09:58
http://www.miniui.com/demo/#src=datagrid/setcolumns.html
类似这个，你自己拼接columns数据 ...

我可以在拼接的columns里面使用for循环吗，可以的话要怎么使用？
作者: dforce    时间: 2014-7-23 10:53:09

xss511 发表于 2014-7-23 10:38
我可以在拼接的columns里面使用for循环吗，可以的话要怎么使用？

在外面循环生成columns数组
调用grid.setColumns(columns)就行了
作者: xss511    时间: 2014-7-23 11:09:20

dforce 发表于 2014-7-23 10:53
在外面循环生成columns数组
调用grid.setColumns(columns)就行了

如图写的循环，然后使用grid.setColumns(columns);进行设置，可以没有效果，请问哪里写错了吗？
作者: felt    时间: 2014-7-23 11:23:14

xss511 发表于 2014-7-23 11:09
如图写的循环，然后使用grid.setColumns(columns);进行设置，可以没有效果，请问哪里写错了吗？
...

应该可以的
把你写的方法贴出来
作者: xss511    时间: 2014-7-23 11:29:13

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    时间: 2014-7-23 11:40:27

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    时间: 2014-7-23 12:55:24

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

这是我想要的效果     [attach]4875[/attach] 可是使用动态添加的话就成了这样    [attach]4876[/attach]



代码如下：
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    时间: 2014-7-23 13:17:48

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    时间: 2014-7-23 13:50:27

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

现在可以显示了，最上一行的列头可以合并吗？
作者: felt    时间: 2014-7-23 14:10:36

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

你要合并成什么样，你表头数据生成的时候可以自己控制
就是拼接你需要的数组格式
作者: xss511    时间: 2014-7-23 14:33:19

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

这是拼接后的样式[attach]4878[/attach]
这个是想要的样式[attach]4877[/attach]

就是“现金预算执行情况”这些列可不可以合并成一列
作者: felt    时间: 2014-7-23 14:36:42

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    时间: 2014-7-23 14:43:31

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

可以了，麻烦你了，谢谢



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2