一、Miniui表单的概述
Miniui是一套基于jquery中比较优秀的前端框架,本人在不少项目上用过EXTJS,EasyUI,QUI等。对于一些UI团队不怎么强的软件公司或开发团队,在项目开发过程中,没有好的UI工程师配合,开发出来的项目或产品均面临一个界面不友好,前端代码开发混乱,重构成本高,后续维护成本高等问题,这使得产品更迭一段时间就夭折情况成为普遍现象。Miniui的前端代码写得非常简洁,对开发人员要求也低,甚至者只需要能写前端Html及EL的工程师即可。它有以下优点:
1. 代码简洁
2. API丰富
3. 相对Eextjs,Js库体积小
4. 组件丰富
5. 与其他jquery插件结合使用容易
Miniui目前是商业版本,需要购买授权费用。官方网www.miniui.com
二、如何实现Miniui在线表单的设计
在实现miniui的表单设计之前,我们先说明一下miniui的表单展示的模式:
1. 浏览器下载Mini ui的元素配置(html)
2. 加载miniui的js库及css
3. 替换原来的页面配置中的miniui的元素配置,并且生成miniui的控件对象并加载数据进行渲染。
如下代码,可渲染出以下功能:
<input id="select2" class="mini-treeselect" url="../data/listTree.txt" multiSelect="false" valueFromSelect="false" textField="text" valueField="id" parentField="pid" value="control" allowInput="true" showRadioButton="true" showFolderCheckBox="false"
渲染后的效果:
因此只需要在线设计工具类,设计及生成以上的html代码,再交给miniui进行渲染即可。
目前市场上流行的富文本编辑器均都在线生成Html,如Ckeditor,Ueditor等,但效果做得比较好并且文档比较完善的是Uditor,毕竟有百度的开发人员在维护及开发。
那么如何实现在Uditor上自定义控件?以下以生成一个下拉控件为例,首先看如何生成
首先为控件提供属性配置页面,如下:
通过该页面生成以下html代码片段,然后插入至编辑器对应的Html源码中,预览其结果即如下:
生成的html代码:
<input name="reqHoliday" class="mini-combobox" plugins="mini-combobox" style="" label="下拦类型" required="true" pagesize="10" value="出差" mwidth="0" mheight="0" data="[{'key':'休假','name':'休假'},{'key':'出差','name':'出差'},{'key':'请假','name':'请假'}]" textfield="name" valuefield="key"/>
以上Input的属性就是在编辑器的属性中生成出来的,如何实现在ueditor中自定义表单控件,请参考前一篇博文,http://redxun.iteye.com/blog/2238211
目前JSAAS平台中支持的已经支持多种MINIUI控件,如下:
预览的效果:
后续更多的其他控件的扩展,之前的博客进行扩展即可。
三、Miniui表单的数据存储
生成业务表单后,其数据存储是需要特别处理的,这在miniui中已经有好的解决办法,就是采用Json的数据存储,要求我们每个控件都需要有一个标识键,调用miniui的表单时,即可以通过form.getData()即可以拿到有效的json值。
Json的属性值可转成元数据,作为流程引擎中的变量使用,以支持后续的流程引擎表单、外部接口的调用等。
另外需要说明一下,流程在很多情况下若不需要展示的表单时,可通过Json对象映射到业务实体中,然后把该业务实体关联至流程实例中进行任务跳转即可。
四、在流程引擎中挂接的流程表单
流程引擎中需要用到的表单主要是在人工任务节点上,因此我们提出以下几点的审批配置处理:
1.流程定义中全局表业务表单,以使得用户可以不需要每个任务设置相同的表单
2.人工任务上可以设置单独的业务表单
业务表单主要是挂接在流程节点上,以方便展示,因此我们的表的设计如下所示:
在界面的配置方式如下:
表单绑定后,在任务审批过程中如:
具体的实现效果请参考流以下:
http://www.redxun.cn:8020/saweb/login.jsp
相关推荐
本代码,技术为springboot activiti 工作流引擎技术,人员可以动态设置自定义流程,后台生成流程图并且部署流程,
springboot+activiti+bootstrap+angular 整合自定义流程设计,带数据库文件,适合初学者,以及需要深入研究的码农
基于Activiti流程监控的毕业设计管理系统.zip个人毕设-基于Activiti流程监控的毕业设计管理系统.zip个人毕设-基于Activiti流程监控的毕业设计管理系统.zip个人毕设-基于Activiti流程监控的毕业设计管理系统.zip个人...
activiti6.0实现流程图片自定义颜色 当前任务为红色,走过的任务为绿色,自定义文字颜色连线文字显示
1、基于Activiti流程监控的毕业设计管理系统源码+项目说明.zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料...
基于Activiti流程监控的毕业设计管理系统基于Activiti流程监控的毕业设计管理系统基于Activiti流程监控的毕业设计管理系统基于Activiti流程监控的毕业设计管理系统基于Activiti流程监控的毕业设计管理系统
忙活了一个星期左右,查找各种资料,终于将Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运行,只需要改一下数据库...
基于Activiti流程监控的毕业设计管理系统.zip 基于Activiti流程监控的毕业设计管理系统.zip 基于Activiti流程监控的毕业设计管理系统.zip 基于Activiti流程监控的毕业设计管理系统.zip
activiti在线流程图设计整合,springboot+activiti流程设计
activiti外置表单demo实现 运行方式: 1,修改连接的数据库 2,初始化用户,初始化脚本在src/resources目录下 3,访问地址http://localhost:8080/activitiDemo 4,登录后,需要部署流程才可以使用,流程文件在...
结合例子简单介绍了Activiti的内置表单和外置表单
activiti流程图查看demo
activiti三种表单的demo实现 运行方式: 1,修改连接的数据库 2,sql文件在resources\sql下 3,访问地址http://localhost:8080/activiti-demo/main/index
基于Activiti流程监控的毕业设计管理系统
Activiti 作为一个遵从 Apache 许可的工作流和业务流程管理开源平台,其核心是基于Java的超快速、超稳定的 BPMN2.0 流程引擎,强调流程服务的可嵌入性和可扩展性,同时更加强调面向业务人员。 Activiti 流程引擎...
毕业设计-基于Activiti流程监控的毕业设计管理系统.zip
重写流程图生产代码,需要枪原来的图片生产代码复写,原版的颜色生产不支付传入颜色参数,重写之后支持自定义颜色参数!用于区分流程状态
毕业设计&课设--基于Activiti流程监控的毕业设计管理系统