基于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 },