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

来源：互联网发布：数据挖掘哪些方面编辑：程序博客网时间：2024/05/06 12:54

自定义表单创建成功，要拿到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">  
<!-- 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:

[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.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类中相关方法：

[java] view plain copy
 
@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类相关方法：

[java] view plain copy
 
public Object addForm(String formType, String string);  
public void deleteForm(String formId);  

serviceImp实现：

[java] view plain copy
 
/** 
     * 查询表单列表 
     *  
     * @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 0