activiti自定义流程之自定义表单（二）：创建表单

p 注：环境配置： a target= _blank href= http://blog.csdn.net/tuzongxun/article/details/51088050 activiti自定义流程之自定义表单（一）：环境配置 /a /p p br /p p 在上一节自定义表单环境搭建好以后，我就正式开始尝试自己创建表单，在后台的处理就比较常规，主要是针对ue

注：环境配置：activiti自定义流程之自定义表单（一）：环境配置

在上一节自定义表单环境搭建好以后，我就正式开始尝试自己创建表单，在后台的处理就比较常规，主要是针对ueditor插件的功能在前端进行修改。

由于自己的前端相关技术太渣，因此好多东西都不会用，导致修改实现的过程也是破费了一番功夫，头皮发麻了好几天。

既然是用别人的插件进行修改，那么我想如果只是单独的贴出我修改后的代码，可能没有前后进行对比好理解，因此这里就把原代码和修改后的同时对比着贴出，以便于朋友们能从对比中更快的得到启发。

一、首先是前台创建表单，原文件示例是所有代码直接都写在了index.html文件中，文件在文章最后：

我在修改的过程中感觉这个代码太长，貌似有点杂乱，因此就自作主张的把部分内容提取到了新建的js文件中，还有部分我觉得无关紧要的东西也进行了删除，然后我的index.html代码如下：

 !DOCTYPE HTML 

 html 

 head 

 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

 meta name="viewport" content="width=device-width, initial-scale=1.0" 

 meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 

 link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" / 

 link href="css/site.css?2023" rel="stylesheet" type="text/css" / 

 link href="my_css/a.css" rel="stylesheet" type="text/css" / 

 script type="text/javascript" 

 var _root=http://form/index.php?s=/,_controller = index;

 /script 

 /head 

 body 

 !-- fixed navbar -- 

 !-- Docs page layout -- 

 div 

 img src="images/activiti.png" / 

 li a href="#" 新增表单 /a /li 

 li | /li 

 li a href="#" 表单列表 /a /li 

 /ul 

 /div 

 div id="idv1" 

 div 

 /div 

 div id="formDiv" 


 div 

 form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html" 

 input type="hidden" name="fields" id="fields" value="0" 

 div 

 p 表单名称： input type="text" id="formType" /input /p 

 hr / 

 p 表单设计： /p 

 div 

 button type="button" 文本框 /button 

 button type="button" 多行文本 /button 

 button type="button" 下拉菜单 /button 

 button type="button" 单选框 /button 

 button type="button" 复选框 /button 

 button type="button" 列表控件 /button 

 !-- button type="button" form /button -- 


 /div !--end container-- 

 script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023" /script 

 !-- script start-- 

 script type="text/javascript" charset="utf-8" src="my_js/addForm.js" /script 

 !-- script end -- 

 div 

 script type="text/javascript" 

 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

 document.write(unescape("%3Cscript src=" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf type=text/javascript%3E%3C/script%3E"));

 /script 

 /div 


var leipiEditor = UE.getEditor(myFormDesign,{

 toolleipi:true,//是否显示，设计器的 toolbars

 textarea: design_content, 

 //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

 toolbars:[[

 //关闭字数统计

 wordCount:false,

 //关闭elementPath

 elementPathEnabled:false,

 //默认的编辑区域高度

 initialFrameHeight:300

 //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css

 //更多其他参数，请参考ueditor.config.js中的配置项


 //正则 radios|checkboxs|select 匹配的边界 |--| 因为当使用 {} 时js报错

 var preg = /(\|- span(((?! span).)*leipiplugins=\"(radios|checkboxs|select)\".*?) (.*?) \/span -\|| (img|input|textarea|select).*?( \/select | \/textarea |\/ ))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/ input.*?\/ 

 if(!fields) fields = 0;

 var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;

 var pno = 0;

 template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){

 var parse_attr = new Array(),attr_arr_all = new Object(),name = , select_dot =  , is_new=false;

 var p0 = plugin;

 var tag = p6 ? p6 : p4;

 //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);

 if(tag == radios || tag == checkboxs)

 plugin = p2;

 }else if(tag == select)

 plugin = plugin.replace(|-,);

 plugin = plugin.replace(-|,);

 plugin.replace(preg_attr, function(str0,attr,val) {

 if(attr==name)

 if(val==leipiNewField)

 is_new=true;

 fields++;

 val = data_+fields;

 name = val;

 if(tag==select attr==value)

 if(!attr_arr_all[attr]) attr_arr_all[attr] = ;

 attr_arr_all[attr] += select_dot + val;

 select_dot = ,;

 }else

 attr_arr_all[attr] = val;

 var oField = new Object();

 oField[attr] = val;

 parse_attr.push(oField);

 /*alert(JSON.stringify(parse_attr));return;*/

 if(tag ==checkboxs) /*复选组 多个字段 */

 plugin = p0;

 plugin = plugin.replace(|-,);

 plugin = plugin.replace(-|,);

 var name = checkboxs_+checkboxs;

 attr_arr_all[parse_name] = name;

 attr_arr_all[name] = ;

 attr_arr_all[value] = ;

 attr_arr_all[content] =  span leipiplugins="checkboxs" title="+attr_arr_all[title]+" 

 var dot_name =, dot_value = ;

 p5.replace(preg_group, function(parse_group) {

 var is_new=false,option = new Object();

 parse_group.replace(preg_attr, function(str0,k,val) {

 if(k==name)

 if(val==leipiNewField)

 is_new=true;

 fields++;

 val = data_+fields;


 if(!attr_arr_all[options]) attr_arr_all[options] = new Array();

 attr_arr_all[options].push(option);

 //if(!option[checked]) option[checked] = ;

 var checked = option[checked] !=undefined ? checked="checked" : ;

 attr_arr_all[content] += input type="checkbox" name="+option[name]+" value="+option[value]+" +checked+/ +option[value]+ ;


 template = template.replace(plugin,attr_arr_all[content]);

 template_parse = template_parse.replace(plugin,{+name+});

 template_parse = template_parse.replace({|-,);

 template_parse = template_parse.replace(-|},);

 template_data[pno] = attr_arr_all;

 checkboxs++;


 attr_arr_all[value] = ;

 attr_arr_all[content] =  span leipiplugins="radios" name="+attr_arr_all[name]+" title="+attr_arr_all[title]+" 

 var dot=;

 p5.replace(preg_group, function(parse_group) {

 var option = new Object();

 parse_group.replace(preg_attr, function(str0,k,val) {

 if(k==value)

 attr_arr_all[value] += dot + val;

 dot = ,;

 option[k] = val; 

 option[name] = attr_arr_all[name];

 if(!attr_arr_all[options]) attr_arr_all[options] = new Array();

 attr_arr_all[options].push(option);

 //if(!option[checked]) option[checked] = ;

 var checked = option[checked] !=undefined ? checked="checked" : ;

 attr_arr_all[content] += input type="radio" name="+attr_arr_all[name]+" value="+option[value]+" +checked+/ +option[value]+ ;


 template = template.replace(plugin,attr_arr_all[content]);

 template_parse = template_parse.replace(plugin,{+name+});

 template_parse = template_parse.replace({|-,);

 template_parse = template_parse.replace(-|},);

 if(is_new)

 var arr = new Object();

 arr[name] = name;

 arr[leipiplugins] = attr_arr_all[leipiplugins];

 add_fields[arr[name]] = arr;

 template_data[pno] = attr_arr_all; 

 pno++;

 var parse_form = new Object({

 fields:fields,//总字段数

 template:template,//完整html

 parse:template_parse,//控件替换为{data_1}的html

 data:template_data,//控件属性

 add_fields:add_fields//新增控件

 return JSON.stringify(parse_form);

 /*type = save 保存设计 versions 保存版本 close关闭 */

 fnCheckForm : function ( type ) {

 var formType=document.getElementById("formType").value;

 if(leipiEditor.queryCommandState( source ))

 leipiEditor.execCommand(source);//切换到编辑模式才提交，否则有bug 

 if(leipiEditor.hasContents()){

 leipiEditor.sync();/*同步内容*/

 //--------------以下仅参考-----------------------------------------------------------------------------------------------------

 var type_value=,formid=0,fields=$("#fields").val(),formeditor=;


 //contentType: application/json;charset=utf-8,

 data : {type : type_value,formid:formid,parse_form:parse_form,"formType":formType}, 

 success : function(data){

 alert("保存成功");

 window.location.href ="./my_views/formList.html";

 } else {

 alert(表单内容不能为空！)

 $(#submitbtn).button(reset);

 return false;

 /*预览表单*/

 fnReview : function (){

 if(leipiEditor.queryCommandState( source ))

 leipiEditor.execCommand(source);/*切换到编辑模式才提交，否则部分浏览器有bug*/

 if(leipiEditor.hasContents()){

 leipiEditor.sync(); /*同步内容*/

 //--------------以下仅参考-------------------------------------------------------------------

 /*设计form的target 然后提交至一个新的窗口进行预览*/

 var type_value=,formid=0,fields=$("#fields").val(),formeditor=;

 var formType=document.getElementById("formType").value;

 if( typeof type!==undefined ){

 type_value = type;

 //获取表单设计器里的内容

 formeditor=leipiEditor.getContent();

 //解析表单设计器控件

 var parse_form = this.parse_form(formeditor,fields);

 var forms=JSON.parse(parse_form);

 console.log(forms);

 console.log(typeof forms);

 console.log(forms.template);

 var forms1=forms.template;

 win_parse=window.open(,,width=800,height=400,alwaysRaised=yes,top=100,left=200);

 //win_parse=window.open(,mywin,"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");

 var str= div +forms1+ /div 

 win_parse.document.write(forms1);

 win_parse.focus(); 

 } else {

 alert(表单内容不能为空！);

 return false;

};

那么这里需要着重说明的就是js文件，在原文件中大家可以看到js也是写在html中的，最重要的是到了保存和预览的时候，都变了请用户自已处理：
alert("你点击了保存,这里可以异步提交，请自行处理....");
alert("你点击了预览,请自行处理....");

于是我在对插件封装的数据进行了一定分析后就自行解决了这两个问题，也就是主要修改的地方。


二、前台表单创建、预览完毕，要能实现以后都随时调用的功能，自然就需要存储到数据库中，前台似乎也能直接操作数据库，但是我本身是做后台的，因此就直接用了后台和数据库交互。

后太也分别创建了model实体类、控制层controller、接口service、接口实现类serviceImp。因为这次主要是实现前台功能，我就把重心放在了前台，所以后台没有dao层。
原本我是连service都不准备建立的，只是后来为了测试方便，还是建立了，因此各层看起来其实很混乱，该写在service的代码写在了controller，依次类推。
代码分别如下：


（1）、controller层，对前台传入的字符串进行了一定处理：

package formControllers;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import services.FormService;


 public Object addForm(HttpServletRequest request) {

 // String type_value = request.getParameter("type_value");

 // String formid = request.getParameter("formid");

 String parse_form = request.getParameter("parse_form");

 String formType = request.getParameter("formType");

 System.out.println(formType);

 int index1 = parse_form.indexOf("\"template\":");

 int index2 = parse_form.indexOf("\"parse\":");

 String string = parse_form.substring(index1 + 12, index2 - 6);

 string = string.replace("\\", "");

 string = string.replace("{", "");

 string = string.replace("}", "");

 string = string.replace("|", "");

 string = string.replace("-", "");

 formService.addForm(formType, string);

 return string;

（2）、service层存入数据库：

Service:

package services;

import java.util.Map;


 PreparedStatement ps = connection

 .prepareStatement("insert into formtest(formId,formType,form) values(?,?,?)");

 String formId = new Date().getTime() + "";

 ps.setString(1, formId);

 ps.setString(2, formType);

 ps.setString(3, string);

 ps.executeUpdate();

 connection.close();

 } catch (Exception e) {

 e.printStackTrace();

 return string;


 connection = DriverManager.getConnection(

 "jdbc:mysql://localhost:3306/formtest", "root", "123456");

 } catch (Exception e) {

 e.printStackTrace();

 return connection;

 }

/**链接数据库*/ p align="left" strong span public /span /strong Connection getDb() { /p p align="left"        Connection span connection /span = strong span null /span /strong /p p align="left"        strong span try /span /strong { /p p align="left"            Class. em forName /em ( span "com.mysql.jdbc.Driver" /span /p p align="left"            span connection /span = DriverManager. em getConnection /em ( /p p align="left"                   span "jdbc:mysql://localhost:3306/formtest" /span , span "root" /span , span "123456" /span /p p align="left"        } strong span catch /span /strong (Exception span e /span ) { /p p align="left"            span e /span .printStackTrace(); /p p align="left"        } /p p align="left"        strong span return /span /strong span connection /span /p p align="left"     } /p p align="left"  } /p 

Model实体：

package models;

public class FormModel {

 // type : type_value,formid:formid,parse_form:parse_form

 private String formId;

 private String type;

 private Integer formid;

 private String parse_form;

 private String formType;


 public String toString() {

 return "FormModel [formId=" + formId + ", type=" + type + ", formid="

 + formid + ", parse_form=" + parse_form + ", formType="

 + formType + "]";



页面效果如图：










原文index.html文件代码：



 !DOCTYPE HTML 

 html 

 head 

 title WEB表单设计器 Ueditor Formdesign Plugins -leipi.org /title 

 meta name="keyword" content="ueditor Formdesign plugins,formdesigner,ueditor扩展,web表单设计器,高级表单设计器,Leipi Form Design,web form设计器,web form designer,javascript jquery ueditor php表单设计器,formbuilder" 

 meta name="description" content="Ueditor Web Formdesign Plugins 扩展即WEB表单设计器扩展，它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用，你可以在此基础上任意修改使功能无限强大！" 


 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

 meta name="viewport" content="width=device-width, initial-scale=1.0" 

 meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 

 meta name="author" content="leipi.org" 

 link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" / 

 !--[if lte IE 6] 

 link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap-ie6.css?2023" 

 ![endif]-- 

 !--[if lte IE 7] 

 link rel="stylesheet" type="text/css" href="css/bootstrap/css/ie.css?2023" 

 ![endif]-- 

 link href="css/site.css?2023" rel="stylesheet" type="text/css" / 

 script type="text/javascript" 

 var _root=http://form/index.php?s=/,_controller = index;

 /script 

 !--style 

 .list-group-item{padding:0px;}

 /style-- 


 li a href="/" 表单设计器 /a /li 

 li a href="http://formdesign.leipi.org/doc.html" 文档 /a /li 

 li a href="http://formdesign.leipi.org/demo.html" 实例 /a /li 

 li a href="http://formdesign.leipi.org/downloads.html" 下载 /a /li 

 li a href="http://formdesign.leipi.org/feedback.html" 公开讨论 /a /li 

 /ul 

 /div 

 /div 

 /div 

 /div 


 h1 img src="js/ueditor/formdesign/images/leipi_formdesign.png" width="64"/ WEB表单设计器 small Ueditor1.4.2 + Formdesign4.1.x /small /h1 

 感谢大家使用，如有任何意见或建议，请务必告知， a href="#bs-footer" 免责声明 /a 。

 复制分享： input type="text" value="大家都在用雷劈网WEB表单设计器，你去官网看看 http://formdesign.leipi.org/" / 

 交流Q群： 143263697

 /div 

 /div 


 div 

 form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html" 

 input type="hidden" name="fields" id="fields" value="0" 

 div 


 button type="button" data-dismiss="alert" × /button 

 strong 提醒： /strong 单选框和复选框，如： code {|- /code 选项 code -|} /code 两边边界是防止误删除控件，程序会把它们替换为空，请不要手动删除！

 /div 


 li a href="javascript:void(0);" 文本框 /a /li 

 li a href="javascript:void(0);" 多行文本 /a /li 

 li a href="javascript:void(0);" 下拉菜单 /a /li 

 li a href="javascript:void(0);" 单选框 /a /li 

 li a href="javascript:void(0);" 复选框 /a /li 

 li a href="javascript:void(0);" 宏控件 /a /li 

 li a href="javascript:void(0);" 进度条 /a /li 

 li a href="javascript:void(0);" 二维码 /a /li 

 li a href="javascript:void(0);" 列表控件 /a /li 

 li a href="javascript:void(0);" 一起参与... /a /li 

 /ul 


 td valign="top" width="227" 

 input title="文本框" value="雷劈网" name="leipiNewField" orgheight="" orgwidth="150" orgalign="left" orgfontsize="" orghide="0" leipiplugins="text" orgtype="text"/ 

 /td 

 td valign="top" width="85" 

 下拉菜单

 /td 

 td valign="top" width="312" 

 {|- span leipiplugins="select" select name="leipiNewField" title="下拉菜单" leipiplugins="select" size="1" orgwidth="150" option value="下拉" 

 /option 

 option value="菜单" 

 /option /select    /span -|}

 /td 

 /tr 

 td valign="top" 

 /td 

 td valign="top" width="41" 

{|- span leipiplugins="radios" title="单选" name="leipiNewField" 

 input value="单选1" type="radio" checked="checked"/ 单选1 

 input value="单选2" type="radio"/ 单选2 

 /span -|}

 /td 

 td valign="top" width="85" 

 /td 

 td valign="top" width="312" 

 {|- span leipiplugins="checkboxs" title="复选" 

 input name="leipiNewField" value="复选1" type="checkbox" checked="checked"/ 复选1 

 input name="leipiNewField" value="复选2" type="checkbox" checked="checked"/ 复选2 

 input name="leipiNewField" value="复选3" type="checkbox"/ 复选3 

 /span -|}

 /td 

 /tr 

 td valign="top" 

 /td 

 td valign="top" width="41" 

 input name="leipiNewField" type="text" value="{macros}" title="宏控件" leipiplugins="macros" orgtype="sys_date_cn" orghide="0" orgfontsize="12" orgwidth="150" / 

 /td 

 td valign="top" width="85" 

 /td 

 td valign="top" width="312" 

 img name="leipiNewField" title="雷劈网" value="http://www.leipi.org" orgtype="url" leipiplugins="qrcode" src="js/ueditor/formdesign/images/qrcode.gif" orgwidth="40" orgheight="40" / 

 /td 

 /tr 

 /tbody 

 /table 

 input name="leipiNewField" leipiplugins="listctrl" type="text" value="{列表控件}" readonly="readonly" title="采购商品列表" orgtitle="商品名称`数量`单价`小计`描述`" orgcoltype="text`int`int`int`text`" orgunit="```元``" orgsum="0`0`0`1`0`" orgcolvalue="`````" orgwidth="100%" / 

 textarea title="多行文本" name="leipiNewField" leipiplugins="textarea" value="" orgrich="0" orgfontsize="12" orgwidth="600" orgheight="80" /textarea 

 img name="leipiNewField" title="进度条" leipiplugins="progressbar" orgvalue="20" orgsigntype="progress-info" src="js/ueditor/formdesign/images/progressbar.gif"/ 

 /script 

 /div 


 div 

 p span /span 免责声明：本站仅分享开发思路和示例代码并且乐于交流和促进网络良性发展，是非商业工具，如有疑问请加群或邮件告知，积极配合调整。 /p 

 p span /span 反馈：payonesmile@qq.com /p 

 p span /span 支持：捐赠支付宝 payonesmile@qq.com 、 a href="#" 捐赠记录 /a /p 

 p span /span 鸣谢： a href="http://ueditor.baidu.com" target="_balnk" UEditor /a 、 a href="https://github.com/twbs/bootstrap/" target="_balnk" Bootstrap /a 、 a href="http://www.leipi.org" target="_balnk" 雷劈网 /a /p 

 p a href="http://www.leipi.org" title="雷劈网" img src="http://www.leipi.org/wp-content/themes/leipi/images/leipi.png" alt="雷劈认证 icon" height="30" /a copy;2014 Ueditor Formdesign Plugins v4 leipi.org a href="http://www.miitbeian.gov.cn/" target="_blank" 粤ICP备13051130号 /a /p 

 /div 

 /div 


 script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023" /script 


 script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023" /script 

 script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023" /script 

 !-- script start-- 

 script type="text/javascript" 

var leipiEditor = UE.getEditor(myFormDesign,{

 //allowDivTransToP: false,//阻止转换div 为p

 toolleipi:true,//是否显示，设计器的 toolbars

 textarea: design_content, 

 //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

 toolbars:[[

 fullscreen, source, |, undo, redo, |,bold, italic, underline, fontborder, strikethrough, removeformat, |, forecolor, backcolor, insertorderedlist, insertunorderedlist,|, fontfamily, fontsize, |, indent, |, justifyleft, justifycenter, justifyright, justifyjustify, |, link, unlink, |, horizontal, spechars, wordimage, |, inserttable, deletetable, mergecells, splittocells]],

 //focus时自动清空初始化时的内容

 //autoClearinitialContent:true,

 //关闭字数统计

 wordCount:false,

 //关闭elementPath

 elementPathEnabled:false,

 //默认的编辑区域高度

 initialFrameHeight:300

 //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css

 //更多其他参数，请参考ueditor.config.js中的配置项


 //正则 radios|checkboxs|select 匹配的边界 |--| 因为当使用 {} 时js报错

 var preg = /(\|- span(((?! span).)*leipiplugins=\"(radios|checkboxs|select)\".*?) (.*?) \/span -\|| (img|input|textarea|select).*?( \/select | \/textarea |\/ ))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/ input.*?\/ 

 if(!fields) fields = 0;


 var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;


 template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){

 var parse_attr = new Array(),attr_arr_all = new Object(),name = , select_dot =  , is_new=false;

 var p0 = plugin;

 var tag = p6 ? p6 : p4;

 //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);


 if(!attr_arr_all[attr]) attr_arr_all[attr] = ;

 attr_arr_all[attr] += select_dot + val;

 select_dot = ,;

 }else

 attr_arr_all[attr] = val;

 var oField = new Object();

 oField[attr] = val;

 parse_attr.push(oField);

 /*alert(JSON.stringify(parse_attr));return;*/

 if(tag ==checkboxs) /*复选组 多个字段 */

 plugin = p0;

 plugin = plugin.replace(|-,);

 plugin = plugin.replace(-|,);

 var name = checkboxs_+checkboxs;

 attr_arr_all[parse_name] = name;

 attr_arr_all[name] = ;

 attr_arr_all[value] = ;

 attr_arr_all[content] =  span leipiplugins="checkboxs" title="+attr_arr_all[title]+" 

 var dot_name =, dot_value = ;

 p5.replace(preg_group, function(parse_group) {

 var is_new=false,option = new Object();

 parse_group.replace(preg_attr, function(str0,k,val) {

 if(k==name)

 if(val==leipiNewField)

 is_new=true;

 fields++;

 val = data_+fields;


 if(!attr_arr_all[options]) attr_arr_all[options] = new Array();

 attr_arr_all[options].push(option);

 //if(!option[checked]) option[checked] = ;

 var checked = option[checked] !=undefined ? checked="checked" : ;

 attr_arr_all[content] += input type="checkbox" name="+option[name]+" value="+option[value]+" +checked+/ +option[value]+ ;


 template = template.replace(plugin,attr_arr_all[content]);

 template_parse = template_parse.replace(plugin,{+name+});

 template_parse = template_parse.replace({|-,);

 template_parse = template_parse.replace(-|},);

 template_data[pno] = attr_arr_all;

 checkboxs++;


 attr_arr_all[value] = ;

 attr_arr_all[content] =  span leipiplugins="radios" name="+attr_arr_all[name]+" title="+attr_arr_all[title]+" 

 var dot=;

 p5.replace(preg_group, function(parse_group) {

 var option = new Object();

 parse_group.replace(preg_attr, function(str0,k,val) {

 if(k==value)

 attr_arr_all[value] += dot + val;

 dot = ,;

 option[k] = val; 

 option[name] = attr_arr_all[name];

 if(!attr_arr_all[options]) attr_arr_all[options] = new Array();

 attr_arr_all[options].push(option);

 //if(!option[checked]) option[checked] = ;

 var checked = option[checked] !=undefined ? checked="checked" : ;

 attr_arr_all[content] += input type="radio" name="+attr_arr_all[name]+" value="+option[value]+" +checked+/ +option[value]+ ;


 //attr_arr_all[tag] = tag;

 template = template.replace(plugin,attr_arr_all[content]);

 template_parse = template_parse.replace(plugin,{+name+});

 template_parse = template_parse.replace({|-,);

 template_parse = template_parse.replace(-|},);

 if(is_new)

 var arr = new Object();

 arr[name] = name;

 arr[leipiplugins] = attr_arr_all[leipiplugins];

 add_fields[arr[name]] = arr;

 template_data[pno] = attr_arr_all;


 /*type = save 保存设计 versions 保存版本 close关闭 */

 fnCheckForm : function ( type ) {

 if(leipiEditor.queryCommandState( source ))

 leipiEditor.execCommand(source);//切换到编辑模式才提交，否则有bug

 if(leipiEditor.hasContents()){

 leipiEditor.sync();/*同步内容*/

 alert("你点击了保存,这里可以异步提交，请自行处理....");

 return false;

 //--------------以下仅参考-----------------------------------------------------------------------------------------------------

 var type_value=,formid=0,fields=$("#fields").val(),formeditor=;


 //dataType : json,

 data : {type : type_value,formid:formid,parse_form:parse_form},

 success : function(data){

 if(confirm(查看js解析后，提交到服务器的数据，请临时允许弹窗))

 win_parse=window.open(,,width=800,height=600);

 //这里临时查看，所以替换一下，实际情况下不需要替换 

 data = data.replace(/ \/+textarea/, textarea);

 win_parse.document.write( textarea +data+ /textarea 

 win_parse.focus();

 if(data.success==1){

 alert(保存成功);

 $(#submitbtn).button(reset);

 }else{

 alert(保存失败！);

 } else {

 alert(表单内容不能为空！)

 $(#submitbtn).button(reset);

 return false;

 /*预览表单*/

 fnReview : function (){

 if(leipiEditor.queryCommandState( source ))

 leipiEditor.execCommand(source);/*切换到编辑模式才提交，否则部分浏览器有bug*/

 if(leipiEditor.hasContents()){

 leipiEditor.sync(); /*同步内容*/

 alert("你点击了预览,请自行处理....");

 return false;

 //--------------以下仅参考-------------------------------------------------------------------


 document.saveform.target="mywin";

 window.open(,mywin,"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");


 document.saveform.action="/index.php?s=/index/preview.html";

 document.saveform.submit(); //提交表单

 } else {

 alert(表单内容不能为空！);

 return false;


88 88 88 8P 88 88 ____ 

88aaaaa 88 8b,dPPYba, ,adPPYba, MM88MMM 88 8b d8 Y8, ,d88 88a8PPPP8b, 

88""""" 88 88P "Y8 a8P_____88 88 88 `8b d8 "PPPPPP"88 PP" `8b 

88 88 88 8PP""""""" 88 88 `8b d8 8P d8 

88 88 88 "8b, ,aa 88 88 `8b,d8 8b, a8P Y8a a8P 

88 88 88 `"Ybbd8" 88 88 Y88 `"Y8888P "Y88888P" 

 d8 

2014-3-15 Firefly95、Ard、xinG、Xiaoyaodaya d8 

 /div 

 div 

 script type="text/javascript" 

 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

 document.write(unescape("%3Cscript src=" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf type=text/javascript%3E%3C/script%3E"));

 /script 

 /div 

 /body 

 /html 








  Activiti新增的子流程 

 flowable和Activiti6新增了ad-hoc子流程（adHocSubProcess），即adHocSubProcess流程。该类型的子流程无需再子流程中为节点配置任何的出线：

操作方式如下：

runtimeService.


  Activiti自定义设计器 

 原文地址：www.shareniu.com/topic/content/40.htm

Activiti自定义设计器

在使用Activiti的时候，需要绘制流程文档，可以使用Activiti提供的Eclipse插件或者idea插件，抑或使用Web版的流程设计器，但是这些设计器不能很好的满足业务开发需求，因此通常情况下，在实现自己业务的同时，期望自己设计一套流程设计器，从而更加灵活的应对需求的变更和量身定制自己的Activiti设计器。


 p br /p 

 p 本来在创建了表单之后应该是表单列表和预览功能，但是我看了看整合的代码，和之前没有用angularjs的基本没有什么变化，一些极小的变动也只是基于angularjs的语法，因此完全可以参考之前说些的表单列表展示相关的内容，这里也就直接进入到下一个步骤，创建流程模型了。 /p 

 p   /p 

 p 在之前的创建流程模型一节里，我讲代码比较多，实际上在这里


 涂宗勋

 认真生活，快乐工作，保持理想！https://blog.csdn.net/tuzongxun