jQuery MiniUI

标题: 关于DataGrid能否根据返回Json动态添加列的问题 [打印本页]

作者: XTX827227881    时间: 2013-4-13 23:01:06     标题: 关于DataGrid能否根据返回Json动态添加列的问题

返回的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的列!请问有没有办法的具体实现,最好给个源码。嘻嘻…………

作者: niko    时间: 2013-4-15 09:26:35

1.用ajax获取columns
2.grid.setColumns(columns) 动态设置columns,参考:http://miniui.com/bbs/forum.php? ... &extra=page%3D1



作者: XTX827227881    时间: 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);调试这句不能够隐藏此列?原因是什么?
显示界面为:


作者: niko    时间: 2013-4-15 11:49:47

显示隐藏列示例:http://www.miniui.com/demo/#src=datagrid/hidecolumn.html
注意是列的name
作者: XTX827227881    时间: 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");            
        }
作者: XTX827227881    时间: 2013-4-15 11:51:58

XTX827227881 发表于 2013-4-15 11:50
恩,已经解决谢谢!

        function createColumns(columns){

但是,你看我的生成表格图片,好像格式不是设置的那样!怎么回事?
作者: niko    时间: 2013-4-15 11:57:35

你看我们那个示例,你肯定是name没对应上导致的。
列的name是列唯一标识符,我们showColumn/hideColumn方法以此为准。
作者: XTX827227881    时间: 2013-4-15 12:02:54

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

那个问题已经解决了!
但是生成的表格的表头并未居中显示!怎么回事?
作者: niko    时间: 2013-4-15 14:11:45

headerAlign: 'center'
作者: XTX827227881    时间: 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;
            }
        }
请问:能不能通过这种方式把汇总单元格内容全部显示出来?

作者: factory    时间: 2013-4-19 09:26:03

XTX827227881 发表于 2013-4-18 23:28
显示图片:

后台实现代码:

可以服务端返回一个数据,然后放到汇总单元格内
参考:http://www.miniui.com/demo/#src=datagrid/summary.html
里面的onDrawSummaryCell()  
作者: XTX827227881    时间: 2013-4-20 23:00:13

factory 发表于 2013-4-19 09:26
可以服务端返回一个数据,然后放到汇总单元格内
参考:http://www.miniui.com/demo/#src=datagrid/summar ...

后台返回Json数据(自定义):
{"columns":[{"field":"ID","header":"ID"},{"field":"StudentID","header":"学籍号"},{"field":"StudentName","header":"学生姓名"},{"field":"StudentSex","header":"性别"},{"field":"StudentCategory","header":"生源性质"},{"field":"FeiItem0","header":"学费(调招生免280补60)"},{"field":"FeiItem1","header":"住宿费(大寝室300小寝室200)"},{"field":"FeiItem2","header":"作业本费"},{"field":"FeiItem3","header":"课本预收款"},{"field":"FeiItem13","header":"代收新华书店资料费"},{"field":"FeiItem14","header":"军训费"},{"field":"FeiItem15","header":"互助金"}],"Message":"获取学生收费信息成功!","rows":[{"ID":"2491ef89-333d-4670-8e55-79db02636016","FeiItem15":50.00,"FeiItem14":70.00,"FeiItem0":60.00,"StudentName":"包兴","FeiItem13":300.00,"FeiItem2":30.00,"StudentID":"GZ20140701","StudentSex":"男","FeiItem1":0.00,"FeiItem3":300.00,"StudentCategory":"调招生"}],"summary":[{"paid":60.00,"field":"FeiItem0","mustpay":60.00},{"paid":0.00,"field":"FeiItem1","mustpay":300.00},{"paid":30.00,"field":"FeiItem2","mustpay":30.00},{"paid":300.00,"field":"FeiItem3","mustpay":300.00},{"paid":300.00,"field":"FeiItem13","mustpay":300.00},{"paid":70.00,"field":"FeiItem14","mustpay":70.00},{"paid":50.00,"field":"FeiItem15","mustpay":50.00}],"State":0}
前台实现动态生成列,设置数据和动态生成汇总列(关键代码):
页面Html:
    <div class="mini-fit">
        <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%; min-height: 380px;"
            allowresize="true" idfield="ID" multiselect="true" allowHeaderWrap="true" showPager="false" showSummaryRow="true" allowCellWrap="true"
           >
        </div>
    </div>
