http://www.cnblogs.com/wuhuacong/p/3872890.html

我們在使用EasyUI的時候，很多情況下需要使用到表格控件datagrid，這個控件控件非常強大，使用起來很簡潔，但是我在使用中，發現對于一個表里面的外鍵字段進行轉義，并顯示引用表的一些名稱的操作，卻顯得比較難以實現，找了很多資料，基本上沒有找到對應的解決方案。本文主要介紹我對這種外鍵字段轉義的操作的實現方式，以便供大家參考了解。

1、DataGrid的初始化操作

在了解對內容的解析前，我們先來了解EasyUI里面Datagrid的初始化操作過程，然后逐步進行分析，尋求解決方式。

一般情況下，Datagrid內容的初始化代碼如下所示，注意下面紅色部分的內容Customer_ID，就是我們需要轉換為客戶名稱的處理。因為我們這里返回的表數據包含了一個外鍵ID：Customer_ID，我需要把它轉換一下客戶的名稱。

//實現對DataGird控件的綁定操作function InitGrid(queryData) {$('#grid').datagrid({ //定位到Table標簽，Table標簽的ID是gridurl: '/Contact/FindWithPager', //指向后臺的Action來獲取當前用戶的信息的Json格式的數據title: '客戶聯系人', iconCls: 'icon-view',height: 650,width: function () { return document.body.clientWidth * 0.9 },//自動寬度nowrap: true,autoRowHeight: false,striped: true,collapsible: true,pagination: true,pageSize: 50,pageList: [50, 100, 200],rownumbers: true,//sortName: 'Seq', //根據某個字段給easyUI排序sortOrder: 'asc',remoteSort: false,idField: 'ID',queryParams: queryData, //異步查詢的參數columns: [[{ field: 'ck', checkbox: true }, //選擇{ title: '客戶ID', field: 'Customer_ID', width: 180, sortable: true},{ title: '編號', field: 'HandNo', width: 80, sortable: true },{ title: '姓名', field: 'Name', width: 80, sortable: true },{ title: '身份證號碼', field: 'IDCarNo', width: 120, sortable: true },{title: '出生日期', field: 'Birthday', width: 120, sortable: true,formatter: function (value, rec, index) {if (value == undefined) {return "";}if ((value + '').indexOf('1900') == 0) {return "";}return value;}}]],toolbar: [{id: 'btnAdd',text: '添加',iconCls: 'icon-add',handler: function () { ShowAddDialog();//實現添加記錄的頁面}}, '-', {id: 'btnEdit',text: '修改',iconCls: 'icon-edit',handler: function () { ShowEditOrViewDialog();//實現修改記錄的方法}}, '-', {id: 'btnDelete',text: '刪除',iconCls: 'icon-remove',handler: function () { Delete();//實現直接刪除數據的方法}}, '-', {id: 'btnView',text: '查看',iconCls: 'icon-table',handler: function () { ShowEditOrViewDialog("view");//實現查看記錄詳細信息的方法}}, '-', {id: 'btnReload',text: '刷新',iconCls: 'icon-reload',handler: function () {//實現刷新欄目中的數據$("#grid").datagrid("reload");}}],onDblClickRow: function (rowIndex, rowData) {$('#grid').datagrid('uncheckAll');$('#grid').datagrid('checkRow', rowIndex);ShowEditOrViewDialog();}})};

?

2、嘗試失敗的操作

1）使用格式化函數Formatter

針對以上的處理，有些人可能很快就想到使用格式化Formatter來實現了，一般情況下處理轉義和自定義顯示操作，非此莫屬。

有可能想使用的代碼如下所示。

{title: '客戶名稱', field: 'Customer_ID', width: 180, sortable: true,formatter: function (value, row) {$.ajaxSettings.async = false;$.getJSON("/Customer/GetCustomerName?id=" + value, function (result) {return "<span>" + result + "</span>";});}},

但是，如果這樣做，你會發現格式化函數沒有辦法調用ajax的操作，獲取對應的數據，也就是無法進行解析客戶的ID為名稱。因此這種方法，失敗！

2）使用onLoadSuccess函數

這個onLoadSuccess函數，本意就是在Datagrid順利加載后執行的函數，一般情況下，我想在加載后，在更新表格里面的數據，如下面的代碼所示。

