现在的位置: 首页 > 综合 > 正文

基于ckeditor实现自定义表单

2017年12月16日 ⁄ 综合 ⁄ 共 1171字 ⁄ 字号 评论关闭

最近公司的一个系统需要自定义表单,根据以往使用ckeditor的经验突发奇想,用ckeditor编写插件的方式实现了一个自定义表单系统。下面简单介绍一下表单设计器的设计思路。

表单设计器原理
表单智能设计器的设计思想是基于ckeditor富文本编辑器,开发HTML表单中需要使用的一些常用控件,然后借助于HTML解析器将表单中的控件代码解析成对应的HTML代码。之所以选择ckeditor作为底层,是因为它有很好的扩展性及比较稳定的性能、全面的API文档,并且可以方便的进行插件的开发。
功能简介
表单智能设计器主要是用来完成工作流表单自定义的设计的,用户可以在word文件中制作表单的布局,然后将制作好的布局拷贝到表单设计器中,再用表单设计器添加表单的控件。通过表单设计器用户可以根据需求自定义表单的内容和表单的布局,进而达到满足用户需求的经常性变动。

主界面截图:


表单的主要控件及功能如下:

单行输入框 实现html中的text

多行输入框 实现html中的textarea

下拉菜单 实现html中的select

单选按钮 实现html中的radio

复选框 实现html中的checkbox

列表控件 实现html中的table,并且表格的行可以自由的添加和删除,同时还提供表格中的列与数据库数据绑定的功能。

图太多了就补贴了,大笑

宏控件 实现html中的text或者select,但是值可以和后台程序关联达到数据的动态获取。宏控件的值的类型为:

日历控件 实现表单中日历的选取,可以定义选取日期的格式。

计算控件 在表单中实现对多个控件值的计算。可以支持的计算公式为:
计算公式支持+ - * / ^和英文括号以及特定计算函数,例如:(数值1+数值2)*数值3-ABS(数值4)其中数值1、数值2等为表单控件名称。
当前版本所支持的计算函数:
1、MAX(数值1,数值2,数值3...) 输出最大值,英文逗号分割;
2、MIN(数值1,数值2,数值3...) 输出最小值,英文逗号分割;
3、ABS(数值1) 输出绝对值;
4、MOD(数值1,数值2) 计算数值1和数值2的余数;
5、AVG(数值1,数值2,数值3) 输出平均值;
6、RMB(数值1) 输出人民币大写形式,数值范围0~9999999999.99;
7、DAY(日期1-日期2) 输出时间差的整数天数;
8、HOUR(日期1-日期2) 输出时间差的小时数;
9、DATE(日期1-日期2) 输出时间差,形如:xx天xx小时xx分xx秒;
10、LIST(列表控件名,第几列) 计算列表控件指定列的和;

数据选择控件 该控件一般与单行输入框控件结合使用,达到从数据库中选取数据并将数据回填到单行输入框的空间中。

表单解析

设计好的表单在保存时会将ckeditor的内容保存起来,在呈现给用户时将表单设计器特定的标签解析成对应的html表单元素,同时还要借助于js实现对应的功能

抱歉!评论已关闭.