文档章节

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

Yemon
 Yemon
发布于 2016/05/17 10:33
字数 955
阅读 5
收藏 0
点赞 2
评论 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

© 著作权归作者所有

共有 人打赏支持
Yemon
粉丝 10
博文 320
码字总数 22799
作品 0
广州
架构师
JEECG 3.6 自定义表单版本发布,智能快速开发平台

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

Jeecg ⋅ 2015/12/04 ⋅ 3

BI 商业智能 - JRelax-BI

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

愤怒的码农0 ⋅ 2016/12/09 ⋅ 23

jeecg-framework-3.3.2-RELEASE 最新版本发布

平台介绍 JEECG(J2EE CodeGeneration)是一款基于代码生成器的智能开发平台,引领新开发模式(OnlineCoding模式->代码生成器模式->手工MERGE智能开发),可以帮助解决Java项目60%的重复工作,...

Jeecg ⋅ 2013/09/02 ⋅ 1

Activiti 工作流表单设计及开发

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

Activiti-保 ⋅ 2014/09/09 ⋅ 4

JRelax-BI 1.3 发布,集成 Activiti 在线流程设计器

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

曾超0215 ⋅ 2017/03/06 ⋅ 7

Activiti 工作流表单设计及开发

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

Activiti-保 ⋅ 2014/12/29 ⋅ 0

Jeecg开源社区/jeecg

JEECG 微云快速开发平台 当前最新版本: 3.7.1(发布日期:20170918) 前言: 随着 WEB UI 框架 ( EasyUI/Jquery UI/Ext/DWZ) 等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也可以生成统...

Jeecg开源社区 ⋅ 2013/11/18 ⋅ 0

JEECG v3.0 发布,基于代码生成器的智能开发平台

JEECG(J2EE Code Generation)是一款基于代码生成器的智能开发平台,采用代码生成+手工MERGE半智能开发模式,可以帮助你解决Java项目中60%的重复工作,让你更多关注业务逻辑。 JEECG宗旨:简...

Jeecg ⋅ 2013/03/04 ⋅ 11

henrycao/jeedcp

Jeedcp 是一个企业级分布式基础平台 当前最新版本: 1.0.0(发布日期:20161004) 前言: 随着 J2EE 框架 ( Bootstrap/SpringMvc/Mybaits/Freemarker) 等的逐渐成熟,系统界面逐渐实现统一化,...

henrycao ⋅ 2016/10/03 ⋅ 0

基于代码生成器的快速开发平台 - JEECG

JEECG是一款基于代码生成器的J2EE快速开发平台,开源界“小普元”超越传统商业企业级开发平台。引领新的开发模式(Online Coding模式(在线开发)->代码生成器模式->手工MERGE智能开发),可以帮...

Jeecg ⋅ 2012/12/30 ⋅ 80

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部