文档章节

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

Yemon
 Yemon
发布于 2016/05/17 10:33
字数 955
阅读 5
收藏 0

自定义表单创建成功,要拿到activiti中使用,自然需要让创建activiti流程的人能够看到究竟有那些表单可用,各表单的效果是什么,因此就需要一个展示页面并提供预览功能。同时,增删改查四大功能是基础,自然都是需要的,我这里没有做表单修改,只简单的实现了删除。


我下载的ueditor插件中有基本的创建和预览代码,因此我就参考这些再度修改,而后实现简单的表达列表和预览、删除功能。

一、 表单列表页面formList.html:
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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.     <script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.2.min.js?2023"></script>  
  8.     <link href="../my_css/a.css" rel="stylesheet" type="text/css" />  
  9.  </head>  
  10. <body style="margin:0">  
  11. <!-- fixed navbar -->  
  12. <!-- Docs page layout -->  
  13. <script type="text/javascript" charset="utf-8" src="../my_js/formList.js"></script>  
  14. <div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">  
  15.        
  16.      <img src="../images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>  
  17.        
  18.      <ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 32px; width:60%;overflow:hidden;float:left">  
  19.         <li><a href="#" onclick="toAdd();">新增表单</a></li>  
  20.         <li> | </li>  
  21.         <li><a href="#" onclick="formList();">表单列表</a></li>  
  22.         <li> | </li>  
  23.         <li><a href="#" onclick="createModel();">创建模型</a></li>  
  24.      </ul>  
  25. </div>  
  26. <div id="idv1" style="width:100%;position: absolute;height:auto">  
  27.    <div id="formDiv" style="width:88%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">  
  28.       <table id="ta1" style="width:100%;height:auto;text-align:center" border="1" cellpadding="0" cellspacing="0">  
  29.         <tr style="background-color:#ccc">  
  30.            <td style="width:100px;height:30px;font-size:25px">表单Id</td>  
  31.            <td style="width:100px;height:30px;font-size:25px">表单标题</td>  
  32.            <td style="font-size:25px">表单代码</td>  
  33.            <td style="width:100px;height:30px;font-size:25px">操作表单</td>  
  34.         </tr>  
  35.       </table>  
  36.    </div>  
  37. </div>  
  38.   
  39.   
  40. <div id="div2" style="top:100px;left:20%;width:60%;height:400px;position:absolute;background-color:grey;display:none;">  
  41.      
  42. </div>  
  43. </body>  
  44. </html>  


