基于jquery的表格动态创建，自动绑定，自动获取值
最近刚加入GUT项目，学习了很多其他同事写的代码，感觉受益匪浅。
在GUT项目中，经常会碰到这样一个问题：动态生成表格，包括从数据库中读取数据，并绑定在表格中，以及从在页面上通过jQuery新增删除表格。如下所示：
在实现过程中，开发人员经常采用如下方式来实现：
1） 在前台，通过js生成表格行的html字符串，然后通过jquery的after方法加到表格底部。
2） 在后台，读取数据库，然后生成表格的html字符串，然后传递给前台渲染
3） 这样做的好处，主要是可以实现无刷新的操作表格的效果
这种实现方式存在如下些问题（当然，个人意见，仅作技术交流^_^）：
1） 代码重复。前台写了一遍表格创建的js，后台又写了一遍
2） 字符串拼接。后台创建时，会大量使用字符串的拼接来实现表格的htnl字符串，不仅影响效率，而且不容易debug。比如少了个引号等，不容易找出来。（关于效率问题，因为字符串在.net中是恒定的，所以如果做很多次字符串的拼接，将造成资料的浪费和效率地下）
3） 绑定表格数据与获取表格数据要写很多代码，假设表格有10列字段，就要写关于这10列的数据怎么获取，以及怎么绑定会表格中的。
4） 开发人员经常在.aspx页面中写数据库的访问操作，这样也不符合MVC分离关注点的精神。如果项目换成别的数据库，比如oracle（按照项目的数据量来看，未来不排除换数据库的可能性），那么届时开发人员将需要满项目中数据库相关的语句来修改。
--------------------------------------分割线------------------------------------------
如前所述，可以从如下几个思路来思考：
1） 能否只在页面上编写一些js脚本，来创造表格，而在后台只是提供要创建表格数据即可。也就是说后台获取数据，然后交给前台去调用js函数创建表格。这样就可以避免前后台都写两次的问题了。而且也不会在后台用大量的字符串拼接来创建表格的html字符串。
2） 能否换种方式，不要通过字符串拼接的方式来创建表格？比如jquery.html()？
3） 能否提供一种统一的创建表格，绑定表格，获取表格数据的方法呢？以免每次都要写那么多代码来创建表格。
基于上述思路，我开发了一个demo，实现了用较少的代码动态创建表格，绑定表格数据，获取表格数据，并保存到数据库中。而且代码是可以复用的。
--------------------------------------分割线------------------------------------------
前期准备：
1） 创建数据库test，添加表person
2） 创建Entities层，DAL层，BLL层
Entities层（通过T4模板自动生成）
using System;
using MyBasicLib;
using MyBasicLib.Data.ORMLiteNew;
namespace ATMB.DCMS.Entities
{
/// <summary>
///
/// </summary>
[Serializable]
[Table(TableName="person" ,KeyName="ID")]
public partial class person:BaseTable
{
/// <summary>
///
/// </summary>
public person()
{
}
#region Public Properties
/// <summary>
///
/// </summary>
public override String ID
{
set ; get ;
}
/// <summary>
///
/// </summary>
public String name
{
set ; get ;
}
/// <summary>
///
/// </summary>
public String age
{
set ; get ;
}
/// <summary>
///
/// </summary>
public String sex
{
set ; get ;
}
/// <summary>
///
/// </summary>
public String location
{
set ; get ;
}
#endregion
}
}
DAL层，实现了新增，批量新增，删除，获取所有数据的几个简单的方法
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using ATMB.DCMS.Entities;
using MyBasicLib.Data.ORMLiteNew;
namespace DAL
{
public class PersonDA
{
public void Add(person p)
{
using (var dc = new DataContext())
{
dc.Insert(p);
dc.SubmitChanges();
}
}
public void Add(List<person> ds)
{
using (var dc = new DataContext())
{
foreach(var p in ds)
{
dc.Insert(p);
}
dc.SubmitChanges();
}
}
public void Delete()
{
using (var dc = new DataContext())
{
dc.Delete<person>(p => !SqlMethods.IsNull(p.ID));
dc.SubmitChanges();
}
}
public List<person> GetList()
{
using (var dc = new DataContext())
{
return dc.GetTable<person>().ToList();
}
}
}
}
BLL层
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using ATMB.DCMS.Entities;
using DAL;
namespace BLL
{
public class PersonBLL
{
PersonDA da;
public PersonBLL()
{
da = new PersonDA();
}
public void Add(List<person> ds)
{
da.Delete();
da.Add(ds);
}
public List<person> GetList()
{
return da.GetList();
}
}
}
备注：数据库底层访问使用Linq，换成oledb等其他方式只要修改DAL层就可以了。
3） 通过js实现表格的动态创建
第一步：定义表格
这里有几个地方要注意下：
第一：页面上添加的表格中，我添加了两个tr，一个是显示出来的tr，带有“新增”的图标。另一个是隐藏的，用来作为新增的行的模板。这样，不容易出错，而且避免通过字符串来创建。
第二：显示的tr中，设置了一个叫”TargetTR”的class，这个是用来搜索表格的所有行的，后面会用到。
第三，每个td中，新增了一个tag属性，与数据库表的实际字段对应，用来自动获取和绑定表格数据。
第四，tr模板的每个input的id（或者其他需要替换的属性）都定义为XXX_x，_x后缀是用来替换的。比如新增了一个tr，序号为3，便要替换tr中每个input的_x后缀为_3。诸如此类。
第二步：实现新增和删除表格行的js方法
ChangeAttr实现如下：
changeAttr主要是实现替换input的带_x结尾的属性为具体的序号。
以上实现了在页面上对表格行的新增和删除。通过模板的定义，我们无需在js写新增的tr的html字符串。这样可以最大可能的减少错误发生的可能性。因为字符串的可读性比较差，debug比较难。
接下来，要实现后台获取表格数据，然后通过上述的几个js脚本动态生成表格。
首先介绍下实现的思路
第一步，看下.ashx中的实现
Ashx中的实现很简单，就是根据前台的请求，进行相应的操作，然后返回结果（json）给前台
第二步：前台通过ajax访问.ashx，获取表格数据
Success时，会以json的格式返回表格的数据（比如person的集合），然后前台会解析这个json数据，并创建表格出来。
BindTable的实现很简单，首先看下共有多少条数据，然后多次调用add_tr方法，添加tr。（因为第一个tr是默认存在的，所以只要调用json.length-1次）
接下来便是该功能的核心了，绑定表格的数据。这里只需要调用一个函数就可以了bindTableValue，其实现如下
这个函数可以实现任意表格的数据绑定。完全可以复用。当然还存在些缺陷。本文最后会作以说明。
以上遍实现了从数据库获取值，然后动态绘制表格的过程。整个过程没有针对特定的表格来实现，所以代码是可以复用的。这个实现过程还有个好处是：分离关注点。对于表现层（前台，web层），只关心于根据数据来做相应的展现，而不关心数据是怎么来的（来自于sql，还是oracle？采用何种方式）。而BLL层负责根据用户的请求返回数据。关注于业务逻辑的处理。这样的实现方式，不会在前台写任何的sql语句。代码看起来比较简洁。
最后，实现将修改后的表格数据保存回数据库中。这就比较简单了
当点击保存时，调用save方法。Save方法中的核心是第一句：
getTableValue的实现为：
这样，开发人员同样不用写任何代码，便可以实现数据对象的自动获取。该代码是可以复用的。
--------------------------------------分割线------------------------------------------
总结：
- 上文以可复用，可扩展，分离关注点的方式实现了表格的动态绘制，数据的自动绑定和自动获取。而且用户的代码量相较以往减少了非常多。
- 自动绑定和获取的方法还存在些不足，因为当前版本的实现只是基于string类型的。未考虑datetime，bool，int等类型。但是根据分离关注点的原则（或者依赖倒置原则），我们同样可以将该部分逻辑分离出来，交给专门处理数据类型的类来处理。然后保持原有的逻辑不变。下来我会继续改进。
- 该方法同样适用于表单数据的保存和绑定.
- 心得体会：Less Code, Less Copy, More ReUseable, More Flexiable and More OO。
