基于MVC+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却显得比较难以实现,找了很多资料,基本上没有找到对应的解决方案。本文主要介绍我对这种外键字段转义的操作的实现方式,以便供大家参考了解。

1、DataGrid的初始化操作

在了解对内容的解析前,我们先来了解EasyUI里面Datagrid的初始化操作过程,然后逐步进行分析,寻求解决方式。

一般情况下,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();
                }
            })
        };

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

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

数据导入界面里面的列表展示如下所示。

时间: 07-21

基于MVC+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作的相关文章

基于MVC+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文主要介绍在我的CRM系统中用到的全国省份.城市.行政区三者的两种效果,在Winform上实现没问题,在Web上基于MVC的EasyUI实现,同样也没有问题. 1.Winform上省份.城市.行政区的联动效果 在很早的时候,我在Winform框架的一篇随笔<Winform开发框架之字典管理模块的更新,

基于MVC+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括获取数据并显示,插入新数据到服务器,更新数据,删除数据等操作. 1.利用Jquery获取数据并显示 为了顺利获取数据,我们需要保持页面端调用和服务器端保持一致,并相应的把数据转换或者封装为对象实体进行处理. 下面我们以一个简单的全国省份.全国城市.全国城市行政区的案例进行Demo代码的介绍.   总

基于MVC+EasyUI的Web开发框架经验总结(15)--在MVC项目中使用RDLC报表

RDLC是一个不错的报表,有着比较不错的设计模式和展现效果,在我的Winform开发里面,使用RDLC也是一个比较方便操作,如可以参考文章<DevExpress的XtraReport和微软RDLC报表的使用和对比>或者<会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载>进行了解.但是基于MVC方式,如何构建和展现RDLC报表呢?本文主要介绍如何在基于MVC4+EasyUI的Web开发框架上进行RDLC的集成和使用. 1.RDLC绑定数据源 RDLC的报表设计,是使用

基于MVC+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息

在最新的MVC+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单.运单合并.到货扫描.扣仓.出仓.查询等各个模块的操作,里面涉及到一些运单套打的操作,不过由于之前介绍LODOP不兼容Chrome等浏览器,因此曾经想放弃这个控件的打印处理,不过他们及时推出了"云打印控件C-Lodop",而且对之前的接口几乎完全兼容,因此在框架里也继续沿用了这个控件来进行相关的打印处理,包括常规的打印和运单信息套打等处理. 1.控件的安装 这个云控件C-Lodop(

基于MVC+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

在很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览的还是比较少,这里的Office文档包括了Word.Excel.PPT文档.本文介绍两种方式,一种方式是通过在线预览的方式,利用微软的平台进行Office文档的在线查看:一种是把Office文档生成HTML文件后进行查看.然后对比他们的优缺点,并进行总结. 1.利用微软的平台进行Office文档的在线查看

基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform里面的通用导入导出模块的设计和开发过程,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件Uploadify 的使用,实现文件上传后马上进行处理并显示,然后确认后把数据写入数据库的过程. 我们知道,Web上对Excel的处理和Winform的有所差异,如果是在We

基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却显得比较难以实现,找了很多资料,基本上没有找到对应的解决方案.本文主要介绍我对这种外键字段转义的操作的实现方式,以便供大家参考了解. 1.DataGrid的初始化操作 在了解对内容的解析前,我们先来了解EasyUI里面Datagrid的初始化操作过程,然后逐步进行分析,寻求解决方式. 一般情况下,D

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您