二、 js文件formList.js:
 
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. function toAdd(){  
  2.     window.location.href="../";   
  3. };  
  4. function formList(){  
  5.     window.location.href="./formList.html";   
  6. };  
  7. $(document).ready(function(){  
  8. $.ajax({  
  9.     type: 'POST',  
  10.     url : '/webFormTest/findForms.do',  
  11.     dataType : 'json',  
  12.     async:false,  
  13.     success : function(data){  
  14.         //alert("保存成功");  
  15.         console.log(data);  
  16.         for(var i=0;i<data.length;i++){  
  17.             var form=data[i];  
  18.             console.log(form);  
  19.                 var tables = document.getElementById("ta1");  
  20.                 var tr = document.createElement("tr");  
  21.                 var td0=document.createElement("td");  
  22.                 var td1=document.createElement("td");  
  23.                 var td2=document.createElement("td");  
  24.                 var td3=document.createElement("td");  
  25.                 td0.innerText=form.formId;  
  26.                 td1.innerText=form.formType;  
  27.                 td2.innerText=form.form;  
  28.                 td2.setAttribute("id",i);  
  29.                 var a1=document.createElement("a");  
  30.                 var node1 = document.createTextNode(" 删除  ");  
  31.                 a1.appendChild(node1);  
  32.                 a1.setAttribute("href","#");  
  33.                 a1.setAttribute("id","a1"+i);  
  34.                 a1.onclick=function(){  
  35.                     var id=this.id;  
  36.                     var id1=id.substring(2);  
  37.                     var formId=data[id1].formId;  
  38.                     //console.log(document.getElementById(id).innerText);   
  39.                     //console.log();  
  40.                     //先删除,后跳转  
  41.                     $.ajax({  
  42.                         type: 'POST',  
  43.                         url : '/webFormTest/deleteForm.do',  
  44.                         dataType : 'json',  
  45.                         async:false,  
  46.                         data:{"formId":formId},  
  47.                         success : function(){  
  48.                             window.location.href="./formList.html";  
  49.                         }      
  50.                     })  
  51.                 };  
  52.                   
  53.                 var a2=document.createElement("a");  
  54.                 var node2 = document.createTextNode(" 预览  ");  
  55.                 a2.appendChild(node2);  
  56.                 a2.setAttribute("href","#");  
  57.                 a2.setAttribute("id","a2"+i);  
  58.                 a2.onclick=function(){  
  59.                     //console.log();  
  60.                     //console.log(data);  
  61.                     var id=this.id;  
  62.                     var formId=id.substring(2);  
  63.                     var form=data[formId].form;  
  64.                     form.replace("{","");  
  65.                     form.replace("}","");  
  66.                     form.replace("|","");  
  67.                     //console.log(document.getElementById(id).innerText);  
  68.                     win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');  
  69.                     var str='<div style="width:500px;height:300px;border:1px solid grey">'+form+'</div>';  
  70.                     win_parse.document.write(str);  
  71.                     win_parse.focus();       
  72.                     //document.getElementById("div2").write(str);  
  73.                 };  
  74.                   
  75.                 td3.appendChild(a1);  
  76.                 td3.appendChild(a2);  
  77.                 tr.appendChild(td0);  
  78.                 tr.appendChild(td1);  
  79.                 tr.appendChild(td2);  
  80.                 tr.appendChild(td3);  
  81.                 tables.appendChild(tr);  
  82.         }  
  83.     }  
  84. })  
  85. })  


