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动态加载的完整实例！ ...

实现了想要的效果，但是资源耗费比较严重，有点浪费：

实现界面如下:
[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/)