注:环境配置:activiti自定义流程之自定义表单(一):环境配置

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

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

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

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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
  8. <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
  9. <link href="my_css/a.css" rel="stylesheet" type="text/css" />
  10. <script type="text/<a href="http://lib.csdn.net/base/18" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">javascript</a>">
  11. var _root='http://form/index.php?s=/',_controller = 'index';
  12. </script>
  13. </head>
  14. <body style="margin:0">
  15. <!-- fixed navbar -->
  16. <!-- Docs page layout -->
  17. <div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">
  18. <img src="data:images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>
  19. <ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 30px; width:60%;overflow:hidden;float:left">
  20. <li><a href="#" onclick="toAdd();">新增表单</a></li>
  21. <li> | </li>
  22. <li><a href="#" onclick="formList();">表单列表</a></li>
  23. </ul>
  24. </div>
  25. <div id="idv1" style="width:100%;position: absolute;height:auto">
  26. <div style="width:70px;height:550px;position:relative;float:left;border:1px solid blue;background-color:#ccf">
  27. </div>
  28. <div id="formDiv" style="width:89%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">
  29. <div class="<a href="http://lib.csdn.net/base/4" class="replace_word" title="Docker知识库" target="_blank" style="color:#df3434; font-weight:bold;">container</a>">
  30. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
  31. <input type="hidden" name="fields" id="fields" value="0">
  32. <div style="width:98%;height:510px;margin-top:20px;border:3px solid grey">
  33. <p style="margin-top:10px;font-size:30px" >表单名称:<input type="text" id="formType"></input></p>
  34. <hr style="height:5px;border:none;border-top:5px ridge green;"/>
  35. <p style="margin-top:10px;font-size:30px" >表单设计:</p>
  36. <div >
  37. <p style="left:30px">
  38. <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
  39. <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
  40. <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
  41. <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
  42. <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>
  43. <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
  44. <!--   <button type="button" onclick="leipiFormDesign.findForm();" class="btn btn-info">form</button>-->
  45. </p>
  46. </div>
  47. <!-- afsddddddddd -->
  48. <div >
  49. <script id="myFormDesign" type="text/plain" style="width:99.8%;">
  50. </script>
  51. </div>
  52. </div>
  53. <!-- afsddddddddd -->
  54. <div class="row">
  55. </div><!--end row-->
  56. </form>
  57. </div><!--end container-->
  58. <script type="text/javascript" charset="utf-8" src="js/<a href="http://lib.csdn.net/base/22" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jquery</a>-1.7.2.min.js?2023"></script>
  59. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023"></script>
  60. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023"> </script>
  61. <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
  62. <script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
  63. <!-- script start-->
  64. <script type="text/javascript" charset="utf-8" src="my_js/addForm.js"></script>
  65. <!-- script end -->
  66. <div style="width:1px;height:1px">
  67. <script type="text/javascript">
  68. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  69. document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));
  70. </script>
  71. </div>
  72. </div>
  73. </div>
  74. </body>
  75. </html>

