jQuery MiniUI

 找回密码
 立即注册
查看: 13676|回复: 19
打印 上一主题 下一主题

关于DataGrid能否根据返回Json动态添加列的问题 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2013-4-13 23:01:06 |只看该作者 |倒序浏览
返回的Json数据:
{"head":[{"ChargeItemPrice0":60.00,"ChargeItemName0":"学费(调招生免280补60)"},{"ChargeItemPrice1":300.00,"ChargeItemName1":"住宿费(大寝室300小寝室200)"},{"ChargeItemPrice2":30.00,"ChargeItemName2":"作业本费"},{"ChargeItemPrice3":300.00,"ChargeItemName3":"课本预收款"},{"ChargeItemName13":"代收新华书店资料费","ChargeItemPrice13":300.00},{"ChargeItemName14":"军训费","ChargeItemPrice14":70.00},{"ChargeItemName15":"互助金","ChargeItemPrice15":50.00}],"Message":"获取学生收费信息成功!","State":0}
其中,我想根据ChargeItemName来动态创建DataGrid的列!请问有没有办法的具体实现,最好给个源码。嘻嘻…………

Rank: 9Rank: 9Rank: 9

沙发
发表于 2013-4-15 09:26:35 |只看该作者
1.用ajax获取columns
2.grid.setColumns(columns) 动态设置columns,参考:http://miniui.com/bbs/forum.php? ... &extra=page%3D1


Rank: 2

板凳
发表于 2013-4-15 11:18:52 |只看该作者
本帖最后由 XTX827227881 于 2013-4-15 11:21 编辑

后台返回Json:
{"columns":[{"field":"ID","header":"ID"},{"field":"StudentID","header":"学籍号"},{"field":"StudentName","header":"学生姓名"},{"field":"StudentSex","header":"性别"},{"field":"StudentCategory","header":"生源性质"},{"field":"ChargeItem0","header":"学费(调招生免280补60)"},{"field":"ChargeItem1","header":"住宿费(大寝室300小寝室200)"},{"field":"ChargeItem2","header":"作业本费"},{"field":"ChargeItem3","header":"课本预收款"},{"field":"ChargeItem13","header":"代收新华书店资料费"},{"field":"ChargeItem14","header":"军训费"},{"field":"ChargeItem15","header":"互助金"}],"Message":"获取学生收费信息成功!","State":0}

前台代码处理Json:
        //动态添加列
        function createColumns(columns){
            var txt = '[{type:"checkcolumn"},' +            
                       '{type:"indexcolumn", headeralign:"center", width:"30", header:"序号"}';
            for(var index = 0, count = columns.length;index < count;index ++){
                txt += ',{field:"'+columns[index].field + '", headeralign:"center", width:"50", header:"' + columns[index].header + '"}';
            }
            txt += "]";           
            DataGrid.set({columns:mini.decode(txt)});
            DataGrid.render(document.body);
            //隐藏掉ID列
            var id_column = DataGrid.getColumn("ID");
            DataGrid.hideColumn(id_column);
        }

问题:能够动态的生成列了,但是 var id_column = DataGrid.getColumn("ID");DataGrid.hideColumn(id_column);调试这句不能够隐藏此列?原因是什么?
显示界面为:

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 9Rank: 9Rank: 9

地板
发表于 2013-4-15 11:49:47 |只看该作者
显示隐藏列示例:http://www.miniui.com/demo/#src=datagrid/hidecolumn.html
注意是列的name

Rank: 2

5#
发表于 2013-4-15 11:50:54 |只看该作者
niko 发表于 2013-4-15 11:49
显示隐藏列示例:http://www.miniui.com/demo/#src=datagrid/hidecolumn.html
注意是列的name ...

恩,已经解决谢谢!

        function createColumns(columns){
            var txt = '[{type:"checkcolumn"},' +            
                       '{type:"indexcolumn", headeralign:"center", width:"30", header:"序号"}';
            for(var index = 0, count = columns.length;index < count;index ++){
                txt += ',{ name:"'+ columns[index].field  +'",field:"'+columns[index].field + '", headeralign:"center", width:"50", header:"' + columns[index].header + '"}';
            }
            txt += "]";           
            DataGrid.set({columns:mini.decode(txt)});            
            //隐藏掉ID列            
            DataGrid.hideColumn("ID");            
        }

Rank: 2

6#
发表于 2013-4-15 11:51:58 |只看该作者
XTX827227881 发表于 2013-4-15 11:50
恩,已经解决谢谢!

        function createColumns(columns){

但是,你看我的生成表格图片,好像格式不是设置的那样!怎么回事?

Rank: 9Rank: 9Rank: 9

7#
发表于 2013-4-15 11:57:35 |只看该作者
你看我们那个示例,你肯定是name没对应上导致的。
列的name是列唯一标识符,我们showColumn/hideColumn方法以此为准。

Rank: 2

8#
发表于 2013-4-15 12:02:54 |只看该作者
niko 发表于 2013-4-15 11:57
你看我们那个示例,你肯定是name没对应上导致的。
列的name是列唯一标识符,我们showColumn/hideColumn方法 ...

那个问题已经解决了!
但是生成的表格的表头并未居中显示!怎么回事?

Rank: 9Rank: 9Rank: 9

9#
发表于 2013-4-15 14:11:45 |只看该作者
headerAlign: 'center'

Rank: 2

10#
发表于 2013-4-18 23:28:04 |只看该作者
niko 发表于 2013-4-15 14:11
headerAlign: 'center'

显示图片:

后台实现代码:
        //动态生成汇总信息
        function createSummary(summary){
            for(var index = 0, count = summary.length;index < count;index ++){               
                var summaryCell = DataGrid.getSummaryCellEl(summary[index].field);
                var s = "<div style='color:Blue;height:100%;'>"
                s +=    "应缴: " + summary[index].mustpay +"<br/>"
                        + '实缴: ' + summary[index].paid + "<br/>"
                        + '欠费: ' + (summary[index].mustpay - summary[index].paid) + "<br/>"                        
                        + "</div>";               
                summaryCell.innerHTML = s;
            }
        }
请问:能不能通过这种方式把汇总单元格内容全部显示出来?
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Archiver|普加软件

GMT+8, 2024-5-18 12:16 , Processed in 1.050444 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部