java表格优化插件_deform: 动态表单,基于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变)。致敬雷劈网.http://formdesign.leipi.org/...

注意注意 VUE版本得动态表单已开始发布(计划9月初推到npm仓库),此jquery版本的项目早已不再维护,请大家移步:

预览github: github

预览gitee镜像: gitee

基于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变)。致敬雷劈网. http://formdesign.leipi.org/

解析全部由java处理,时间紧迫,代码实现上不考虑太多的效率问题。原有控件部分已经屏蔽,如果大家感兴趣可以联系我一起加进来,另外如果控件有需要新增也可以联系本人(jjxliu306@163.com)。

最新修改:

目前 radio,select,checkbox均支持ajax从后台获取数据进行列表组合。

数据表两个:

drop table if exists form;

-- 自定义的工单

create table form(

form_idint auto_increment primary key ,

form_name varchar(255),

template text, -- 页面编辑好的原始html

html text , -- 反解析出来的页面html代码(设计到定义的select lictrl等控件要解析出展示代码)

data text, -- 自定义的各个控件字段的jsonarray格式存储

parse text ,

fields integer,

crtime timestamp,

modify_time timestamp

);

drop table if exists entry;

-- 保存各个工单填写的记录

create table entry(

idint auto_increment primary key ,

form_idint , -- 填写的动态工单ID

valuetext, -- 实际为json格式,存储此次填写的动态表单数据

crtime timestamp ,

modify_timetimestamp

);

动态表单绘制完毕后由后台解析并存储到数据库,后续每次发起的工单通过form中的html在页面进行绘制。工单填写完毕通过页面将form表单内容jsonobject之后交由后台验证并保存。

以下是目前此项目的一些截图。

1、动态表单新增

c4f03524045f8eff5843930d785a3cd0.png

2、动态表单预浏览

82e7a881e963bb085901627643f41263.png

3、填写已设置动态表单的工单

f05fc5a8feba7cdc27a23c993290200f.png

4、工单浏览查看(readonly)

8ed1b0cf512d68851d0378bff609523d.png

功能实现:

雷劈网动态表单中原有的字段大部分均添加了一些修改,譬如非空(notnull),将name和title区分开,增加select,radios,checkbox选项的数据从填写的url中通过ajax获取等。详细如下:

1、 针对text,textarea,select,checkboxs,listctrl,datepicker(自增控件)添加notnull非空选项,勾选此选项后,后续数据输入均会在后端进行非空验证(针对text中int,email等类型也会进行格式验证).

2、 listctrl屏蔽单位、合计、默认值,但增加每个列字段的非空验证选项(针对字段的int类型也会验证)。

3、 对所有控件中name和title区分出来,其中name主要用来后续表单存储结果中作为key,title用来后续表单验证中进行提示使用。

4、 select,radios,checkbox控件中选项数据均通过配置url从后台获取数据显示。

各个控件编辑图如下:

text:

d501b19889678428f5d8dd3b2e02f5e5.png

textarea:

e1d88351ac1cc54c49e37be446f06c56.png

radio:

9dfe1c4dcb1ee2adf431d5003bb7a0d6.png

checkboxs:

bdda5052fd6a1fc28aca233f42af65c5.png

select:

6f82bc15d20875c941b83461f76a8d70.png

datepicker:

ff96a65a1ff3d869a85c9e7929532afe.png

listctrl

f0f187d6e2f53b0e74c987c9fc4bbc13.png

最后来几张示例项目的全图:

10af16240a0fa43e68cfb9d436ab0125.png

efde5d5c02e88b564aceb8f3855628ca.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值