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

版权声明:本文为【涂宗勋】原创,若要转载,请【务必】注明出处:http://blog.csdn.net/tuzongxun;交流群114308990;个人博客:blog.tzxcode.cn https://blog.csdn.net/tuzongxun/article/details/51094393

注:(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)
	@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();
		}
	}

列表页面效果如图:



预览效果如图:


没有更多推荐了,返回首页