相关的js文件命名为addForm.js如下:

  1. function toAdd(){
  2. window.location.href="./";
  3. };
  4. function formList(){
  5. window.location.href="my_views/formList.html";
  6. };
  7. var leipiEditor = UE.getEditor('myFormDesign',{
  8. toolleipi:true,//是否显示,设计器的 toolbars
  9. textarea: 'design_content',
  10. //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
  11. toolbars:[[
  12. ]],
  13. //关闭字数统计
  14. wordCount:false,
  15. //关闭elementPath
  16. elementPathEnabled:false,
  17. //默认的编辑区域高度
  18. initialFrameHeight:300
  19. //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css
  20. //更多其他参数,请参考ueditor.config.js中的配置项
  21. });
  22. var leipiFormDesign = {
  23. findForm : function(){
  24. window.location.href="my_views/formList.html";
  25. },
  26. /*执行控件*/
  27. exec : function (method) {
  28. leipiEditor.execCommand(method);
  29. },
  30. /*
  31. Javascript 解析表单
  32. template 表单设计器里的Html内容
  33. fields 字段总数
  34. */
  35. parse_form:function(template,fields)
  36. {
  37. //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错
  38. var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;
  39. if(!fields) fields = 0;
  40. var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
  41. var pno = 0;
  42. template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
  43. var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;
  44. var p0 = plugin;
  45. var tag = p6 ? p6 : p4;
  46. //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
  47. if(tag == 'radios' || tag == 'checkboxs')
  48. {
  49. plugin = p2;
  50. }else if(tag == 'select')
  51. {
  52. plugin = plugin.replace('|-','');
  53. plugin = plugin.replace('-|','');
  54. }
  55. plugin.replace(preg_attr, function(str0,attr,val) {
  56. if(attr=='name')
  57. {
  58. if(val=='leipiNewField')
  59. {
  60. is_new=true;
  61. fields++;
  62. val = 'data_'+fields;
  63. }
  64. name = val;
  65. }
  66. if(tag=='select' && attr=='value')
  67. {
  68. if(!attr_arr_all[attr]) attr_arr_all[attr] = '';
  69. attr_arr_all[attr] += select_dot + val;
  70. select_dot = ',';
  71. }else
  72. {
  73. attr_arr_all[attr] = val;
  74. }
  75. var oField = new Object();
  76. oField[attr] = val;
  77. parse_attr.push(oField);
  78. })
  79. /*alert(JSON.stringify(parse_attr));return;*/
  80. if(tag =='checkboxs') /*复选组  多个字段 */
  81. {
  82. plugin = p0;
  83. plugin = plugin.replace('|-','');
  84. plugin = plugin.replace('-|','');
  85. var name = 'checkboxs_'+checkboxs;
  86. attr_arr_all['parse_name'] = name;
  87. attr_arr_all['name'] = '';
  88. attr_arr_all['value'] = '';
  89. attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';
  90. var dot_name ='', dot_value = '';
  91. p5.replace(preg_group, function(parse_group) {
  92. var is_new=false,option = new Object();
  93. parse_group.replace(preg_attr, function(str0,k,val) {
  94. if(k=='name')
  95. {
  96. if(val=='leipiNewField')
  97. {
  98. is_new=true;
  99. fields++;
  100. val = 'data_'+fields;
  101. }
  102. attr_arr_all['name'] += dot_name + val;
  103. dot_name = ',';
  104. }
  105. else if(k=='value')
  106. {
  107. attr_arr_all['value'] += dot_value + val;
  108. dot_value = ',';
  109. }
  110. option[k] = val;
  111. });
  112. if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
  113. attr_arr_all['options'].push(option);
  114. //if(!option['checked']) option['checked'] = '';
  115. var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
  116. attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
  117. if(is_new)
  118. {
  119. var arr = new Object();
  120. arr['name'] = option['name'];
  121. arr['leipiplugins'] = attr_arr_all['leipiplugins'];
  122. add_fields[option['name']] = arr;
  123. }
  124. });
  125. attr_arr_all['content'] += '</span>';
  126. //parse
  127. template = template.replace(plugin,attr_arr_all['content']);
  128. template_parse = template_parse.replace(plugin,'{'+name+'}');
  129. template_parse = template_parse.replace('{|-','');
  130. template_parse = template_parse.replace('-|}','');
  131. template_data[pno] = attr_arr_all;
  132. checkboxs++;
  133. }else if(name)
  134. {
  135. if(tag =='radios') /*单选组  一个字段*/
  136. {
  137. plugin = p0;
  138. plugin = plugin.replace('|-','');
  139. plugin = plugin.replace('-|','');
  140. attr_arr_all['value'] = '';
  141. attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';
  142. var dot='';
  143. p5.replace(preg_group, function(parse_group) {
  144. var option = new Object();
  145. parse_group.replace(preg_attr, function(str0,k,val) {
  146. if(k=='value')
  147. {
  148. attr_arr_all['value'] += dot + val;
  149. dot = ',';
  150. }
  151. option[k] = val;
  152. });
  153. option['name'] = attr_arr_all['name'];
  154. if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
  155. attr_arr_all['options'].push(option);
  156. //if(!option['checked']) option['checked'] = '';
  157. var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
  158. attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
  159. });
  160. attr_arr_all['content'] += '</span>';
  161. }else
  162. {
  163. attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
  164. }
  165. template = template.replace(plugin,attr_arr_all['content']);
  166. template_parse = template_parse.replace(plugin,'{'+name+'}');
  167. template_parse = template_parse.replace('{|-','');
  168. template_parse = template_parse.replace('-|}','');
  169. if(is_new)
  170. {
  171. var arr = new Object();
  172. arr['name'] = name;
  173. arr['leipiplugins'] = attr_arr_all['leipiplugins'];
  174. add_fields[arr['name']] = arr;
  175. }
  176. template_data[pno] = attr_arr_all;
  177. }
  178. pno++;
  179. })
  180. var parse_form = new Object({
  181. 'fields':fields,//总字段数
  182. 'template':template,//完整html
  183. 'parse':template_parse,//控件替换为{data_1}的html
  184. 'data':template_data,//控件属性
  185. 'add_fields':add_fields//新增控件
  186. });
  187. return JSON.stringify(parse_form);
  188. },
  189. /*type  =  save 保存设计 versions 保存版本  close关闭 */
  190. fnCheckForm : function ( type ) {
  191. var formType=document.getElementById("formType").value;
  192. if(leipiEditor.queryCommandState( 'source' ))
  193. leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug
  194. if(leipiEditor.hasContents()){
  195. leipiEditor.sync();/*同步内容*/
  196. //--------------以下仅参考-----------------------------------------------------------------------------------------------------
  197. var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
  198. if( typeof type!=='undefined' ){
  199. type_value = type;
  200. }
  201. console.log(document.getElementById("formType"));
  202. //获取表单设计器里的内容
  203. formeditor=leipiEditor.getContent();
  204. //解析表单设计器控件
  205. var parse_form = this.parse_form(formeditor,fields);
  206. //异步提交数据
  207. $.ajax({
  208. type: 'POST',
  209. url : '/webFormTest/addForm.do',
  210. dataType : 'html',
  211. async:false,
  212. //contentType: 'application/json;charset=utf-8',
  213. data : {'type' : type_value,'formid':formid,'parse_form':parse_form,"formType":formType},
  214. success : function(data){
  215. alert("保存成功");
  216. window.location.href ="./my_views/formList.html";
  217. }
  218. });
  219. } else {
  220. alert('表单内容不能为空!')
  221. $('#submitbtn').button('reset');
  222. return false;
  223. }
  224. } ,
  225. /*预览表单*/
  226. fnReview : function (){
  227. if(leipiEditor.queryCommandState( 'source' ))
  228. leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/
  229. if(leipiEditor.hasContents()){
  230. leipiEditor.sync();       /*同步内容*/
  231. //--------------以下仅参考-------------------------------------------------------------------
  232. /*设计form的target 然后提交至一个新的窗口进行预览*/
  233. var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
  234. var formType=document.getElementById("formType").value;
  235. if( typeof type!=='undefined' ){
  236. type_value = type;
  237. }
  238. //获取表单设计器里的内容
  239. formeditor=leipiEditor.getContent();
  240. //解析表单设计器控件
  241. var parse_form = this.parse_form(formeditor,fields);
  242. var forms=JSON.parse(parse_form);
  243. console.log(forms);
  244. console.log(typeof forms);
  245. console.log(forms.template);
  246. var forms1=forms.template;
  247. win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');
  248. //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) + "\"");
  249. var str='<div style="width:500px;height:300px;border:1px solid grey">'+forms1+'</div>';
  250. win_parse.document.write(forms1);
  251. win_parse.focus();
  252. } else {
  253. alert('表单内容不能为空!');
  254. return false;
  255. }
  256. }
  257. };

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

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

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

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

