基於MVC4+EasyUI的Web開發框架經驗總結（9）--在Datagrid裏面實現外鍵字段的轉義操做

時間 2019-11-18

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結 datagrid 裏面實現字段轉義欄目 HTML 简体版

原文原文鏈接

咱們在使用EasyUI的時候，不少狀況下須要使用到表格控件datagrid，這個控件控件很是強大，使用起來很簡潔，可是我在使用中，發現對於一個表裏面的外鍵字段進行轉義，並顯示引用表的一些名稱的操做，卻顯得比較難以實現，找了不少資料，基本上沒有找到對應的解決方案。本文主要介紹我對這種外鍵字段轉義的操做的實現方式，以便供你們參考瞭解。html

一、DataGrid的初始化操做

在瞭解對內容的解析前，咱們先來了解EasyUI裏面Datagrid的初始化操做過程，而後逐步進行分析，尋求解決方式。ajax

通常狀況下，Datagrid內容的初始化代碼以下所示，注意下面紅色部分的內容Customer_ID，就是咱們須要轉換爲客戶名稱的處理。由於咱們這裏返回的表數據包含了一個外鍵ID：Customer_ID，我須要把它轉換一下客戶的名稱。框架

        //實現對DataGird控件的綁定操做
        function InitGrid(queryData) {
            $('#grid').datagrid({   //定位到Table標籤，Table標籤的ID是grid
                url: '/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();
                }
            })
        };

二、嘗試失敗的操做

1）使用格式化函數Formatter異步

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

有可能想使用的代碼以下所示。函數

                      {
                          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爲名稱。所以這種方法，失敗！post

2）使用onLoadSuccess函數性能

這個onLoadSuccess函數，本意就是在Datagrid順利加載後執行的函數，通常狀況下，我想在加載後，在更新表格裏面的數據，以下面的代碼所示。url

                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的方式獲取數據，而後進行更新，不過很不幸，也不經過，沒法正常解析。spa

三、成功解析的方式

好了，既然沒法經過上面腳本的方式來進行解析，咱們經過曲線救國的方式，應該也是能夠的。

因爲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，而後並遍歷賦值，挺麻煩的一件事，也可能影響一些性能，若是咱們實體類裏面有一些備用的屬性做爲內容解析，在界面上直接使用這些備用屬性就能夠了，這樣會更加方便。

所以我在全部實體類的基類裏面增長三個屬性，Data一、Data二、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 },