三、 后台代码:
Controller类中相关方法:
[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. @RequestMapping(value = "/findForms.do", method = RequestMethod.POST)  
  2.     @ResponseBody  
  3.     public Object findForms() {  
  4.         List<Map<String, String>> list = formService.findForms();  
  5.         return list;  
  6.     }  
  7.   
  8.   
  9.     @RequestMapping(value = "/deleteForm.do", method = RequestMethod.POST)  
  10.     @ResponseBody  
  11.     public Object deleteForm(HttpServletRequest request) {  
  12.         String formIde = request.getParameter("formId");  
  13.         formService.deleteForm(formIde);  
  14.         return null;  
  15.     }  



 Service类相关方法:
[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. public Object addForm(String formType, String string);  
  2. public void deleteForm(String formId);  


 serviceImp实现:
[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.      * 查询表单列表 
  3.      *  
  4.      * @author:tuzongxun 
  5.      * @Title: findForms 
  6.      * @Description: TODO 
  7.      * @param @return 
  8.      * @date Mar 28, 2016 4:29:58 PM 
  9.      * @throws 
  10.      */  
  11.     public List<Map<String, String>> findForms() {  
  12.         Connection connection = this.getDb();  
  13.         Statement statement;  
  14.         List<Map<String, String>> list = new ArrayList<Map<String, String>>();  
  15.         try {  
  16.             statement = connection.createStatement();  
  17.             ResultSet resultSet = statement  
  18.                     .executeQuery("select * from formtest");  
  19.             while (resultSet.next()) {  
  20.                 Map<String, String> map = new HashMap<String, String>();  
  21.                 String formString = resultSet.getString(2);  
  22.                 // resultSet.getString(2);  
  23.                 System.out.println("formString:" + formString);  
  24.                 map.put("formId", resultSet.getString(1));  
  25.                 map.put("formType", resultSet.getString(2));  
  26.                 map.put("form", resultSet.getString(3));  
  27.                 list.add(map);  
  28.             }  
  29.             ;  
  30.         } catch (Exception e) {  
  31.             e.printStackTrace();  
  32.         }  
  33.         return list;  
  34.     }  
  35.   
  36.   
  37.     /** 
  38.      * 删除表单 
  39.      *  
  40.      * @author:tuzongxun 
  41.      * @Title: addForm 
  42.      * @Description: TODO 
  43.      * @param @param formType 
  44.      * @param @param string 
  45.      * @param @return 
  46.      * @date Mar 28, 2016 4:30:18 PM 
  47.      * @throws 
  48.      */  
  49.     public void deleteForm(String formId) {  
  50.         try {  
  51.             Connection connection = this.getDb();  
  52.             PreparedStatement ps = connection  
  53.                     .prepareStatement("delete from  formtest where formId=?");  
  54.             ps.setString(1, formId);  
  55.             ps.executeUpdate();  
  56.   
  57.   
  58.             connection.close();  
  59.         } catch (Exception e) {  
  60.             e.printStackTrace();  
  61.         }  
  62.     }  

列表页面效果如图:



预览效果如图:


0

本文转载自:http://blog.csdn.net/hj7jay/article/details/51098723

共有 人打赏支持
Yemon
粉丝 10
博文 320
码字总数 22799
作品 0
广州
架构师
Activiti6.0零编程部署工作流(一)

概述 前一篇文章《十分钟认识Activiti6.0工作流引擎》站在工程师的视角快速编码体验了一把工作流,为了更纯粹的体验Activiti提供的核心API的功能,我们在命令行交互下体验了流程审批的过程,...

JimmyNo1
06/27
0
0
JEECG 3.6 自定义表单版本发布,智能快速开发平台

JEECG 3.6(智能快速开发平台) 自定义表单版本发布 平台介绍: JEECG(J2EE Code Generation),一款基于代码生成器的JAVA快速开发平台,集成强大代码生成器和在线开发机制,在线报表配置机制...

Jeecg
2015/12/04
11.7K
3
BI 商业智能 - JRelax-BI

继上一个软件#zframe#已经有很长时间了,这次基于zframe的底层,改头换面(更换前端所有UI) 发布一个全新的工具:《JRelax-BI B/S版商业智能工具》 目前处于研发阶段,版本号为:1.3 更新时...

愤怒的码农0
2016/12/09
0
23
Activiti 工作流表单设计及开发

一、前言 Activiti 5对表单的支持目前还是比较弱的,表现在对表单的开发还需要写Freemark模板,并且它的模板还需要跟class文件一起打包发布。这使得流程的表单设计必须由开发人员来开发处理。...

Activiti-保
2014/09/09
19.3K
4
JRelax-BI 1.3 发布,集成 Activiti 在线流程设计器

1.3版本更新啦! 此次更新内容主要包括: 1. 集成Activiti在线流程设计器 2. 表单管理代码重构 3. 数据源优化虚拟数据源 4. 进一步完善表单自定义和流程自定义的整合...

曾超0215
2017/03/06
1K
7

没有更多内容

加载失败,请刷新页面

加载更多

Redis开发规范

一、键值设计 1.1 key名设计 (1)【建议】: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video:1 (2)【建议】:简洁性 保证语义的前提下...

IT--小哥
3分钟前
0
0
crunch 練習

crunch 10 10 -t 09%%%%%%%% -o tw_mobile_number.lst

BaiyuanLab
18分钟前
0
0
Kafka技术资料总结(不断更新中)

1、Kafka实践:到底该不该把不同类型的消息放在同一个主题中 2、Kafka剖析系列: Kafka剖析(一):Kafka背景及架构介绍 Kafka设计解析(二):Kafka High Availability (上)...

九州暮云
今天
1
0
面向对象设计原则(OOP)

单一职责原则(Single responsibility principle)又称单一功能原则。它规定一个类应该只有一个发生变化的原因。 核心原则:低耦合,高内聚。 一个类,应该只有一个引起它变化的原因,也就是...

gackey
今天
4
0
C++ 锁

C++提供了两种常用的锁,std::lock_guard<Lockable &T>和std::unique_lock<Lockable &T>。通常使用场景下,这两个锁用法一致。即,在构造锁对象时上锁,在析构锁对象时解锁。使用户从上锁/解...

yepanl
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部