首页 > 代码库 > activiti自己定义流程之自己定义表单（二）：创建表单
activiti自己定义流程之自己定义表单（二）：创建表单
注：环境配置：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=http://www.mamicode.com/"css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />>2023"> </script>
<script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>>
2023"></script>
<!-- script start-->
<script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"my_js/addForm.js"></script>>
" https://" : " http://");
document.write(unescape("%3Cscript src=http://www.mamicode.com/'" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));>
相关的js文件命名为addForm.js例如以下：
function toAdd(){
window.location.href=http://www.mamicode.com/"./"; >!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?
(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?
|.+?
)\"/gi,preg_group =/<input.*?\/>/gi;
if(!fields) fields = 0;
var template_parse = template,template_data = http://www.mamicode.com/new Array(),add_fields=new Object(),checkboxs=0;>
'checked="checked"' : '';
attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value=http://www.mamicode.com/"'+option['value']+'" '+checked+'/>'+option['value']+' ';>
'checked="checked"' : '';
attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value=http://www.mamicode.com/"'+option['value']+'" '+checked+'/>'+option['value']+' ';>
');
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;
@Controller
public class FormController {
@Autowired
FormService formService;
@RequestMapping(value = http://www.mamicode.com/"/addForm.do", method = RequestMethod.POST)>
（2）、service层存入数据库：
Service:
package services;
import java.util.Map;
public interface FormService {
public Object addForm(String formType, String string);
}
serviceImp代码:package servicesImp;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Service;
import services.FormService;
@Service("FormService")
public class FormServiceImp implements FormService {
/**
* 新增表单
*
* @author：tuzongxun
* @Title: addForm
* @Description: TODO
* @param @param formType
* @param @param string
* @param @return
* @date Mar 28, 2016 4:30:18 PM
* @throws
*/
public Object addForm(String formType, String string) {
System.out.println(string);
try {
Connection connection = this.getDb();
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;
}
public Connection getDb() {
Connection connection = null;
try {
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/formtest", "root", "123456");
} catch (Exception e) {
e.printStackTrace();
}
return connection;
}
/**链接数据库*/<p align="left"><strong><span style="color:#7F0055;">public</span></strong> Connection getDb() {</p><p align="left"> Connection <span style="color:#6A3E3E;">connection</span> = <strong><span style="color:#7F0055;">null</span></strong>;</p><p align="left"> <strong><span style="color:#7F0055;">try</span></strong> {</p><p align="left"> Class.<em>forName</em>(<span style="color:#2A00FF;">"com.mysql.jdbc.Driver"</span>);</p><p align="left"> <span style="color:#6A3E3E;">connection</span> = DriverManager.<em>getConnection</em>(</p><p align="left"> <span style="color:#2A00FF;">"jdbc:mysql://localhost:3306/formtest"</span>, <span style="color:#2A00FF;">"root"</span>, <span style="color:#2A00FF;">"123456"</span>);</p><p align="left"> } <strong><span style="color:#7F0055;">catch</span></strong> (Exception <span style="color:#6A3E3E;">e</span>) {</p><p align="left"> <span style="color:#6A3E3E;">e</span>.printStackTrace();</p><p align="left"> }</p><p align="left"> <strong><span style="color:#7F0055;">return</span></strong> <span style="color:#6A3E3E;">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 getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public int getFormid() {
return formid;
}
public String getParse_form() {
return parse_form;
}
public void setFormid(Integer formid) {
this.formid = formid;
}
public void setParse_form(String parse_form) {
this.parse_form = parse_form;
}
public String getFormType() {
return formType;
}
public void setFormType(String formType) {
this.formType = formType;
}
public String getFormId() {
return formId;
}
public void setFormId(String formId) {
this.formId = formId;
}
@Override
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=http://www.mamicode.com/"css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/bootstrap/css/bootstrap-ie6.css?2023">>
<p>
复制分享：<input type="text" value="大家都在用雷劈网WEB表单设计器，你去官网看看 http://formdesign.leipi.org/" style="width:80%" onclick="this.select()"/>
</p>
交流Q群： 143263697
</p>
</div>
</div>
<div class="container">
<form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
<input type="hidden" name="fields" id="fields" value="0">
<div class="row">
<div class="well well-small">
<span class="pull-right">
<a href="http://formdesign.leipi.org/demo.html" class="btn btn-success btn-small">使用实例演示</a>
</span>
<p>
一栏布局：<br /><br />
<button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
<button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
<button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
<button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
<button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>
<button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info">宏控件</button>
<button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info">进度条</button>
<button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info">二维码</button>
<button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
<button type="button" onclick="leipiFormDesign.exec('more');" class="btn btn-primary">一起參与...</button>
</p>
</div>
</div>
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>提醒：</strong>单选框和复选框，如：<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件，程序会把它们替换为空，请不要手动删除！
</div>
<div class="row">
<div class="span2">
<ul class="nav nav-list">
<li class="nav-header">两栏布局</li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');" class="btn btn-link">文本框</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('textarea');" class="btn btn-link">多行文本</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('select');" class="btn btn-link">下拉菜单</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('radios');" class="btn btn-link">单选框</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-link">复选框</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('macros');" class="btn btn-link">宏控件</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-link">进度条</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-link">二维码</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-link">列表控件</a></li>
<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('more');" class="btn btn-link">一起參与...</a></li>
</ul>
</div>
<div class="span10">
<script id="myFormDesign" type="text/plain" style="width:100%;">
<p style="text-align: center;">
<br/>
</p>
<p style="text-align: center;">
<span style="font-size: 24px;">演示样例表</span>
</p>
<table class="table table-bordered">
<tbody>
<tr class="firstRow">
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
文本框
</td>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="227">
<input style="text-align: left; width: 150px;" title="文本框" value="雷劈网" name="leipiNewField" orgheight="" orgwidth="150" orgalign="left" orgfontsize="" orghide="0" leipiplugins="text" orgtype="text"/>
</td>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
下拉菜单
</td>
<td valign="top" style="border-color: rgb(221, 221, 221);" width="312">
{|-<span leipiplugins="select"><select name="leipiNewField" title="下拉菜单" leipiplugins="select" size="1" orgwidth="150" style="width: 150px;"><option value="下拉">
下拉
</option>
<option value="菜单">
菜单
</option></select> </span>-|}
</td>
</tr>
<tr>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
单选
</td>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" 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" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
复选
</td>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" 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>
<tr>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
宏控件
</td>
<td valign="top" style="border-color: rgb(221, 221, 221);" width="41">
<input name="leipiNewField" type="text" value="{macros}" title="宏控件" leipiplugins="macros" orgtype="sys_date_cn" orghide="0" orgfontsize="12" orgwidth="150" style="font-size: 12px; width: 150px;"/>
</td>
<td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
二维码
</td>
<td valign="top" style="border-color: rgb(221, 221, 221);" 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" style="width: 40px; height: 40px;"/>
</td>
</tr>
</tbody>
</table>
<p>
<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%" style="width: 100%;"/>
</p>
<p>
<textarea title="多行文本" name="leipiNewField" leipiplugins="textarea" value="" orgrich="0" orgfontsize="12" orgwidth="600" orgheight="80" style="font-size:12px;width:600px;height:80px;"></textarea>
</p>
<p>
<img name="leipiNewField" title="进度条" leipiplugins="progressbar" orgvalue="20" orgsigntype="progress-info" src="js/ueditor/formdesign/images/progressbar.gif"/>
</p>
</script>
</div>
</div><!--end row-->
</form>
</div><!--end container-->
<div class="bs-footer" role="contentinfo" id="bs-footer">
<div class="container">
<p><span class="glyphicon glyphicon-list-alt"></span> 免责声明：本站仅分享开发思路和演示样例代码而且乐于交流和促进网络良性发展。是非商业工具。如有疑问请加群或邮件告知，积极配合调整。</p>
<p><span class="glyphicon glyphicon-list-alt"></span> 反馈：payonesmile@qq.com</p>
<p><span class="glyphicon glyphicon-usd"></span> 支持：捐赠支付宝 payonesmile@qq.com 、<a href="#">捐赠记录</a></p>
<p><span class="glyphicon glyphicon-bookmark"></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> ©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=http://www.mamicode.com/"js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>>
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中的配置项
});
var leipiFormDesign = {
/*运行控件*/
exec : function (method) {
leipiEditor.execCommand(method);
},
/*
Javascript 解析表单
template 表单设计器里的Html内容
fields 字段总数
*/
parse_form:function(template,fields)
{
//正则 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.*?\/>/gi;
if(!fields) fields = 0;
var template_parse = template,template_data = http://www.mamicode.com/new Array(),add_fields=new Object(),checkboxs=0;>
');
}*/
}
});
} 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;
//--------------下面仅參考-------------------------------------------------------------------
/*设计form的target 然后提交至一个新的窗体进行预览*/
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;
}
}
};
</script>
<!-- script end -->
<!-这个div已经被我删除-?
<div style="display: none;">
88888888888 88 ad88 88 ad88888ba 8888888888
88 "" d8" 88 d8" "88 88
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 style="width:1px;height:1px">
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src=http://www.mamicode.com/'" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));>
activiti自己定义流程之自己定义表单（二）：创建表单