楼主: XTX827227881

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

factory

超级版主

Rank: 8 Rank: 8

11^#

发表于 2013-4-19 09:26:03 |只看该作者

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

后台实现代码：

可以服务端返回一个数据，然后放到汇总单元格内
参考：http://www.miniui.com/demo/#src=datagrid/summary.html
里面的onDrawSummaryCell()

XTX827227881

注册会员

Rank: 2

12^#

发表于 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

管理员

Rank: 9 Rank: 9 Rank: 9

13^#

发表于 2013-4-21 09:01:03 |只看该作者

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

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

var summary = SummaryData ;