1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数
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" alt="" />
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
相关文章
