基于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。

转载于:https://www.cnblogs.com/xingluzhe/p/4781354.html