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> 反馈：[email protected]</p>
<p><span class="glyphicon glyphicon-usd"></span> 支持：捐赠支付宝 [email protected] 、<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解析后，提交到服务器的数据，请临时允许弹窗'))
{
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>