activiti自定义流程之自定义表单(三):表单列表及预览和删除

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


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

一、 表单列表页面formList.html:
[html]  view plain  copy
 
  1.    <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  7.     <script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.2.min.js?2023"></script>  
  8.     <link href="../my_css/a.css" rel="stylesheet" type="text/css" />  
  9.  </head>  
  10. <body style="margin:0">  
  11. <!-- fixed navbar -->  
  12. <!-- Docs page layout -->  
  13. <script type="text/javascript" charset="utf-8" src="../my_js/formList.js"></script>  
  14. <div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">  
  15.        
  16.      <img src="../images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>  
  17.        
  18.      <ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 32px; width:60%;overflow:hidden;float:left">  
  19.         <li><a href="#" onclick="toAdd();">新增表单</a></li>  
  20.         <li> | </li>  
  21.         <li><a href="#" onclick="formList();">表单列表</a></li>  
  22.         <li> | </li>  
  23.         <li><a href="#" onclick="createModel();">创建模型</a></li>  
  24.      </ul>  
  25. </div>  
  26. <div id="idv1" style="width:100%;position: absolute;height:auto">  
  27.    <div id="formDiv" style="width:88%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">  
  28.       <table id="ta1" style="width:100%;height:auto;text-align:center" border="1" cellpadding="0" cellspacing="0">  
  29.         <tr style="background-color:#ccc">  
  30.            <td style="width:100px;height:30px;font-size:25px">表单Id</td>  
  31.            <td style="width:100px;height:30px;font-size:25px">表单标题</td>  
  32.            <td style="font-size:25px">表单代码</td>  
  33.            <td style="width:100px;height:30px;font-size:25px">操作表单</td>  
  34.         </tr>  
  35.       </table>  
  36.    </div>  
  37. </div>  
  38.   
  39.   
  40. <div id="div2" style="top:100px;left:20%;width:60%;height:400px;position:absolute;background-color:grey;display:none;">  
  41.      
  42. </div>  
  43. </body>  
  44. </html>  


二、 js文件formList.js:
 
[javascript]  view plain  copy
 
  1. function toAdd(){  
  2.     window.location.href="../";   
  3. };  
  4. function formList(){  
  5.     window.location.href="./formList.html";   
  6. };  
  7. $(document).ready(function(){  
  8. $.ajax({  
  9.     type: 'POST',  
  10.     url : '/webFormTest/findForms.do',  
  11.     dataType : 'json',  
  12.     async:false,  
  13.     success : function(data){  
  14.         //alert("保存成功");  
  15.         console.log(data);  
  16.         for(var i=0;i<data.length;i++){  
  17.             var form=data[i];  
  18.             console.log(form);  
  19.                 var tables = document.getElementById("ta1");  
  20.                 var tr = document.createElement("tr");  
  21.                 var td0=document.createElement("td");  
  22.                 var td1=document.createElement("td");  
  23.                 var td2=document.createElement("td");  
  24.                 var td3=document.createElement("td");  
  25.                 td0.innerText=form.formId;  
  26.                 td1.innerText=form.formType;  
  27.                 td2.innerText=form.form;  
  28.                 td2.setAttribute("id",i);  
  29.                 var a1=document.createElement("a");  
  30.                 var node1 = document.createTextNode(" 删除  ");  
  31.                 a1.appendChild(node1);  
  32.                 a1.setAttribute("href","#");  
  33.                 a1.setAttribute("id","a1"+i);  
  34.                 a1.onclick=function(){  
  35.                     var id=this.id;  
  36.                     var id1=id.substring(2);  
  37.                     var formId=data[id1].formId;  
  38.                     //console.log(document.getElementById(id).innerText);   
  39.                     //console.log();  
  40.                     //先删除,后跳转  
  41.                     $.ajax({  
  42.                         type: 'POST',  
  43.                         url : '/webFormTest/deleteForm.do',  
  44.                         dataType : 'json',  
  45.                         async:false,  
  46.                         data:{"formId":formId},  
  47.                         success : function(){  
  48.                             window.location.href="./formList.html";  
  49.                         }      
  50.                     })  
  51.                 };  
  52.                   
  53.                 var a2=document.createElement("a");  
  54.                 var node2 = document.createTextNode(" 预览  ");  
  55.                 a2.appendChild(node2);  
  56.                 a2.setAttribute("href","#");  
  57.                 a2.setAttribute("id","a2"+i);  
  58.                 a2.onclick=function(){  
  59.                     //console.log();  
  60.                     //console.log(data);  
  61.                     var id=this.id;  
  62.                     var formId=id.substring(2);  
  63.                     var form=data[formId].form;  
  64.                     form.replace("{","");  
  65.                     form.replace("}","");  
  66.                     form.replace("|","");  
  67.                     //console.log(document.getElementById(id).innerText);  
  68.                     win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');  
  69.                     var str='<div style="width:500px;height:300px;border:1px solid grey">'+form+'</div>';  
  70.                     win_parse.document.write(str);  
  71.                     win_parse.focus();       
  72.                     //document.getElementById("div2").write(str);  
  73.                 };  
  74.                   
  75.                 td3.appendChild(a1);  
  76.                 td3.appendChild(a2);  
  77.                 tr.appendChild(td0);  
  78.                 tr.appendChild(td1);  
  79.                 tr.appendChild(td2);  
  80.                 tr.appendChild(td3);  
  81.                 tables.appendChild(tr);  
  82.         }  
  83.     }  
  84. })  
  85. })  