Javascript代码:
            DataGrid.loading("操作中,请稍后......");
            $.ajax({
                url: "../data/DataService.aspx?method=GetStudentChargeInfo&studentid=" + studentid + "&chargecategoryid=" + chargecategoryid,
                type:"post",
                success: function (text) {
                    var result = mini.decode(text);
                    //返回正确状态
                    if(result.State == 0){
                        //设置动态列
                        DataGrid.loading("操作中,请稍后......");
                        createColumns(result.columns);                        
                        createRows(result.rows);
                        //createSummary(result.summary);                           
                    }else{               
                        mini.alert(result.Message);
                    }
                    DataGrid.unmask();               
                },
                error: function () {                           
                    mini.alert("生成学生收费信息失败!");                                          
                }
            });
            DataGrid.unmask();

        //动态添加列
        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.setColumns(mini.decode(txt));
            //隐藏掉ID列            
            DataGrid.hideColumn("ID");            
        }
        //动态生成数据
        function createRows(rows){
            DataGrid.setData(rows);
        }
        //动态生成汇总信息
        function onDrawSummaryCell(e){
            var summary = e.result.summary;
            for(var index = 0, count = summary.length;index < count;index ++){               
                var summaryCell = DataGrid.getSummaryCellEl(summary[index].field);
                //summaryCell.setNoWarp(true);
                var s = "<span style='color:Blue;mini-height:80px;'>"
                s +=    "应缴: " + summary[index].mustpay + "<br/>"
                        + "实缴: " + summary[index].paid + "<br/>"
                        + "欠费: " + (summary[index].mustpay - summary[index].paid) + "<br/>"                        
                        + "</span>";               
                summaryCell.innerHTML = s;
            }
        }

发现的问题:
var summary = e.result.summary;
这句并不能取到返回来的Json数据!原因是什么呢?

作者: niko    时间: 2013-4-21 09:01:03

因为你不是用我们的grid.load加载返回的数据,因此grid没有result。
你可以用一个全局变量放:
var SummaryData = null;

$.ajax({
   success: function(){
       ...
       SummaryData = result.summary;
  }
});

var summary = SummaryData ;
作者: XTX827227881    时间: 2013-4-21 12:32:10

niko 发表于 2013-4-21 09:01
因为你不是用我们的grid.load加载返回的数据,因此grid没有result。
你可以用一个全局变量放:
var Summary ...

相当感谢你!
我建议你们的文档中应该多增加一个DataGrid动态加载的完整实例!
作者: XTX827227881    时间: 2013-4-21 13:55:51

XTX827227881 发表于 2013-4-21 12:32
相当感谢你!
我建议你们的文档中应该多增加一个DataGrid动态加载的完整实例! ...

实现了想要的效果,但是资源耗费比较严重,有点浪费:
        function onDrawSummaryCell(e){
            if(ReturnJsonData == undefined){return;}
            var summary = ReturnJsonData.summary;
            for(var index = 0, count = summary.length;index < count;index ++){
                if(e.field == "StudentName" && summary[index].field == "Total"){
                    var s = "<span style='color:Blue;mini-height:80px;'>"
                    s +=    "应缴(总): " + summary[index].mustpay + "<br/>"
                        + "实缴(总): " + summary[index].paid + "<br/>"
                        + "欠费(总) " + (summary[index].mustpay - summary[0].paid) + "<br/>"                        
                        + "</span>";
                    e.cellHtml = s;
                }                                             
                if(e.field == summary[index].field){              
                    var s = "<span style='color:Blue;mini-height:80px;'>"
                    s +=    "应缴: " + summary[index].mustpay + "<br/>"
                        + "实缴: " + summary[index].paid + "<br/>"
                        + "欠费: " + (summary[index].mustpay - summary[index].paid) + "<br/>"                        
                        + "</span>";
                    e.cellHtml = s;
                }
            }
        }
就为了使用一个e.cellHtml = s;

实现界面如下:
[attach]1682[/attach]

作者: niko    时间: 2013-4-21 19:56:17

这里没什么资源消耗。
你要实现这个功能,也不简单了,这些代码是必须的。
作者: chengxuyuan    时间: 2013-4-28 09:23:15

XTX827227881 发表于 2013-4-18 23:28
显示图片:

后台实现代码:

你的单元格可以编辑么 为什么我用JS生成的表格无法编辑单元格呢
作者: factory    时间: 2013-4-28 09:32:06

chengxuyuan 发表于 2013-4-28 09:23
你的单元格可以编辑么 为什么我用JS生成的表格无法编辑单元格呢

表格无法编辑,第一:检查是否设置了allowCellSelect和allowCellEdit都为true

第二,有没有给列编辑器  JS生成的话columns:[{fiedl:"name",editor:{type:"textbox".....}}]
作者: chengxuyuan    时间: 2013-4-28 09:43:09

factory 发表于 2013-4-28 09:32
表格无法编辑,第一:检查是否设置了allowCellSelect和allowCellEdit都为true

第二,有没有给列编辑器   ...

谢谢  回答好快啊 我是没加编辑器 另外 如果多级表头怎么办呢 用js生成多级表头
作者: factory    时间: 2013-5-2 09:06:32

chengxuyuan 发表于 2013-4-28 09:43
谢谢  回答好快啊 我是没加编辑器 另外 如果多级表头怎么办呢 用js生成多级表头 ...

columns:[
     {......columns:[
              
     ]}
]




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