onLoadSuccess: function (data) {var rows = $("#grid").datagrid("getRows");if (rows.length >= 1) {for (var i = 0; i < rows.length; i++) {$.getJSON("/Customer/GetCustomerName?id=" + rows[i].Customer_ID, function (result) {$('#grid').datagrid('updateRow', { index: 0, row: { field: result } });});}}}

下面的方法也是通過Ajax的方式獲取數據，然后進行更新，不過很不幸，也不通過，無法正常解析。

3、成功解析的方式

好了，既然無法通過上面腳本的方式來進行解析，我們通過曲線救國的方式，應該也是可以的。

由于Datagrid顯示的數據是下面的方式就可以的

var result = new { total = list.Count, rows = list };

那么我們在返回數據給datagrid的控制器函數里面，對返回的內容，增加一個“客戶名稱”的信息，應該就可以了。

1）轉換內容為DataTable并增加字段

但是我的框架里面，返回的內容都設置為了List<T>的這種方式，也就是T代表的是實體類，我們很難改變實體類里面的屬性并賦值，那么我們也可以把它轉換為DataTable了。

//增加一個客戶名稱字段，然后進行解析，構建一個DataTable返回DataTable dtReturn = DataTableHelper.ListToDataTable<ContactInfo>(list);dtReturn.Columns.Add("CustomerName");foreach (DataRow row in dtReturn.Rows){row["CustomerName"] = BLLFactory<Customer>.Instance.GetCustomerName(row["Customer_ID"].ToString());}var result = new { total = dtReturn.Rows.Count, rows = dtReturn };

通過函數DataTableHelper.ListToDataTable<ContactInfo>(list);可以把列表的內容構建成一個DataTable的內容，并增加一個CustomerName的字段，然后遍歷每一行，填入解析Customer_ID后的名稱，并返回記錄就可以了。

在視圖里面，我們通過增加一個字段進行綁定就可以了，如下所示。

{title: '客戶ID', field: 'Customer_ID', width: 180, sortable: true, hidden:true},{ title: '客戶名稱', field: 'CustomerName', width: 180, sortable: true },

2）在實體類基類增加一些額外的字段屬性

剛才我們看到，把實體類列表轉換為DataTable，然后并遍歷賦值，挺麻煩的一件事，也可能影響一些性能，如果我們實體類里面有一些備用的屬性作為內容解析，在界面上直接使用這些備用屬性就可以了，這樣會更加方便。

因此我在所有實體類的基類里面增加三個屬性，Data1、Data2、Data3，有點類似Visio模具形狀的屬性設置了，呵呵。

/// <summary>/// 框架實體類的基類/// </summary>[DataContract]public class BaseEntity{#region 在實體類存儲一些特殊的數據/// <summary>/// 用來給實體類傳遞一些額外的數據，如外鍵的轉義等，該字段不保存到數據表中/// </summary>[DataMember]public string Data1 { get; set; }/// <summary>/// 用來給實體類傳遞一些額外的數據，如外鍵的轉義等，該字段不保存到數據表中/// </summary>[DataMember]public string Data2 { get; set; }/// <summary>/// 用來給實體類傳遞一些額外的數據，如外鍵的轉義等，該字段不保存到數據表中/// </summary>[DataMember]public string Data3 { get; set; } #endregion}

有了這些備用的屬性，我們就可以解決外鍵轉義的內容存儲問題了。

在查詢里面，我們只需要遍歷一次，把轉換好的內容賦值給對應的實體類屬性就好了。

foreach (ContactInfo info in list){//增加一個特殊字段的轉義info.Data1 = BLLFactory<Customer>.Instance.GetCustomerName(info.Customer_ID);}

最后在視圖里面，我們的代碼如下所示。

{title: '客戶ID', field: 'Customer_ID', width: 180, sortable: true, hidden:true},{ title: '客戶名稱', field: 'Data1', width: 180, sortable: true },

主界面里面的列表展示如下所示。

數據導入界面里面的列表展示如下所示。

總結

以上是生活随笔為你收集整理的(转）基于MVC4+EasyUI的Web开发框架经验总结（9）--在Datagrid里面实现外键字段的转义操作...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。