datagrid動態載入列（續）
阿新 • • 發佈：2019-02-11
之前有一篇部落格寫到了如何動態載入datagrid的列，上次只是介紹如何動態動態表頭，並沒有將資料新增到datagrid中，本次主要來說如何將資料庫中的資料，動態新增到每一列中。
先說一下為什麼會需要拼接資料，由於我們datagrid中顯示的一條資料，可能對應資料庫中多條資料，這就需要將多條資料拼接成一條資料，對應顯示在表格中。如圖所示：
一、通過後臺查詢查到了多條資料：
public List<QualitativeLevelViewModel> QueryTargetLevel(string id, int year) { Guid ID = new Guid(id); List<QualitativeLevelViewModel> QualitativeLevel1 = this.CurrentDal.LoadItems(u => u.QualitativeTargetID == ID && u.IsEnable == 1 && u.CheckYear == year).Select(s => new QualitativeLevelViewModel() { QualitativeLevalName = s.QualitativeLevalName, QualitativeLevelID = s.QualitativeLevelID }).ToList(); return QualitativeLevel1; }
二、Controller中拼接
從後臺獲得資料後，返回到MVC的Controller中，這是一個物件可以對應多個檔次值，需要將多條資料拼接起來，由於表頭是靈活載入的，我們需要將表頭和每一列的資料動態繫結在一起，接下來就是在controller中拼接表頭。
public string LoadInputData() { //獲取定性指標ID Guid TargetID = new Guid(Request["TargetID"]); string QualitativeTargetID = TargetID.ToString(); //獲取年 int year = int.Parse(Request["CheckYear"]); //獲取定性指標名稱 string targetName = Request["TargetName"]; //例項化一個實體 DevelopmentQualitativeViewModel enDevelopmentQualitativeVM = new DevelopmentQualitativeViewModel(); //將年份放到實體中 enDevelopmentQualitativeVM.CheckYear = year; //獲得從前臺傳過來的頁數和每頁的數量 int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]); int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); int total = 0; //查詢已錄入的定性指標資訊 List<DevelopmentQualitativeViewModel> InputQualitativeResult = DevelopmentQualitativeResult.QueryYesInputQualitativeResult(year, TargetID); #region 呼叫服務端方法，並拼寫datatable動態表頭--張思思-2016年4月22日14:19:52 //呼叫服務端，查詢定性檔次表頭資訊 List<QualitativeLevelViewModel> listQualitativeLevelVM = SetQualitativeTargetLeval.QueryTargetLevel(QualitativeTargetID, year); for (int i = 0; i < InputQualitativeResult.Count; i++) { InputQualitativeResult[i].QualitativeTargetID = TargetID; InputQualitativeResult[i].QualitativeTargetName = targetName; } //例項化datatable DataTable DataDevelopmentQualitiveResult = new DataTable(); //判斷是否獲得表頭 if (listQualitativeLevelVM.Count > 0) { //向datatable中新增表頭 DataDevelopmentQualitiveResult.Columns.Add("DevelopmentObjectID"); DataDevelopmentQualitiveResult.Columns.Add("DevelopmentName"); DataDevelopmentQualitiveResult.Columns.Add("QualitativeTargetID"); DataDevelopmentQualitiveResult.Columns.Add("QualitativeTargetName"); //迴圈向datatable中新增動態表頭 for (int i = 0; i < listQualitativeLevelVM.Count; i++) { //DataColumn dataName = new DataColumn(); string QualitativeLevelID = listQualitativeLevelVM[i].QualitativeLevelID.ToString(); DataDevelopmentQualitiveResult.Columns.Add(QualitativeLevelID); } DataDevelopmentQualitiveResult.Columns.Add("Remark"); } #endregion //定義一個臨時變數，用來判斷是否有重複的行 string test = ""; //通過迴圈獲得的list集合並將其資料新增到datatable中 foreach (var item in InputQualitativeResult) { //例項化一個datatable行實體 DataRow row = DataDevelopmentQualitiveResult.NewRow(); //通過物件id判斷是否有重複的行 if (test != item.DevelopmentObjectID.ToString()) { //將物件ID交給臨時變數text test = item.DevelopmentObjectID.ToString(); //將對應的資料新增到datatable實體中 row["DevelopmentObjectID"] = item.DevelopmentObjectID; row["DevelopmentName"] = item.DevelopmentName; row["QualitativeTargetID"] = item.QualitativeTargetID; row["QualitativeTargetName"] = item.QualitativeTargetName; row["Remark"] = item.Remarks; row[item.QualitativeLevelID.ToString()] = item.Votes; //將此行新增到table集合中 DataDevelopmentQualitiveResult.Rows.Add(row); } else { //通過迴圈查詢到對應的票數新增到datatable中 for (int i = 0; i < DataDevelopmentQualitiveResult.Rows.Count; i++) { //定義臨時變數用來判斷是否更新datatable表 string strF = DataDevelopmentQualitiveResult.Rows[i][0].ToString(); //判斷是否更新datatable表 if (strF == item.DevelopmentObjectID.ToString()) { //將票數新增到datatable中對應的行 DataDevelopmentQualitiveResult.Rows[i][item.QualitativeLevelID.ToString()] = item.Votes; } } } } //將datatable轉換成json串 return Dtb2Json(DataDevelopmentQualitiveResult); }
呼叫一個方法，將datatable轉換為json串
public static string Dtb2Json(DataTable dtb) { JavaScriptSerializer jss = new JavaScriptSerializer(); System.Collections.ArrayList dic = new System.Collections.ArrayList(); foreach (DataRow dr in dtb.Rows) { System.Collections.Generic.Dictionary<string, object> drow = new System.Collections.Generic.Dictionary<string, object>(); foreach (DataColumn dc in dtb.Columns) { drow.Add(dc.ColumnName, dr[dc.ColumnName]); } dic.Add(drow); } //序列化 return jss.Serialize(dic); }
三、JS呼叫
$('#Inputdg').datagrid({
url: '/DevelopmentQualitative/LoadInputData?CheckYear=' + year + "&TargetID=" + TargetID + "&TargetName=" + TargetName,
width: "100%",
striped: true,//行背景交換
fitColumns: true,
idField: 'ID',
loadMsg: '正在載入使用者的資訊...',
pagination: true,
singleSelect: false,
pageList: [10, 20, 30, 40, 50],
pageSize: 10,
pageNumber: 1,
}).datagrid("reload");
$('#Inputdg').datagrid('clearSelections');//清空選中的行 四、顯示在介面：
<div id="haveRecord" title="已錄入單位" style="padding: 10px" >
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editData()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteData()">刪除</a>
</div>
<table id="Inputdg" class="easyui-datagrid" style="width: 1070px; height: auto"
data-options="
iconCls: 'icon-edit',
singleSelect: false,
@*url: 'datagrid_data1.json',*@
method:'get',
onClickCell: onClickCell
">
</table>
</div>總結：
經過和小馬的努力，終於大功告成將資料顯示到介面上，面對問題從該開始的無措，對開始各種嘗試，一遍遍的去實驗，終於成功了。這一階段的除錯，對前臺的理解更深刻了，接下來繼續奮鬥。。。