仅限阅读请勿传播
当您阅读本方案时，即表示您
同意不传播本方案的所有内容
流程表单HTML设计器
实现自定义控制表单元素的长度及其他常见需求实现案例
版本
目录
1.说明
难度：★★★☆☆
预计时间：1小时
涉及代码开发：有
目标需求：
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。
可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能
可以jQuery的方式进行适当改造。
知识点：
基本信息：
背景知识：
1、在阅读本教程之前,需具备html和JavaScript基本知识。
2、在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果：
●通过流程表单HTML设计器实现自定义控制表单元素的长度
●实现隐藏表单原始边框
●实现表单元素未输入内容时悬浮提醒的效果
●html签字节点格式调整（内容在左，署名在右）
●html签字节点按时间排序并调整格式
2.准备工作
1、准备一台和正式环境一致操作系统的服务器。
3.（推荐）实现自主设置表单元素的长度
将附件提供的上传到服务器的/css/width/目录下面。
css文件 .zip
3.1.支持PC端及手机端HMTL模式流程表单（单个流程）
1.在代码块中单个流程引入css样式文件
如（如图1）。
（图1）
2.在需要自主设置长度单元格式设置class 例如图2 里面的class w50 表示设置这个框子里面的input
长度为50px。如果设置为w100 则限制长度为100px，具体效果如图3
（图2）
（图3）
3.2.HMTL模式流程引入样式文件（一劳永逸）
1.新建流程界面流程引入css样式文件
需要修改ecology/workflow/request/文件。如（如图4）。
（图4）
2.查看及处理流程界面流程引入css样式文件需要
修改ecology/workflow/request/。如（如图4）。
（图5）
3.手机端流程界面流程引入css样式文件需要修改
ecology/mobile/plugin/1/。如（如图6）。
（图6）
4.实现隐藏表单元素表单边框的需求4.1.代码块
4.2.实现效果
例：原生页面
（图7）
开发修改后：
5.实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。
5.1.代码块
1.在代码块中插入代码
2.在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有
名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8 里面的class w50 表示设置这个输入框的提示内容为“请输入标题”，如图8。注：class名为holder，自定义属性名为data-holder，不可更改。具体效果如图9
（图8）
5.2.实现效果
例：原生界面
开发修改后：
（图9）
6.实现提交时校验身份证号码的需求
6.1.代码块
7.2.实现效果
例：原生界面
删除空的签字意见和一个换行符
删除空的签字意见和全部换行符
8.（推荐）多内容区域多节点签字意见排序8.1.多个签字节点按时间先后正序排序
1.将以下代码放在ecology\workflow\request\ （已办）和ecology\workflow\request\ （待办），文件中，
如下图：
2.