基于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的实现为：

 

这样，开发人员一样不用写任何代码，即可以实现数据对象的自动获取。该代码是能够复用的。

--------------------------------------分割线------------------------------------------

总结：

1. 上文以可复用，可扩展，分离关注点的方式实现了表格的动态绘制，数据的自动绑定和自动获取。并且用户的代码量相较以往减小了很是多。
2. 自动绑定和获取的方法还存在些不足，由于当前版本的实现只是基于string类型的。未考虑datetime，bool，int等类型。可是根据分离关注点的原则（或者依赖倒置原则），咱们一样能够将该部分逻辑分离出来，交给专门处理数据类型的类来处理。而后保持原有的逻辑不变。下来我会继续改进。
3. 该方法一样适用于表单数据的保存和绑定.
4. 心得体会：Less Code, Less Copy, More ReUseable, More Flexiable and More OO。