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

来源：互联网发布：百度站长平台惊雷算法编辑：程序博客网时间：2024/05/19 12:13

注：(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/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"><!-- 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)@ResponseBodypublic Object findForms() {List<Map<String, String>> list = formService.findForms();return list;}@RequestMapping(value = "/deleteForm.do", method = RequestMethod.POST)@ResponseBodypublic 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();}}

列表页面效果如图：

预览效果如图：

0 0