Jquery easy ui datagrid動態加載列問題

1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

技术分享

 

技术分享

 

2.首先是后台组装数据,我采用的是循环并拼接DataTable数据,如下代码

          //循環添加datagrid所需的表頭數據
                for (int i = 0; i < table.Columns.Count; i++)
                {
                    columns.AppendFormat("{{field:‘{0}‘,title:‘{1}‘,align:‘center‘,width:{2}}},", table.Columns[i].ColumnName, table.Columns[i].ColumnName, 41);
                }
                //刪除最有一個filed多餘的","號
                if (table.Columns.Count > 0)
                {
                    columns.Remove(columns.Length - 1, 1);
                }
                columns.Append("]]");
                //組裝工令各站排程達成狀況表頭和數據 
                Dictionary<string, object> objDic = new Dictionary<string, object>();
                objDic.Add("columns", columns.ToString()); //datagrid表头
                objDic.Add("rows", table); //datagrid表数据
          //转换为Json格式
return Common.JsonHelper.ToJson(objDic)

 

3.取得浏览器所返回的组装后的JSON格式数据,如下

{"columns":"[[{field:‘Item‘,title:‘項目‘,align:‘center‘,width:120},{field:‘SumMonth‘,title:‘3月份累計‘,align:‘center‘,width:70},{field:‘03/01‘,title:‘03/01‘,align:‘center‘,width:41},{field:‘03/02‘,title:‘03/02‘,align:‘center‘,width
:41},{field:‘03/03‘,title:‘03/03‘,align:‘center‘,width:41},{field:‘03/04‘,title:‘03/04‘,align:‘center‘,width:41},{field:‘03/05‘,title:‘03/05‘,align:‘center‘,width:41},{field:‘03/06‘,title:‘03/06‘,align:‘center‘,width:41},
{field:‘03/07‘,title:‘03/07‘,align:‘center‘,width:41},{field:‘03/08‘,title:‘03/08‘,align:‘center‘,width:41},{field:‘03/09‘,title:‘03/09‘,align:‘center‘,width:41},{field:‘03/10‘,title:‘03/10‘,align:‘center‘,width:41},
{field:‘03/11‘,title:‘03/11‘,align:‘center‘,width:41},{field:‘03/12‘,title:‘03/12‘,align:‘center‘,width:41},{field:‘03/13‘,title:‘03/13‘,align:‘center‘,width:41}]]
",

"rows":[{"SerailNum":1,"Item":"累計各LOT耗用工時之合(H)","SumMonth":142.00,"03/01":null,"03/02":null,"03/03":null,"03/04":50.00,"03/05":null,"03/06":7.00,"03/07":42.00,"03/08":null,"03/09":null,"03/10":17.00,"03/11":null,"03/12":26.00,"03/13":null},{"SerailNum":2,"Item":"產出LOT批","SumMonth":13.00,"03/01":0.00,"03/02":0.00,"03/03":0.00,"03/04":2.00,"03/05":0.00,"03/06":4.00,"03/07":2.00,"03/08":0.00,"03/09":0.00,"03/10":1.00,"03/11":0.00,"03/12":4.00,"03/13":0.00},{"SerailNum":3,"Item":"平均實際CT","SumMonth":10.92,"03/01":null,"03/02":null,"03/03":null,"03/04":25.00,"03/05":null,"03/06":1.75,"03/07":21.00,"03/08":null,"03/09":null,"03/10":17.00,"03/11":null,"03/12":6.50,"03/13":null}]}

 

4.浏览器端解析数据,并绑定datagrid

            //綁定工令各站排程達成狀況
                    $("#dg_PDL_RealCT").datagrid({
                        width: auto,  //寬度
                        height: auto,  //高度
                        singleSelect: true, //允許選中一行
                        striped: true, //设置为true将交替显示行背景。
                        rownumbers: true, //顯示行號
                        title: "站別實際CT-日報", //標題
                        iconCls: "icon-save", //圖表
                        collapsible: true, //隱藏按鈕
                        method: "post", //post請求
                        showFooter: true,
                        loadMsg: "數據加載中...", //載入信息時提示內容
                        onLoadError: function () {
                            $.messager.alert(溫馨提示, "加载数据失败!!!");
                        },
                        view: myview,
                        emptyMsg: 沒有檢索到相關數據!
                    }); //end datagrid

                    //綁定工令各站排程達成狀況表頭
                    $.post("/PI/PDL_RealCT", { "BDate": $("#BDate").datebox(getValue), "EDate": $("#EDate").datebox(getValue), "ProcCode": $("#ProcCode").combobox(getValue) }, function (data) {
                        setTimeout(function () {
                //将json格式数据转换为js对象
var json = eval("(" + data + ")");
                //获取datagrid熟悉对象 并为其赋值
var opt = $("#dg_PDL_RealCT").datagrid(options);
                //为datagrid表头赋值 opt.columns
= eval(json.columns); $("#dg_PDL_RealCT").datagrid(opt);
                //加载datagrid内容 $(
"#dg_PDL_RealCT").datagrid("loadData", json.rows); $.messager.progress(close); }, 1000); //end setTimeout }); //end postgh

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。