(1)、controller层,对前台传入的字符串进行了一定处理:

  1. package formControllers;
  2. import <a href="http://lib.csdn.net/base/17" class="replace_word" title="Java EE知识库" target="_blank" style="color:#df3434; font-weight:bold;">java</a>.util.Map;
  3. import javax.servlet.http.HttpServletRequest;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RequestMethod;
  8. import org.springframework.web.bind.annotation.ResponseBody;
  9. import services.FormService;
  10. @Controller
  11. public class FormController {
  12. @Autowired
  13. FormService formService;
  14. @RequestMapping(value = "/addForm.do", method = RequestMethod.POST)
  15. @ResponseBody
  16. public Object addForm(HttpServletRequest request) {
  17. // String type_value = request.getParameter("type_value");
  18. // String formid = request.getParameter("formid");
  19. String parse_form = request.getParameter("parse_form");
  20. String formType = request.getParameter("formType");
  21. System.out.println(formType);
  22. int index1 = parse_form.indexOf("\"template\":");
  23. int index2 = parse_form.indexOf("\"parse\":");
  24. String string = parse_form.substring(index1 + 12, index2 - 6);
  25. string = string.replace("\\", "");
  26. string = string.replace("{", "");
  27. string = string.replace("}", "");
  28. string = string.replace("|", "");
  29. string = string.replace("-", "");
  30. formService.addForm(formType, string);
  31. return string;
  32. }
  33. }

(2)、service层存入数据库:

  1. Service:
  2. package services;
  3. import java.util.Map;
  4. public interface FormService {
  5. public Object addForm(String formType, String string);
  6. }

