Grid(前端)组件带单元格验证功能的CRUD功能扩展

写了蛮多篇关于java快速开发平台文章了，也欢迎感兴趣的你进入群【376447127】与我交流，今天写一个关于前端组件的扩展功能博文！我们在项目中常常会遇到这么一个问题：我们用一个前端Grid组件去展示我们应用业务数据，但同时我们向这个Grid组件添加数据（也就是向我们数据库添加数据），我们第一反应就是通过新增一个业务表单页面（可以通过表单设计器动态新建表单页面或者手工新建）来向数据库提交用户新增的数据。但是问题又来了，如果我们新增数据的表的字段很少，比如两个字段。那么这个时候我们专门为了向这个数据表新建一个表单页面这也未免太麻烦了；又或者我们为了减少新建表单工作量，我们是否又可以不通过新建表单页面的方式来新增、删除、保存、查询呢？我们不妨发散思维再想想：我们在常常在.NET的C/S架构的应用中看到，用户直接在Grid组件的单元格中直接编辑数据以及其他相关操作！那么在web前端Grid组件是否也可以如此呢？回答的是肯定的。那么我们需要的是能直接在Grid组件上直接操作功能！

         说了这么多，下面我就来简单扩展一下一个Grid组件的这项功能（Grid带单元格验证功能的CRUD功能扩展）,不仅仅只是带单元格验证功能而已（特定的前端组件本身就具备这样的功能，比如extjs,DHX等），我们还可以灵活的把Grid组件绑定于某个特定的数据库业务表。那么我们对这个grid组件的所有CRUD操作就相当于对这张业务表进行CRUD操作。这个过程可以省掉大部分的操作（这些冗余的工作有编写特定业务表的CRUD重复代码、根据业务表的字段新建表单业务、数据合法性验证工作等），在我扩展的这个grid组件功能中这些冗余的才做可以省略掉。这样功能的使用场景有比如业务系统的数据字典的数据的CRUD等。

        下面开始描述一下这个扩展组件的功能，下面就调整皮肤这项功能来说，如下样图：

在图中的Grid中单元格若干行数据中可随意编辑，如：

 

如果Grid单元列添加了非空验证，当在编辑数据，或者新增数据时，如果验证单元格列的值为空时，组件自动提示验证提示信息，如下图：

 

当然组件适应多样化的验证规则，可在组件库里面重写，自定义、灵活多变，比如：

 isValidEmail: function(value) {return !!value.match(/(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\-\.]*)(\.[a-z]{2,3})$)/i)},
 
 isValidInteger: function(value) {return !!value.match(/(^-?\d+$)/)},

下面开始简单描述一个新增、编辑、删除Grid数据的过程：

新增数据：（自动新增一条空行，便可以录入用户需要的数据）

 

编辑数据：（双击选中Grid组件单元格中已有数据，便可以变更单元中的数据）

 

新增数据与编辑数据同时进行：（既可以在新增数据的同时编辑已有数据）

 

当我们确定我们编辑好数据或者新增数据录入完成之后，点击保存即可，组件自动向服务端发送请求，将新增的行数据或者编辑的行数据持久化到特定的表中，而不是所有行数据，哪里数据变更了就更新哪里的数据，效率相当的快。保存之后提示：

 

Grid组件数据删除功能就是直接删除选中数据行即可，以上是这类组件的功能扩展！这思路希望对感兴趣的你有帮助。