activiti自定义流程之自定义表单(三):表单列表及预览和删除
注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置
(2)创建表单:activiti自定义流程之自定义表单(二):创建表单
自定义表单创建成功,要拿到activiti中使用,自然需要让创建activiti流程的人能够看到究竟有那些表单可用,各表单的效果是什么,因此就需要一个展示页面并提供预览功能。同时,增删改查四大功能是基础,自然都是需要的,我这里没有做表单修改,只简单的实现了删除。
我下载的ueditor插件中有基本的创建和预览代码,因此我就参考这些再度修改,而后实现简单的表达列表和预览、删除功能。
一、 表单列表页面formList.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">
- <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>" 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>
- <link href="../my_css/a.css" rel="stylesheet" type="text/css" />
- </head>
- <body style="margin:0">
- <!-- fixed navbar -->
- <!-- Docs page layout -->
- <script type="text/javascript" charset="utf-8" src="../my_js/formList.js"></script>
- <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: 32px; width:60%;overflow:hidden;float:left">
- <li><a href="#" onclick="toAdd();">新增表单</a></li>
- <li> | </li>
- <li><a href="#" onclick="formList();">表单列表</a></li>
- <li> | </li>
- <li><a href="#" onclick="createModel();">创建模型</a></li>
- </ul>
- </div>
- <div id="idv1" style="width:100%;position: absolute;height:auto">
- <div id="formDiv" style="width:88%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">
- <table id="ta1" style="width:100%;height:auto;text-align:center" border="1" cellpadding="0" cellspacing="0">
- <tr style="background-color:#ccc">
- <td style="width:100px;height:30px;font-size:25px">表单Id</td>
- <td style="width:100px;height:30px;font-size:25px">表单标题</td>
- <td style="font-size:25px">表单代码</td>
- <td style="width:100px;height:30px;font-size:25px">操作表单</td>
- </tr>
- </table>
- </div>
- </div>
- <div id="div2" style="top:100px;left:20%;width:60%;height:400px;position:absolute;background-color:grey;display:none;">
- </div>
- </body>
- </html>
二、 js文件formList.js:
- function toAdd(){
- window.location.href="../";
- };
- function formList(){
- window.location.href="./formList.html";
- };
- $(document).ready(function(){
- $.ajax({
- type: 'POST',
- url : '/webFormTest/findForms.do',
- dataType : 'json',
- async:false,
- success : function(data){
- //alert("保存成功");
- console.log(data);
- for(var i=0;i<data.length;i++){
- var form=data[i];
- console.log(form);
- var tables = document.getElementById("ta1");
- var tr = document.createElement("tr");
- var td0=document.createElement("td");
- var td1=document.createElement("td");
- var td2=document.createElement("td");
- var td3=document.createElement("td");
- td0.innerText=form.formId;
- td1.innerText=form.formType;
- td2.innerText=form.form;
- td2.setAttribute("id",i);
- var a1=document.createElement("a");
- var node1 = document.createTextNode(" 删除 ");
- a1.appendChild(node1);
- a1.setAttribute("href","#");
- a1.setAttribute("id","a1"+i);
- a1.onclick=function(){
- var id=this.id;
- var id1=id.substring(2);
- var formId=data[id1].formId;
- //console.log(document.getElementById(id).innerText);
- //console.log();
- //先删除,后跳转
- $.ajax({
- type: 'POST',
- url : '/webFormTest/deleteForm.do',
- dataType : 'json',
- async:false,
- data:{"formId":formId},
- success : function(){
- window.location.href="./formList.html";
- }
- })
- };
- var a2=document.createElement("a");
- var node2 = document.createTextNode(" 预览 ");
- a2.appendChild(node2);
- a2.setAttribute("href","#");
- a2.setAttribute("id","a2"+i);
- a2.onclick=function(){
- //console.log();
- //console.log(data);
- var id=this.id;
- var formId=id.substring(2);
- var form=data[formId].form;
- form.replace("{","");
- form.replace("}","");
- form.replace("|","");
- //console.log(document.getElementById(id).innerText);
- win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');
- var str='<div style="width:500px;height:300px;border:1px solid grey">'+form+'</div>';
- win_parse.document.write(str);
- win_parse.focus();
- //document.getElementById("div2").write(str);
- };
- td3.appendChild(a1);
- td3.appendChild(a2);
- tr.appendChild(td0);
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
- tables.appendChild(tr);
- }
- }
- })
- })
三、 后台代码:
Controller类中相关方法:
- @RequestMapping(value = "/findForms.do", method = RequestMethod.POST)
- @ResponseBody
- public Object findForms() {
- List<Map<String, String>> list = formService.findForms();
- return list;
- }
- @RequestMapping(value = "/deleteForm.do", method = RequestMethod.POST)
- @ResponseBody
- public Object deleteForm(HttpServletRequest request) {
- String formIde = request.getParameter("formId");
- formService.deleteForm(formIde);
- return null;
- }
Service类相关方法:
- public Object addForm(String formType, String string);
- public void deleteForm(String formId);
serviceImp实现:
- /**
- * 查询表单列表
- *
- * @author:tuzongxun
- * @Title: findForms
- * @Description: TODO
- * @param @return
- * @date Mar 28, 2016 4:29:58 PM
- * @throws
- */
- public List<Map<String, String>> findForms() {
- Connection connection = this.getDb();
- Statement statement;
- List<Map<String, String>> list = new ArrayList<Map<String, String>>();
- try {
- statement = connection.createStatement();
- ResultSet resultSet = statement
- .executeQuery("select * from formtest");
- while (resultSet.next()) {
- Map<String, String> map = new HashMap<String, String>();
- String formString = resultSet.getString(2);
- // resultSet.getString(2);
- System.out.println("formString:" + formString);
- map.put("formId", resultSet.getString(1));
- map.put("formType", resultSet.getString(2));
- map.put("form", resultSet.getString(3));
- list.add(map);
- }
- ;
- } catch (Exception e) {
- e.printStackTrace();
- }
- return list;
- }
- /**
- * 删除表单
- *
- * @author:tuzongxun
- * @Title: addForm
- * @Description: TODO
- * @param @param formType
- * @param @param string
- * @param @return
- * @date Mar 28, 2016 4:30:18 PM
- * @throws
- */
- public void deleteForm(String formId) {
- try {
- Connection connection = this.getDb();
- PreparedStatement ps = connection
- .prepareStatement("delete from formtest where formId=?");
- ps.setString(1, formId);
- ps.executeUpdate();
- connection.close();
- } catch (Exception e) {
- e.printStackTrace();
- }
- }
列表页面效果如图:
预览效果如图:
activiti自定义流程之自定义表单(三):表单列表及预览和删除的更多相关文章
- activiti自定义流程之自定义表单(二):创建表单
注:环境配置:activiti自定义流程之自定义表单(一):环境配置 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进 ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...
- activiti自定义流程之自定义表单(一):环境配置
先补充说一下自定义流程整个的思路,自定义流程的目的就是为了让一套代码解决多种业务流程,比如请假单.报销单.采购单.协作单等等,用户自己来设计流程图. 这里要涉及到这样几个基本问题,一是不同的业务需求, ...
- 【转】玩转Android Camera开发(三):国内首发---使用GLSurfaceView预览Camera 基础拍照demo
http://blog.csdn.net/yanzi1225627/article/details/33339965 GLSurfaceView是OpenGL中的一个类,也是可以预览Camera的,而 ...
- Django文件上传三种方式以及简单预览功能
主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...
- layui文件单文件和多文件的上传、预览以及删除和修改
活不多说,直接上代码 单文件上传 1.HTML <blockquote class="layui-elem-quote layui-quote-nm" style=" ...
- 玩转Android Camera开发(三):国内首发---使用GLSurfaceView预览Camera 基础拍照demo
GLSurfaceView是OpenGL中的一个类,也是能够预览Camera的,并且在预览Camera上有其独到之处. 独到之处在哪?当使用Surfaceview无能为力.痛不欲生时就仅仅有使用GLS ...
- JS实现上传图片的三种方法并实现预览图片功能
地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...
- activiti自定义流程之整合(三):整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单 ...
随机推荐
- discuz如何设置游客可以浏览板块,但是不能查看帖子内容呢?
后台 ,将用户组 --游客 阅读权限设置为0 QQ快捷登陆不正常 ,在首页,点击QQ快捷登陆,并不跳转到QQ认证页面,而是要输入用户名.密码.验证码等. 但是如果输入的是你想新注册的用户名等信息,却不 ...
- JavaWeb学习记录(十九)——jsp标签库
1.out标签 <% //局部变量 String name="zsf>&<zz"; pageContext.se ...
- scala言语基础学习八
- Android-Universal-Image-Loader开源项目的简要说明及使用实例
本文转载于:http://www.cnblogs.com/hsx514/p/3460179.html 一.核心类的说明及相关参数的说明 ImageLoaderConfiguration 1.作用:为I ...
- JVM 虚拟化
http://www.infoq.com/cn/news/2015/05/java20-multitenant-jvm http://2016.qconshanghai.com/presentatio ...
- 主成分分析(PCA)
主成分分析(principal component analysis)是一种常见的数据降维方法,其目的是在"信息"损失较小的前提下,将高维的数据转换到低维,从而减小计算量.PCA的 ...
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- Sklearn库例子4:分类——Lasso分类例子
Lasso回归: #-*- encoding:utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn.met ...
- node.js BootStrap安装
最近想用Bootstrap开发项目,以便使用其丰富的资源: 捯饬了一下nodejs的安装和配置:windows下弄起来还是比较狗屎的,两三天下班时间才弄好: http://xiaoyaojones.b ...
- EDIUS和VEGAS哪个更好用
随着数字化电视系统发展的步伐日趋加快,计算机技术逐步渗透到广播电视的各个领域,非线性编辑系统在广播电视行业内占据越来越重要的地位,而且正向多样化 发展.因此,非线性编辑技术的操作应用对于编辑人员有着非 ...