我們在使用EasyUI的時候上荡，很多情況下需要使用到表格控件datagrid，這個控件控件非常強大咏瑟，使用起來很簡潔，但是我在使用中痪署，發(fā)現(xiàn)對于一個表里面的外鍵字段進(jìn)行轉(zhuǎn)義码泞，并顯示引用表的一些名稱的操作，卻顯得比較難以實現(xiàn)狼犯，找了很多資料余寥，基本上沒有找到對應(yīng)的解決方案。本文主要介紹我對這種外鍵字段轉(zhuǎn)義的操作的實現(xiàn)方式辜王，以便供大家參考了解。
1罐孝、DataGrid的初始化操作
在了解對內(nèi)容的解析前呐馆，我們先來了解EasyUI里面Datagrid的初始化操作過程，然后逐步進(jìn)行分析莲兢，尋求解決方式汹来。
一般情況下续膳，Datagrid內(nèi)容的初始化代碼如下所示，注意下面紅色部分的內(nèi)容Customer_ID收班，就是我們需要轉(zhuǎn)換為客戶名稱的處理坟岔。因為我們這里返回的表數(shù)據(jù)包含了一個外鍵ID：Customer_ID，我需要把它轉(zhuǎn)換一下客戶的名稱摔桦。
//實現(xiàn)對DataGird控件的綁定操作
function InitGrid(queryData) {
$('#grid').datagrid({ //定位到Table標(biāo)簽社付，Table標(biāo)簽的ID是grid
url: '/Contact/FindWithPager', //指向后臺的Action來獲取當(dāng)前用戶的信息的Json格式的數(shù)據(jù)
title: '客戶聯(lián)系人',
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', //根據(jù)某個字段給easyUI排序
sortOrder: 'asc',
remoteSort: false,
idField: 'ID',
queryParams: queryData, //異步查詢的參數(shù)
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();//實現(xiàn)添加記錄的頁面
}
}, '-', {
id: 'btnEdit',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
ShowEditOrViewDialog();//實現(xiàn)修改記錄的方法
}
}, '-', {
id: 'btnDelete',
text: '刪除',
iconCls: 'icon-remove',
handler: function () {
Delete();//實現(xiàn)直接刪除數(shù)據(jù)的方法
}
}, '-', {
id: 'btnView',
text: '查看',
iconCls: 'icon-table',
handler: function () {
ShowEditOrViewDialog("view");//實現(xiàn)查看記錄詳細(xì)信息的方法
}
}, '-', {
id: 'btnReload',
text: '刷新',
iconCls: 'icon-reload',
handler: function () {
//實現(xiàn)刷新欄目中的數(shù)據(jù)
$("#grid").datagrid("reload");
}
}],
onDblClickRow: function (rowIndex, rowData) {
$('#grid').datagrid('uncheckAll');
$('#grid').datagrid('checkRow', rowIndex);
ShowEditOrViewDialog();
}
})
};
2、嘗試失敗的操作
1）使用格式化函數(shù)Formatter
針對以上的處理邻耕，有些人可能很快就想到使用格式化Formatter來實現(xiàn)了鸥咖，一般情況下處理轉(zhuǎn)義和自定義顯示操作，非此莫屬兄世。
有可能想使用的代碼如下所示啼辣。
{
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>";
});
}
},
但是，如果這樣做御滩，你會發(fā)現(xiàn)格式化函數(shù)沒有辦法調(diào)用ajax的操作鸥拧，獲取對應(yīng)的數(shù)據(jù)，也就是無法進(jìn)行解析客戶的ID為名稱削解。因此這種方法富弦，失敗钠绍！
2）使用onLoadSuccess函數(shù)
這個onLoadSuccess函數(shù)舆声，本意就是在Datagrid順利加載后執(zhí)行的函數(shù)，一般情況下柳爽，我想在加載后媳握，在更新表格里面的數(shù)據(jù)，如下面的代碼所示磷脯。
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的方式獲取數(shù)據(jù)蛾找，然后進(jìn)行更新，不過很不幸赵誓，也不通過打毛，無法正常解析。
3俩功、成功解析的方式
好了幻枉，既然無法通過上面腳本的方式來進(jìn)行解析，我們通過曲線救國的方式诡蜓，應(yīng)該也是可以的熬甫。
由于Datagrid顯示的數(shù)據(jù)是下面的方式就可以的
var result = new { total = list.Count, rows = list };
那么我們在返回數(shù)據(jù)給datagrid的控制器函數(shù)里面，對返回的內(nèi)容蔓罚，增加一個“客戶名稱”的信息椿肩，應(yīng)該就可以了瞻颂。
1）轉(zhuǎn)換內(nèi)容為DataTable并增加字段
但是我的框架里面，返回的內(nèi)容都設(shè)置為了List<T>的這種方式郑象，也就是T代表的是實體類贡这，我們很難改變實體類里面的屬性并賦值，那么我們也可以把它轉(zhuǎn)換為DataTable了厂榛。
//增加一個客戶名稱字段盖矫，然后進(jìn)行解析，構(gòu)建一個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 };
通過函數(shù)DataTableHelper.ListToDataTable<ContactInfo>(list);可以把列表的內(nèi)容構(gòu)建成一個DataTable的內(nèi)容噪沙，并增加一個CustomerName的字段炼彪，然后遍歷每一行，填入解析Customer_ID后的名稱正歼，并返回記錄就可以了辐马。
在視圖里面，我們通過增加一個字段進(jìn)行綁定就可以了局义，如下所示喜爷。
{
title: '客戶ID', field: 'Customer_ID', width: 180, sortable: true, hidden:true
},
{ title: '客戶名稱', field: 'CustomerName', width: 180, sortable: true },
2）在實體類基類增加一些額外的字段屬性
剛才我們看到，把實體類列表轉(zhuǎn)換為DataTable萄唇，然后并遍歷賦值檩帐，挺麻煩的一件事，也可能影響一些性能另萤，如果我們實體類里面有一些備用的屬性作為內(nèi)容解析湃密，在界面上直接使用這些備用屬性就可以了，這樣會更加方便四敞。
因此我在所有實體類的基類里面增加三個屬性泛源，Data1、Data2忿危、Data3达箍，有點類似Visio模具形狀的屬性設(shè)置了，呵呵铺厨。
/// <summary>
/// 框架實體類的基類
/// </summary>
[DataContract]
public class BaseEntity
{
#region 在實體類存儲一些特殊的數(shù)據(jù)
/// <summary>
/// 用來給實體類傳遞一些額外的數(shù)據(jù)缎玫，如外鍵的轉(zhuǎn)義等，該字段不保存到數(shù)據(jù)表中
/// </summary>
[DataMember]
public string Data1 { get; set; }
/// <summary>
/// 用來給實體類傳遞一些額外的數(shù)據(jù)解滓，如外鍵的轉(zhuǎn)義等赃磨，該字段不保存到數(shù)據(jù)表中
/// </summary>
[DataMember]
public string Data2 { get; set; }
/// <summary>
/// 用來給實體類傳遞一些額外的數(shù)據(jù)，如外鍵的轉(zhuǎn)義等洼裤，該字段不保存到數(shù)據(jù)表中
/// </summary>
[DataMember]
public string Data3 { get; set; }
#endregion
}
有了這些備用的屬性邻辉，我們就可以解決外鍵轉(zhuǎn)義的內(nèi)容存儲問題了。
在查詢里面，我們只需要遍歷一次恩沛，把轉(zhuǎn)換好的內(nèi)容賦值給對應(yīng)的實體類屬性就好了。
foreach (ContactInfo info in list)
{
//增加一個特殊字段的轉(zhuǎn)義
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 },
主界面里面的列表展示如下所示。
數(shù)據(jù)導(dǎo)入界面里面的列表展示如下所示桥狡。
