写了蛮多篇关于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组件数据删除功能就是直接删除选中数据行即可,以上是这类组件的功能扩展!这思路希望对感兴趣的你有帮助。
分享到:
相关推荐
基于ssm的旅游后台管理系统,使用AdminLTE 前端框架,实现基本的CRUD功能 基于ssm的旅游后台管理系统,使用AdminLTE 前端框架,实现基本的CRUD功能 基于ssm的旅游后台管理系统,使用AdminLTE 前端框架,实现基本的...
基于ssm的旅游后台管理系统源码+项目说明(使用AdminLTE 前端框架,实现基本的CRUD功能).zip 基于ssm的旅游后台管理系统源码+项目说明(使用AdminLTE 前端框架,实现基本的CRUD功能).zip 基于ssm的旅游后台管理...
05实现mybatis简单crud功能demo05实现mybatis简单crud功能demo05实现mybatis简单crud功能demo05实现mybatis简单crud功能demo05实现mybatis简单crud功能demo05实现mybatis简单crud功能demo05实现mybatis简单crud功能...
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
PhpGrid 是用于快速开发网站后台,管理系统(ERP,OA,CRM等)的PHP开发类库(工具) ....内置表单验证功能 代码模块化设计 很容易的集成Fckeditor 容易扩展,当框架无法满足您复杂的业务需求时,您可以轻松的扩展该框架
PHP Grid 提供专业外观的 HTML 表格组件功能,提供了基于 Ajax 的编辑、创建、更新和删除操作。支持跨浏览器的即时编辑,支持所有的表单组件,集成搜索工具栏,支持图片显示,导出数据到 HTML 和 Excel ;支持权限...
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
是自己写的简单的异步CRDU 项目,我本人也是一个菜鸟,当时什么都不会,自己写异步写了半天,现在自己写出来了,供新手学习,里面有ajax异步页面, 以及传智封装的分页
extjs4 前端mvc模式 货物处理的crud
Grocery CRUD是一个PHP Codeigniter框架库,可以创建一个完整的功能CRUD系统,而无需对JavaScripts或CSS进行额外的自定义
Hibernate+Spring+Struts2+ExtJS开发CRUD功能
CRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rarCRUD.rar
SpringBoot+Mybatis+前端页面 CRUD 整合案例 ,Controller+ Service Mapper +Pojo 四层结构 +前端页面。 逻辑代码全部调通, 非常适合初学者或者快速开发CRUD的兄弟。
每个单元格可以包含另一个敲除组件,例如DateTimePicker,Drop-Down和任何其他可重用组件 ... 我将在单页应用程序环境中介绍SLGrid组件在CRUD操作中的用法。 这些网格功能对于具有许多不同表和关系的任何站点的...
带有验证实验室的CRUD 在本实验中,您的目标是为一个模型Song创建一个完整的CRUD接口。 歌曲 歌曲具有以下属性和限制: title , string 不能空白 不能由同一位艺术家在同一年重复 released ,一个boolean描述...
(ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术) GT-Grid 的主要 特性: Ajax实现 (翻页,数据的crud 基于ajax技术) 固定表头和工具栏 自定义复杂表头 可调整列宽: ...
这里基于SSH框架,前面介绍了用户管理的CRUD,这里是在用户管理的CRUD基础上,添加课程管理的CRUD的示例,其它类似的功能可以采用同样的方法,具体教程可以参考...