serviceImp代码:

  1. package servicesImp;
  2. import java.sql.Connection;
  3. import java.sql.DriverManager;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.Statement;
  7. import java.util.ArrayList;
  8. import java.util.Date;
  9. import java.util.HashMap;
  10. import java.util.Map;
  11. import org.springframework.stereotype.Service;
  12. import services.FormService;
  13. @Service("FormService")
  14. public class FormServiceImp implements FormService {
  15. /**
  16. * 新增表单
  17. *
  18. * @author:tuzongxun
  19. * @Title: addForm
  20. * @Description: TODO
  21. * @param @param formType
  22. * @param @param string
  23. * @param @return
  24. * @date Mar 28, 2016 4:30:18 PM
  25. * @throws
  26. */
  27. public Object addForm(String formType, String string) {
  28. System.out.println(string);
  29. try {
  30. Connection connection = this.getDb();
  31. PreparedStatement ps = connection
  32. .prepareStatement("insert into  formtest(formId,formType,form) values(?,?,?)");
  33. String formId = new Date().getTime() + "";
  34. ps.setString(1, formId);
  35. ps.setString(2, formType);
  36. ps.setString(3, string);
  37. ps.executeUpdate();
  38. connection.close();
  39. } catch (Exception e) {
  40. e.printStackTrace();
  41. }
  42. return string;
  43. }
  44. public Connection getDb() {
  45. Connection connection = null;
  46. try {
  47. Class.forName("com.<a href="http://lib.csdn.net/base/14" class="replace_word" title="MySQL知识库" target="_blank" style="color:#df3434; font-weight:bold;">mysql</a>.jdbc.Driver");
  48. connection = DriverManager.getConnection(
  49. "jdbc:mysql://localhost:3306/formtest", "root", "123456");
  50. } catch (Exception e) {
  51. e.printStackTrace();
  52. }
  53. return connection;
  54. }
  1. /**链接数据库*/<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实体:

  1. package models;
  2. public class FormModel {
  3. // 'type' : type_value,'formid':formid,'parse_form':parse_form
  4. private String formId;
  5. private String type;
  6. private Integer formid;
  7. private String parse_form;
  8. private String formType;
  9. public String getType() {
  10. return type;
  11. }
  12. public void setType(String type) {
  13. this.type = type;
  14. }
  15. public int getFormid() {
  16. return formid;
  17. }
  18. public String getParse_form() {
  19. return parse_form;
  20. }
  21. public void setFormid(Integer formid) {
  22. this.formid = formid;
  23. }
  24. public void setParse_form(String parse_form) {
  25. this.parse_form = parse_form;
  26. }
  27. public String getFormType() {
  28. return formType;
  29. }
  30. public void setFormType(String formType) {
  31. this.formType = formType;
  32. }
  33. public String getFormId() {
  34. return formId;
  35. }
  36. public void setFormId(String formId) {
  37. this.formId = formId;
  38. }
  39. @Override
  40. public String toString() {
  41. return "FormModel [formId=" + formId + ", type=" + type + ", formid="
  42. + formid + ", parse_form=" + parse_form + ", formType="
  43. + formType + "]";
  44. }
  45. }

页面效果如图:

原文index.html文件代码:

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <title>WEB表单设计器 Ueditor Formdesign Plugins -leipi.org</title>
    5. <meta name="keyword" content="ueditor Formdesign plugins,formdesigner,ueditor扩展,web表单设计器,高级表单设计器,Leipi Form Design,web form设计器,web form designer,javascript jquery ueditor php表单设计器,formbuilder">
    6. <meta name="description" content="Ueditor Web Formdesign Plugins 扩展即WEB表单设计器扩展,它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用,你可以在此基础上任意修改使功能无限强大!">
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    10. <meta name="author" content="leipi.org">
    11. <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
    12. <!--[if lte IE 6]>
    13. <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap-ie6.css?2023">
    14. <![endif]-->
    15. <!--[if lte IE 7]>
    16. <link rel="stylesheet" type="text/css" href="css/bootstrap/css/ie.css?2023">
    17. <![endif]-->
    18. <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
    19. <script type="text/javascript">
    20. var _root='http://form/index.php?s=/',_controller = 'index';
    21. </script>
    22. <!--style>
    23. .list-group-item{padding:0px;}
    24. </style-->
    25. </head>
    26. <body>
    27. <!-- fixed navbar -->
    28. <div class="navbar navbar-inverse navbar-fixed-top">
    29. <div class="navbar-inner">
    30. <div class="container">
    31. <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    32. <span class="icon-bar"></span>
    33. <span class="icon-bar"></span>
    34. <span class="icon-bar"></span>
    35. </button>
    36. <a class="brand" href="http://www.leipi.org" target="_blank">雷劈网</a>
    37. <div class="nav-collapse collapse">
    38. <ul class="nav">
    39. <li class="active"><a href="/">表单设计器</a></li>
    40. <li ><a href="http://formdesign.leipi.org/doc.html">文档</a></li>
    41. <li ><a href="http://formdesign.leipi.org/demo.html">实例</a></li>
    42. <li ><a href="http://formdesign.leipi.org/downloads.html">下载</a></li>
    43. <li ><a href="http://formdesign.leipi.org/feedback.html">公开讨论</a></li>
    44. </ul>
    45. </div>
    46. </div>
    47. </div>
    48. </div>
    49. <!-- Docs page layout -->
    50. <div class="bs-header" id="content">
    51. <div class="container">
    52. <h1><img src="js/ueditor/formdesign/images/leipi_formdesign.png" width="64"/>WEB表单设计器 <small>Ueditor1.4.2 + Formdesign4.1.x</small></h1>
    53. <p>
    54. 感谢大家使用,如有任何意见或建议,请务必告知,<a href="#bs-footer">免责声明</a>。
    55. <p>
    56. 复制分享:<input type="text" value="大家都在用雷劈网WEB表单设计器,你去官网看看 http://formdesign.leipi.org/" style="width:80%" onclick="this.select()"/>
    57. </p>
    58. 交流Q群: 143263697
    59. </p>
    60. </div>
    61. </div>
    62. <div class="container">
    63. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
    64. <input type="hidden" name="fields" id="fields" value="0">
    65. <div class="row">
    66. <div class="well well-small">
    67. <span class="pull-right">
    68. <a href="http://formdesign.leipi.org/demo.html" class="btn btn-success btn-small">使用实例演示</a>
    69. </span>
    70. <p>
    71. 一栏布局:<br /><br />
    72. <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
    73. <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
    74. <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
    75. <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
    76. <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>
    77. <button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info">宏控件</button>
    78. <button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info">进度条</button>
    79. <button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info">二维码</button>
    80. <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
    81. <button type="button" onclick="leipiFormDesign.exec('more');" class="btn btn-primary">一起参与...</button>
    82. </p>
    83. </div>
    84. </div>
    85. <div class="alert">
    86. <button type="button" class="close" data-dismiss="alert">×</button>
    87. <strong>提醒:</strong>单选框和复选框,如:<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件,程序会把它们替换为空,请不要手动删除!
    88. </div>
    89. <div class="row">
    90. <div class="span2">
    91. <ul class="nav nav-list">
    92. <li class="nav-header">两栏布局</li>
    93. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');" class="btn btn-link">文本框</a></li>
    94. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('textarea');" class="btn btn-link">多行文本</a></li>
    95. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('select');" class="btn btn-link">下拉菜单</a></li>
    96. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('radios');" class="btn btn-link">单选框</a></li>
    97. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-link">复选框</a></li>
    98. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('macros');" class="btn btn-link">宏控件</a></li>
    99. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-link">进度条</a></li>
    100. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-link">二维码</a></li>
    101. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-link">列表控件</a></li>
    102. <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('more');" class="btn btn-link">一起参与...</a></li>
    103. </ul>
    104. </div>
    105. <div class="span10">
    106. <script id="myFormDesign" type="text/plain" style="width:100%;">
    107. <p style="text-align: center;">
    108. <br/>
    109. </p>
    110. <p style="text-align: center;">
    111. <span style="font-size: 24px;">示例表</span>
    112. </p>
    113. <table class="table table-bordered">
    114. <tbody>
    115. <tr class="firstRow">
    116. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
    117. 文本框
    118. </td>
    119. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="227">
    120. <input style="text-align: left; width: 150px;" title="文本框" value="雷劈网" name="leipiNewField" orgheight="" orgwidth="150" orgalign="left" orgfontsize="" orghide="0" leipiplugins="text" orgtype="text"/>
    121. </td>
    122. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
    123. 下拉菜单
    124. </td>
    125. <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">
    126. {|-<span leipiplugins="select"><select name="leipiNewField" title="下拉菜单" leipiplugins="select" size="1" orgwidth="150" style="width: 150px;"><option value="下拉">
    127. 下拉
    128. </option>
    129. <option value="菜单">
    130. 菜单
    131. </option></select>  </span>-|}
    132. </td>
    133. </tr>
    134. <tr>
    135. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
    136. 单选
    137. </td>
    138. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="41">
    139. {|-<span leipiplugins="radios"  title="单选" name="leipiNewField">
    140. <input  value="单选1"   type="radio" checked="checked"/>单选1
    141. <input  value="单选2"  type="radio"/>单选2
    142. </span>-|}
    143. </td>
    144. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
    145. 复选
    146. </td>
    147. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="312">
    148. {|-<span leipiplugins="checkboxs" title="复选">
    149. <input name="leipiNewField" value="复选1"  type="checkbox" checked="checked"/>复选1
    150. <input name="leipiNewField" value="复选2"  type="checkbox" checked="checked"/>复选2
    151. <input name="leipiNewField" value="复选3"  type="checkbox"/>复选3
    152. </span>-|}
    153. </td>
    154. </tr>
    155. <tr>
    156. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
    157. 宏控件
    158. </td>
    159. <td valign="top" style="border-color: rgb(221, 221, 221);" width="41">
    160. <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;"/>
    161. </td>
    162. <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
    163. 二维码
    164. </td>
    165. <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">
    166. <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;"/>
    167. </td>
    168. </tr>
    169. </tbody>
    170. </table>
    171. <p>
    172. <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%;"/>
    173. </p>
    174. <p>
    175. <textarea title="多行文本" name="leipiNewField" leipiplugins="textarea" value="" orgrich="0" orgfontsize="12" orgwidth="600" orgheight="80" style="font-size:12px;width:600px;height:80px;"></textarea>
    176. </p>
    177. <p>
    178. <img name="leipiNewField" title="进度条" leipiplugins="progressbar" orgvalue="20" orgsigntype="progress-info" src="js/ueditor/formdesign/images/progressbar.gif"/>
    179. </p>
    180. </script>
    181. </div>
    182. </div><!--end row-->
    183. </form>
    184. </div><!--end container-->
    185. <div class="bs-footer" role="contentinfo" id="bs-footer">
    186. <div class="container">
    187. <p><span class="glyphicon glyphicon-list-alt"></span> 免责声明:本站仅分享开发思路和示例代码并且乐于交流和促进网络良性发展,是非商业工具,如有疑问请加群或邮件告知,积极配合调整。</p>
    188. <p><span class="glyphicon glyphicon-list-alt"></span> 反馈:payonesmile@qq.com</p>
    189. <p><span class="glyphicon glyphicon-usd"></span> 支持:捐赠支付宝 payonesmile@qq.com 、<a href="#">捐赠记录</a></p>
    190. <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>
    191. <p><a href="http://www.leipi.org" title="雷劈网"><img src="http://www.leipi.org/wp-content/themes/leipi/images/leipi.png" alt="雷劈认证 icon" height="30"></a> &copy;2014 Ueditor Formdesign Plugins v4 leipi.org <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备13051130号</a></p>
    192. </div>
    193. </div>
    194. <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023"></script>
    195. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023"></script>
    196. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023"> </script>
    197. <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
    198. <script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
    199. <!-- script start-->
    200. <script type="text/javascript">
    201. var leipiEditor = UE.getEditor('myFormDesign',{
    202. //allowDivTransToP: false,//阻止转换div 为p
    203. toolleipi:true,//是否显示,设计器的 toolbars
    204. textarea: 'design_content',
    205. //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    206. toolbars:[[
    207. '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']],
    208. //focus时自动清空初始化时的内容
    209. //autoClearinitialContent:true,
    210. //关闭字数统计
    211. wordCount:false,
    212. //关闭elementPath
    213. elementPathEnabled:false,
    214. //默认的编辑区域高度
    215. initialFrameHeight:300
    216. //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css
    217. //更多其他参数,请参考ueditor.config.js中的配置项
    218. });
    219. var leipiFormDesign = {
    220. /*执行控件*/
    221. exec : function (method) {
    222. leipiEditor.execCommand(method);
    223. },
    224. /*
    225. Javascript 解析表单
    226. template 表单设计器里的Html内容
    227. fields 字段总数
    228. */
    229. parse_form:function(template,fields)
    230. {
    231. //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错
    232. var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;
    233. if(!fields) fields = 0;
    234. var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
    235. var pno = 0;
    236. template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
    237. var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;
    238. var p0 = plugin;
    239. var tag = p6 ? p6 : p4;
    240. //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
    241. if(tag == 'radios' || tag == 'checkboxs')
    242. {
    243. plugin = p2;
    244. }else if(tag == 'select')
    245. {
    246. plugin = plugin.replace('|-','');
    247. plugin = plugin.replace('-|','');
    248. }
    249. plugin.replace(preg_attr, function(str0,attr,val) {
    250. if(attr=='name')
    251. {
    252. if(val=='leipiNewField')
    253. {
    254. is_new=true;
    255. fields++;
    256. val = 'data_'+fields;
    257. }
    258. name = val;
    259. }
    260. if(tag=='select' && attr=='value')
    261. {
    262. if(!attr_arr_all[attr]) attr_arr_all[attr] = '';
    263. attr_arr_all[attr] += select_dot + val;
    264. select_dot = ',';
    265. }else
    266. {
    267. attr_arr_all[attr] = val;
    268. }
    269. var oField = new Object();
    270. oField[attr] = val;
    271. parse_attr.push(oField);
    272. })
    273. /*alert(JSON.stringify(parse_attr));return;*/
    274. if(tag =='checkboxs') /*复选组  多个字段 */
    275. {
    276. plugin = p0;
    277. plugin = plugin.replace('|-','');
    278. plugin = plugin.replace('-|','');
    279. var name = 'checkboxs_'+checkboxs;
    280. attr_arr_all['parse_name'] = name;
    281. attr_arr_all['name'] = '';
    282. attr_arr_all['value'] = '';
    283. attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';
    284. var dot_name ='', dot_value = '';
    285. p5.replace(preg_group, function(parse_group) {
    286. var is_new=false,option = new Object();
    287. parse_group.replace(preg_attr, function(str0,k,val) {
    288. if(k=='name')
    289. {
    290. if(val=='leipiNewField')
    291. {
    292. is_new=true;
    293. fields++;
    294. val = 'data_'+fields;
    295. }
    296. attr_arr_all['name'] += dot_name + val;
    297. dot_name = ',';
    298. }
    299. else if(k=='value')
    300. {
    301. attr_arr_all['value'] += dot_value + val;
    302. dot_value = ',';
    303. }
    304. option[k] = val;
    305. });
    306. if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
    307. attr_arr_all['options'].push(option);
    308. //if(!option['checked']) option['checked'] = '';
    309. var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
    310. attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    311. if(is_new)
    312. {
    313. var arr = new Object();
    314. arr['name'] = option['name'];
    315. arr['leipiplugins'] = attr_arr_all['leipiplugins'];
    316. add_fields[option['name']] = arr;
    317. }
    318. });
    319. attr_arr_all['content'] += '</span>';
    320. //parse
    321. template = template.replace(plugin,attr_arr_all['content']);
    322. template_parse = template_parse.replace(plugin,'{'+name+'}');
    323. template_parse = template_parse.replace('{|-','');
    324. template_parse = template_parse.replace('-|}','');
    325. template_data[pno] = attr_arr_all;
    326. checkboxs++;
    327. }else if(name)
    328. {
    329. if(tag =='radios') /*单选组  一个字段*/
    330. {
    331. plugin = p0;
    332. plugin = plugin.replace('|-','');
    333. plugin = plugin.replace('-|','');
    334. attr_arr_all['value'] = '';
    335. attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';
    336. var dot='';
    337. p5.replace(preg_group, function(parse_group) {
    338. var option = new Object();
    339. parse_group.replace(preg_attr, function(str0,k,val) {
    340. if(k=='value')
    341. {
    342. attr_arr_all['value'] += dot + val;
    343. dot = ',';
    344. }
    345. option[k] = val;
    346. });
    347. option['name'] = attr_arr_all['name'];
    348. if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
    349. attr_arr_all['options'].push(option);
    350. //if(!option['checked']) option['checked'] = '';
    351. var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
    352. attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    353. });
    354. attr_arr_all['content'] += '</span>';
    355. }else
    356. {
    357. attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
    358. }
    359. //attr_arr_all['itemid'] = fields;
    360. //attr_arr_all['tag'] = tag;
    361. template = template.replace(plugin,attr_arr_all['content']);
    362. template_parse = template_parse.replace(plugin,'{'+name+'}');
    363. template_parse = template_parse.replace('{|-','');
    364. template_parse = template_parse.replace('-|}','');
    365. if(is_new)
    366. {
    367. var arr = new Object();
    368. arr['name'] = name;
    369. arr['leipiplugins'] = attr_arr_all['leipiplugins'];
    370. add_fields[arr['name']] = arr;
    371. }
    372. template_data[pno] = attr_arr_all;
    373. }
    374. pno++;
    375. })
    376. var parse_form = new Object({
    377. 'fields':fields,//总字段数
    378. 'template':template,//完整html
    379. 'parse':template_parse,//控件替换为{data_1}的html
    380. 'data':template_data,//控件属性
    381. 'add_fields':add_fields//新增控件
    382. });
    383. return JSON.stringify(parse_form);
    384. },
    385. /*type  =  save 保存设计 versions 保存版本  close关闭 */
    386. fnCheckForm : function ( type ) {
    387. if(leipiEditor.queryCommandState( 'source' ))
    388. leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug
    389. if(leipiEditor.hasContents()){
    390. leipiEditor.sync();/*同步内容*/
    391. alert("你点击了保存,这里可以异步提交,请自行处理....");
    392. return false;
    393. //--------------以下仅参考-----------------------------------------------------------------------------------------------------
    394. var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
    395. if( typeof type!=='undefined' ){
    396. type_value = type;
    397. }
    398. //获取表单设计器里的内容
    399. formeditor=leipiEditor.getContent();
    400. //解析表单设计器控件
    401. var parse_form = this.parse_form(formeditor,fields);
    402. //alert(parse_form);
    403. //异步提交数据
    404. $.ajax({
    405. type: 'POST',
    406. url : '/index.php?s=/index/parse.html',
    407. //dataType : 'json',
    408. data : {'type' : type_value,'formid':formid,'parse_form':parse_form},
    409. success : function(data){
    410. if(confirm('查看js解析后,提交到服务器的数据,请临时允许弹窗'))
    411. {
    412. win_parse=window.open('','','width=800,height=600');
    413. //这里临时查看,所以替换一下,实际情况下不需要替换
    414. data  = data.replace(/<\/+textarea/,'<textarea');
    415. win_parse.document.write('<textarea style="width:100%;height:100%">'+data+'</textarea>');
    416. win_parse.focus();
    417. }
    418. /*
    419. if(data.success==1){
    420. alert('保存成功');
    421. $('#submitbtn').button('reset');
    422. }else{
    423. alert('保存失败!');
    424. }*/
    425. }
    426. });
    427. } else {
    428. alert('表单内容不能为空!')
    429. $('#submitbtn').button('reset');
    430. return false;
    431. }
    432. } ,
    433. /*预览表单*/
    434. fnReview : function (){
    435. if(leipiEditor.queryCommandState( 'source' ))
    436. leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/
    437. if(leipiEditor.hasContents()){
    438. leipiEditor.sync();       /*同步内容*/
    439. alert("你点击了预览,请自行处理....");
    440. return false;
    441. //--------------以下仅参考-------------------------------------------------------------------
    442. /*设计form的target 然后提交至一个新的窗口进行预览*/
    443. document.saveform.target="mywin";
    444. 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) + "\"");
    445. document.saveform.action="/index.php?s=/index/preview.html";
    446. document.saveform.submit(); //提交表单
    447. } else {
    448. alert('表单内容不能为空!');
    449. return false;
    450. }
    451. }
    452. };
    453. </script>
    454. <!-- script end -->
    455. <!-这个div已经被我删除-
    456. <div style="display: none;">
    457. 88888888888  88                             ad88  88                ad88888ba   8888888888
    458. 88           ""                            d8"    88               d8"     "88  88
    459. 88                                         88     88               8P       88  88  ____
    460. 88aaaaa      88  8b,dPPYba,   ,adPPYba,  MM88MMM  88  8b       d8  Y8,    ,d88  88a8PPPP8b,
    461. 88"""""      88  88P'   "Y8  a8P_____88    88     88  `8b     d8'   "PPPPPP"88  PP"     `8b
    462. 88           88  88          8PP"""""""    88     88   `8b   d8'            8P           d8
    463. 88           88  88          "8b,   ,aa    88     88    `8b,d8'    8b,    a8P   Y8a     a8P
    464. 88           88  88           `"Ybbd8"'    88     88      Y88'     `"Y8888P'     "Y88888P"
    465. d8'
    466. 2014-3-15 Firefly95、Ard、xinG、Xiaoyaodaya               d8'
    467. </div>
    468. <div style="width:1px;height:1px">
    469. <script type="text/javascript">
    470. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    471. document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));
    472. </script>
    473. </div>
    474. </body>
    475. </html>

activiti自定义流程之自定义表单(二):创建表单的更多相关文章

  1. activiti自定义流程之自定义表单(三):表单列表及预览和删除

    注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...

  2. Excel:一维表和二维表 互转

    一.一维表转二维表 数据源: 一份流水账式的值班表,为了便于打印张贴,现在需要使其变成这样的样式: 也就是从一维表变成传说中的二维表. 1.新建查询 依次单击[数据]→[新建查询] →[从文件]→[从 ...

  3. linux 进阶2--C++读取lua文件中的变量、一维表、二维表

    lua 语言非常灵活,一般把lua 作为脚本文件,会用C++与之进行交互.最重要的是C++代码能读取到脚本中的变量.一维表.二维表. 这样有些参数就可以在lua文件进行更改,而不用重新更改C++代码. ...

  4. (转载)根据数据字典表定义的表结构,生成创建表的SQL语句

    <来源网址:http://www.delphifans.com/infoview/Article_221.html>根据数据字典表定义的表结构,生成创建表的SQL语句 //1.  类名:T ...

  5. activiti自定义流程之自定义表单(一):环境配置

    先补充说一下自定义流程整个的思路,自定义流程的目的就是为了让一套代码解决多种业务流程,比如请假单.报销单.采购单.协作单等等,用户自己来设计流程图. 这里要涉及到这样几个基本问题,一是不同的业务需求, ...

  6. Laravel 表单验证创建“表单请求”实现自定义请求类

    按照文档创建表单请求自定义类以后,调用总是403页面,咨询大佬说: public function authorize() { // 在表单验证类的这个方法这里要返回true,默认返回false,这个 ...

  7. activiti--5 -----------------Activiti 工作流 流程各个步骤所涉及到的表

    ACT_RE_*: 'RE'表示repository. 这个前缀的表包含了流程定义和流程静态资源 (图片,规则,等等). ACT_RU_*: 'RU'表示runtime. 这些运行时的表,包含流程实例 ...

  8. 【SQL模板】二.创建表视图模板TSQL

    ---Name: 创建表视图模板.sql ---Purpose: 用于创建 数据库中 新的数据表/视图 ---Author: xx ---Time: 2015-12-18 10:26:06 ---Re ...

  9. sqlserver数据库导出表结构和表数据生成创建表和insert语句

    问题描述: 有时候我们只需要导出一张表和表数据到另外一个数据库,如果是备份整个库的话,就会很麻烦那样,没法满足需求. 解决方法: 以sqlserver2014为例:把MGActivity数据库的bat ...

随机推荐

  1. 关于时间的util类,以后方便查阅

    public static int lastDayOfMonth(int year, int month)  {    if (month == 2)    {      if (isLeapYear ...

  2. c++将引用作为函数的参数---6

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 引用经常被用作函数参数,使得函数中的变量名成为调用程序中的变量别名.这种传递参数 的方法称为按引用传递. ...

  3. linux中进程控制

    1.进程标识 每个进程都有一个非负整型表示的唯一的进程ID.进程ID标识符总是唯一的.  虽然进程ID是唯一的,但某个ID被回收后,ID号是可以复用的. ID为0的进程通常是调度进程(其常常被称交换进 ...

  4. Samba服务器安装及配置

    Samba最早诞生在unix操作系统上面,samba是基于SMB(Server Message Block)协议,是一种客户端服务器协议 一.安装samba # yum -y install samb ...

  5. MySQL常用配置

    查看MySQL的参数信息 mysql> show variables; 查看key_buffer_size的使用情况 mysql> show status like 'key_read%' ...

  6. 第4章 yum在线安装

    1.概述 <1>rpm包的安装过程中,rpm包的依赖性太强 如果所有rpm包都是手工安装,则rpm包使用难度较大, 因而出现了yum在线安装的方法 <2>好处:将所有软件包放到 ...

  7. POJ 3041 Asteroids(最小点覆盖集)

                                                                      Asteroids Time Limit: 1000MS   Mem ...

  8. hdu1058丑数(优先队列、暴力打表)

    hdu1058 题意:当一个数只有2.3.5.7这四种质因数时(也可以一种都没有或只有其中几种),这个数就是丑数,输出第 n 个丑数是多少: 其实并没有发现hdu把这道题放在 dp 专题里的意图,我的 ...

  9. Awesome Deep Vision

    Awesome Deep Vision  A curated list of deep learning resources for computer vision, inspired by awes ...

  10. node.js BootStrap安装

    最近想用Bootstrap开发项目,以便使用其丰富的资源: 捯饬了一下nodejs的安装和配置:windows下弄起来还是比较狗屎的,两三天下班时间才弄好: http://xiaoyaojones.b ...