jquery表格动态增删改及取数据绑定数据完整方案

jquery表格动态增删改及取数据绑定数据完整方案

一 前言

　 上一篇 Jquery遮罩插件，想罩哪就罩哪！ 结尾的预告终于来了。

　　近期参与了一个针对内部员工个人信息收集的系统，其中有一个需求是在填写各个相关信息时，需要能动态的增加行当时公司有自己的解决方案 那就是用GridView 那个庞大的服务器控件，我一真就不怎么喜欢用服务器控件，于是极力说服PM用js来处理，并成功争取到了，先说下如果用GridView来处理的缺点，

1 生成的html代码会比较冗余，

2 每一个操作都会伴随页面回发，

3 每个操作都会刷新页面，这样的用户体验极差，就算用updatepanel也还是会有回发，

4 有点杀鸡用牛刀的感觉

那用js来处理以上的问题就都不存在了，重点是还能把js巩固一下(算是私心吧)，由于项目的时间非常紧，而且又转成用js处理又没有相关的经验，整个过程压力还是很大的，免不了加班，但是做自己喜欢的事，就算加班我也是乐在其中

二 插件介绍

基本需求如下：

1 可以动态增加 删除行，

2 可以对行内数据进行校验,并支持自定义校验提示信息

3 能取到表格中的数据

4 能绑定后台数据到表格中

当然这只是大概的需求，还有很多小的细节就不写了，也不是本文的重点。下面详细写下每个功能的具体思路，当然我的肯定不是最好的思路，代码也肯定可再优化。

前后端数据交互过程如下：

前---后

前端取数据--->隐藏域---->后端取隐藏域值解析并存DB

后---前

后端取数据---->隐藏域----> 前端取隐藏域值添加到表格中

先看下效果

View Code

2.3 验证行数据：

思路：遍历每行中的元素根据元素类型来做判空处理，如果为空则在元素后追加提示信息，如果元素需要自定义错误信息时可以给元素加一个errormsg属性

代码：

View Code

2.4 绑定数据

思路: 后台取到值后序列化成json后通过隐藏域传到前端，前端根据元素的name属性值与 Json串中的的key 做对比如果相等则赋值， 需要注意的是 所有的元素我都是用type属性来区分的 如果该元素没有type属性则需要自己加上 如 select 元素 需要加上 type='select'

代码:

View Code

以上都只是简单介绍思路，虽然写出来只有一点点，但是 当时在开发时在某些点却时想了很久，因为针对项目做了很多的特殊修改，所以这里只实现很基本的功能，代码也仅供参考，主要还是实现的思路

三 总结

　 项目在几天前已经上线了，用户的反应还不错，也算对得起自己的付出吧，当时承担着项目延期的风险，决定用js来做的理由很简单，只是想把用户体验做的好一点。

做完后想想，有时候我们应该对自己要求高一点，不要总活在自己的舒适区，有挑战才能有成长。

源码示例下载：http://files.cnblogs.com/zery/WebApplication1.rar

如果您觉得本文有给您带来一点收获，不妨点个推荐，为我的付出支持一下，谢谢~

如果希望在技术的道路上能有更多的朋友，那就关注下我吧，让我们一起在技术的路上奔跑

分类: JavaScript
标签: javascript