三、 后台代码:
Controller类中相关方法:
[java]  view plain  copy
 
  1. @RequestMapping(value = "/findForms.do", method = RequestMethod.POST)  
  2.     @ResponseBody  
  3.     public Object findForms() {  
  4.         List<Map<String, String>> list = formService.findForms();  
  5.         return list;  
  6.     }  
  7.   
  8.   
  9.     @RequestMapping(value = "/deleteForm.do", method = RequestMethod.POST)  
  10.     @ResponseBody  
  11.     public Object deleteForm(HttpServletRequest request) {  
  12.         String formIde = request.getParameter("formId");  
  13.         formService.deleteForm(formIde);  
  14.         return null;  
  15.     }  



 Service类相关方法:
[java]  view plain  copy
 
  1. public Object addForm(String formType, String string);  
  2. public void deleteForm(String formId);  


 serviceImp实现:
[java]  view plain  copy
 
  1. /** 
  2.      * 查询表单列表 
  3.      *  
  4.      * @author:tuzongxun 
  5.      * @Title: findForms 
  6.      * @Description: TODO 
  7.      * @param @return 
  8.      * @date Mar 28, 2016 4:29:58 PM 
  9.      * @throws 
  10.      */  
  11.     public List<Map<String, String>> findForms() {  
  12.         Connection connection = this.getDb();  
  13.         Statement statement;  
  14.         List<Map<String, String>> list = new ArrayList<Map<String, String>>();  
  15.         try {  
  16.             statement = connection.createStatement();  
  17.             ResultSet resultSet = statement  
  18.                     .executeQuery("select * from formtest");  
  19.             while (resultSet.next()) {  
  20.                 Map<String, String> map = new HashMap<String, String>();  
  21.                 String formString = resultSet.getString(2);  
  22.                 // resultSet.getString(2);  
  23.                 System.out.println("formString:" + formString);  
  24.                 map.put("formId", resultSet.getString(1));  
  25.                 map.put("formType", resultSet.getString(2));  
  26.                 map.put("form", resultSet.getString(3));  
  27.                 list.add(map);  
  28.             }  
  29.             ;  
  30.         } catch (Exception e) {  
  31.             e.printStackTrace();  
  32.         }  
  33.         return list;  
  34.     }  
  35.   
  36.   
  37.     /** 
  38.      * 删除表单 
  39.      *  
  40.      * @author:tuzongxun 
  41.      * @Title: addForm 
  42.      * @Description: TODO 
  43.      * @param @param formType 
  44.      * @param @param string 
  45.      * @param @return 
  46.      * @date Mar 28, 2016 4:30:18 PM 
  47.      * @throws 
  48.      */  
  49.     public void deleteForm(String formId) {  
  50.         try {  
  51.             Connection connection = this.getDb();  
  52.             PreparedStatement ps = connection  
  53.                     .prepareStatement("delete from  formtest where formId=?");  
  54.             ps.setString(1, formId);  
  55.             ps.executeUpdate();  
  56.   
  57.   
  58.             connection.close();  
  59.         } catch (Exception e) {  
  60.             e.printStackTrace();  
  61.         }  
  62.     }  

列表页面效果如图:

activiti自定义流程之自定义表单(三):表单列表及预览和删除_第1张图片


预览效果如图:

activiti自定义流程之自定义表单(三):表单列表及预览和删除_第2张图片

0

你可能感兴趣的:(删除,Activiti,预览,自定义表单)