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">
<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的语法,因此完全可以参考之前说些的表单 ...

随机推荐

Mac中Fn键技巧
此文适用:Mac自带苹果键盘或外接有Fn键的普通键盘上一页=Fn+⬅️ 下一页=Fn+➡️ 向上卷动=Fn+⬆️ 向下卷动=Fn+⬇️
socket 简介
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1. 什么是TCP/IP.UDP?2. Sock ...
Java——java多态
/* * 多态: * 成员的特点: * 1.成员变量. * 编译时:参开引用型变量所属类中的是否有调用的成员变量, 有:编译通过, 没有编译失败. * 运行时: 参考引用变量所属的类 ...
前端面试库_JS部分_02
今天小编做了一个伟大的决定-----把我的初恋追回来.她在我心中一直是美好的,以前也人渣过,脑袋发热过,到了现在才真的是想有一个人陪伴着我,我与她约定晚些相见,我相信这个时间不会很久,虽然三年没有联系 ...
【转贴】Cortex系列M0-4简单对比
转载网址:http://blog.sina.com.cn/s/blog_7dbd9c0e01018e4l.html 最近搞了块ST的Cortex-M4处理器,然后下了本文档.分享一下. 针对目前进入大 ...
php(验证网址是否存在)错误
$ra=get_headers('http://hi.baidu.com'); if($ra[0]==='HTTP/1.1 200 OK'){ echo 'ok'; } 这是错误的,因为有时会返回 ...
Linux-配置虚拟IP实例
在日常linux管理工作中,需要为应用配置单独的IP地址,以达到主机与应用的分离,在应用切换与迁移过程中可以做到动态切换,特别是在使用HA的时候,这种方案可以保证主机与应用的隔离,对日常的运维有很大的 ...
mysql学习之-字符集选定，修改。
基础概念:字符(Character)是指人类语言中最小的表义符号.例如'A'.'B'等:编码(Encoding)是指给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符.例如,我们给字符'A ...
shell流程控制语句
linux shell有一套自己的流程控制语句,其中包括条件语句(if),循环语句(for,while,until),选择语句(case/select).下面我将通过例子介绍下,各个语句使用方法. 1 ...
wikioi 1012最大公约数和最小公倍数【根据最大公约数和最小公倍数求原来的两个数a、b】
/*====================================================================== 题目描述输入二个正整数x0,y0(2<=x0& ...

activiti自定义流程之自定义表单（三）：表单列表及预览和删除

activiti自定义流程之自定义表单（三）：表单列表及预览和删除的更多相关文章

随机推荐

热门专题