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="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 style="margin:0">
<!-- fixed navbar -->
<!-- Docs page layout -->
<div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">
<img src="images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>
<ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 30px; width:60%;overflow:hidden;float:left">
<li><a href="#" onclick="toAdd();">新增表单</a></li>
<li> | </li>
<li><a href="#" onclick="formList();">表单列表</a></li>
</ul>
</div>
<div id="idv1" style="width:100%;position: absolute;height:auto">
<div style="width:70px;height:550px;position:relative;float:left;border:1px solid blue;background-color:#ccf"> </div>
<div id="formDiv" style="width:89%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;"> <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 style="width:98%;height:510px;margin-top:20px;border:3px solid grey">
<p style="margin-top:10px;font-size:30px" >表单名称：<input type="text" id="formType"></input></p>
<hr style="height:5px;border:none;border-top:5px ridge green;"/>
<p style="margin-top:10px;font-size:30px" >表单设计：</p>
<div >
<p style="left:30px">
<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('listctrl');" class="btn btn-info">列表控件</button>
<!-- <button type="button" onclick="leipiFormDesign.findForm();" class="btn btn-info">form</button>-->
</p> </div>
<!-- afsddddddddd -->
<div >
<script id="myFormDesign" type="text/plain" style="width:99.8%;">
</script>
</div>
</div>
<!-- afsddddddddd -->
<div class="row"> </div><!--end row-->
</form>
</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 style="width:1px;height:1px">
<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> </div>
</div>
</body>
</html>
相关的js文件命名为addForm.js例如以下：
function toAdd(){
window.location.href="./";
};
function formList(){
window.location.href="my_views/formList.html";
};
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中的配置项
});
var leipiFormDesign = {
findForm : function(){
window.location.href="my_views/formList.html";
},
/*运行控件*/
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 = 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;
}
attr_arr_all['name'] += dot_name + val;
dot_name = ',';
}
else if(k=='value')
{
attr_arr_all['value'] += dot_value + val;
dot_value = ',';
}
option[k] = val;
});
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']+' ';
if(is_new)
{
var arr = new Object();
arr['name'] = option['name'];
arr['leipiplugins'] = attr_arr_all['leipiplugins'];
add_fields[option['name']] = arr;
}
});
attr_arr_all['content'] += '</span>';
//parse
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++;
}else if(name)
{
if(tag =='radios') /*单选组 一个字段*/
{
plugin = p0;
plugin = plugin.replace('|-','');
plugin = plugin.replace('-|','');
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['content'] += '</span>';
}else
{
attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
}
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='';
if( typeof type!=='undefined' ){
type_value = type;
}
console.log(document.getElementById("formType"));
//获取表单设计器里的内容
formeditor=leipiEditor.getContent();
//解析表单设计器控件
var parse_form = this.parse_form(formeditor,fields);
//异步提交数据
$.ajax({
type: 'POST',
url : '/webFormTest/addForm.do',
dataType : 'html',
async:false,
//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 style="width:500px;height:300px;border:1px solid grey">'+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; @Controller
public class FormController {
@Autowired
FormService formService; @RequestMapping(value = "/addForm.do", method = RequestMethod.POST)
@ResponseBody
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; 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="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--> </head>
<body> <!-- fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.leipi.org" target="_blank">雷劈网</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><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> <!-- Docs page layout -->
<div class="bs-header" id="content">
<div class="container"> <h1><img src="js/ueditor/formdesign/images/leipi_formdesign.png" width="64"/>WEB表单设计器 <small>Ueditor1.4.2 + Formdesign4.1.x</small></h1>
<p>
感谢大家使用。如有不论什么意见或建议，请务必告知，<a href="#bs-footer">免责声明</a>。 <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="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中的配置项
}); 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 = 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;
} attr_arr_all['name'] += dot_name + val;
dot_name = ','; }
else if(k=='value')
{
attr_arr_all['value'] += dot_value + val;
dot_value = ','; }
option[k] = val;
}); 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']+' '; if(is_new)
{
var arr = new Object();
arr['name'] = option['name'];
arr['leipiplugins'] = attr_arr_all['leipiplugins'];
add_fields[option['name']] = arr; } });
attr_arr_all['content'] += '</span>'; //parse
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++; }else if(name)
{
if(tag =='radios') /*单选组 一个字段*/
{
plugin = p0;
plugin = plugin.replace('|-','');
plugin = plugin.replace('-|','');
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['content'] += '</span>'; }else
{
attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
}
//attr_arr_all['itemid'] = fields;
//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; }
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 ) {
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=''; if( typeof type!=='undefined' ){
type_value = type;
}
//获取表单设计器里的内容
formeditor=leipiEditor.getContent();
//解析表单设计器控件
var parse_form = this.parse_form(formeditor,fields);
//alert(parse_form); //异步提交数据
$.ajax({
type: 'POST',
url : '/index.php?s=/index/parse.html',
//dataType : 'json',
data : {'type' : type_value,'formid':formid,'parse_form':parse_form},
success : function(data){
if(confirm('查看js解析后，提交到server的数据。请暂时同意弹窗'))
{
win_parse=window.open('','','width=800,height=600');
//这里暂时查看，所以替换一下。实际情况下不须要替换
data = data.replace(/<\/+textarea/,'<textarea');
win_parse.document.write('<textarea style="width:100%;height:100%">'+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;
//--------------下面仅參考------------------------------------------------------------------- /*设计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='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>
</html>
activiti自己定义流程之自己定义表单（二）：创建表单的更多相关文章
- （转载）根据数据字典表定义的表结构,生成创建表的SQL语句
<来源网址:http://www.delphifans.com/infoview/Article_221.html>根据数据字典表定义的表结构,生成创建表的SQL语句 //1． 类名:T ...
- linux 进阶2--C++读取lua文件中的变量、一维表、二维表
lua 语言非常灵活,一般把lua 作为脚本文件,会用C++与之进行交互.最重要的是C++代码能读取到脚本中的变量.一维表.二维表. 这样有些参数就可以在lua文件进行更改,而不用重新更改C++代码. ...
- Excel：一维表和二维表 互转
一.一维表转二维表 数据源: 一份流水账式的值班表,为了便于打印张贴,现在需要使其变成这样的样式: 也就是从一维表变成传说中的二维表. 1.新建查询 依次单击[数据]→[新建查询] →[从文件]→[从 ...
- activiti自己定义流程之自己定义表单（一）：环境配置
先补充说一下自己定义流程整个的思路,自己定义流程的目的就是为了让一套代码解决多种业务流程.比方请假单.报销单.採购单.协作单等等.用户自己来设计流程图. 这里要涉及到这样几个基本问题,一是不同的业务需 ...
- sqlserver数据库导出表结构和表数据生成创建表和insert语句
问题描述: 有时候我们只需要导出一张表和表数据到另外一个数据库,如果是备份整个库的话,就会很麻烦那样,没法满足需求. 解决方法: 以sqlserver2014为例:把MGActivity数据库的bat ...
- Oracle查看表空间，创建表空间
查看表空间: SELECT tablespace_name, file_id, file_name, round(bytes / (1024 * 1024), 0) total_space FROM ...
- 【SQL模板】二.创建表视图模板TSQL
---Name: 创建表视图模板.sql ---Purpose: 用于创建 数据库中 新的数据表/视图 ---Author: xx ---Time: 2015-12-18 10:26:06 ---Re ...
- Laravel 表单验证创建“表单请求”实现自定义请求类
按照文档创建表单请求自定义类以后,调用总是403页面,咨询大佬说: public function authorize() { // 在表单验证类的这个方法这里要返回true,默认返回false,这个 ...
- 09 ORM 多表操作，创建表，添加记录
1.数据库表关系 1.一对多 为什么需要,重复字段太多 一对多关系表 Book id title price publish_id 1 python 100 1 2 php 200 2 3 go 10 ...
随机推荐
- 输入3个数a,b,c，按大小顺序输出。
题目:输入3个数a,b,c,按大小顺序输出. 思路: 根据最简单的, 经典的C语言算法, 两两相互交换得到他们的顺序 public class 第三十四题abc三个数大小排序 { public sta ...
- golang 解析json 动态数组
#cat file { "Bangalore_City": "35_Temperature", "NewYork_City": " ...
- Maven实战读书笔记（三）：Maven依赖
3.1 依赖的配置 一个依赖声明可以包含下面元素: <dependencies> <dependency> <groupId></groupId> &l ...
- ie8兼容性
ie8下不支持css的nth-child()样式解决方法一:使用jQuery的nth-child()方法例:$(".ability-head-list ul li:nth-child(1) ...
- 大页(Huge Page)简单介绍
x86(包括x86-32和x86-64)架构的CPU默认使用4KB大小的内存页面(getconf PAGESIZE),但是它们也支持较大的内存页,如x86-64系统就支持2MB大小的大页(huge p ...
- Linux系统中使用lftp命令实现FTP上传下载
Linux 下常用的操作命令有 ftp. lftp 和 sftp,图形化界面非常好用的有 FileZilla.不过在服务器命令界面中,lftp使用比较方便,功能也比ftp更加强大.lftp的界面很像L ...
- Servlet+JSP教程之：第一个Web程序
我们知道当浏览器发送请求给服务器后,服务器会调用并执行对应的逻辑代码进行请求处理.逻辑代 码是由程序员自己编写然后放进服务器进行运行,其实就是Servlet程序. 第一个Web程序: 开发工具: My ...
- OpenSSH高级功能之端口转发（Port Forwarding）
在RedHat提供的系统管理员指南中提到OpenSSH不止是一个安全shell,它还具有X11转发(X11 Forwarding)和端口转发(Port Forwarding)的功能.X11功能一般用于 ...
- struts2拦截器加自定义注解实现权限控制
https://blog.csdn.net/paul342/article/details/51436565 今天结合Java的Annotation和Struts2进行注解拦截器权限控制. 功能需求: ...
- zoj 2947 Abbreviation
Abbreviation Time Limit: 2 Seconds Memory Limit: 65536 KB When a Little White meets another Lit ...