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

最新推荐文章于 2020-08-06 12:45:35 发布

chuji3953

最新推荐文章于 2020-08-06 12:45:35 发布

阅读量198

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/u/2532228/blog/676297

版权

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

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

一、表单列表页面formList.html：

[html] view plain copy

<!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/javascript" charset="utf-8" src="../js/jquery-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:

[javascript] view plain copy

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.οnclick=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.οnclick=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);
}
}
})
})