activiti 动态表单+easyui 实现启动流程功能(三)

最新推荐文章于 2023-11-11 23:11:37 发布

xiaozaq

最新推荐文章于 2023-11-11 23:11:37 发布

阅读量1.9k

点赞数

分类专栏： easyui Activiti 文章标签： Activiti easyui

本文链接：https://blog.csdn.net/xiaozaq/article/details/53256317

版权

Activiti 同时被 2 个专栏收录

22 篇文章 7 订阅

订阅专栏

easyui

9 篇文章 0 订阅

订阅专栏

上一篇已经讲了根据流程定义id获取表单列表。接下来只剩下最后一步4.3. 即根据表单属性列表生成相应的html代码。不多说，先直接上源码：

start.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html >
<html>
<head>
	<title>启动流程</title>
<%@include file="/common/base.jsp" %>
<script type="text/javascript">
	$(function(){
		$('input[type="checkbox"]').each(function(index,element){
			$(element).click(function(){
				element.value = element.checked;
			});
		})  
	})
	function startProc(){
		$('#fm').mySubmit({
			url : 'backstage/workflow/hi/startProc',
			success: function(res){
				closeWin();
			}
		});
	}
	
	function closeWin(){
		parent.window.$(".panel-tool-close").click()
	}
</script>
<style type="text/css">
	.fitem{
		margin: 5px; 
	}
	.fitem label{
		display:inline-block;
		width: 100px;	
		text-align: right;	
	}
</style>
</head>
<body>
	<div class="ftitle" style="text-align: center;font-size: 26px;padding: 5px;">${pd.name }</div>
	<form id="fm" method="post" src="backstage/workflow/hi/startProc">
		<input type="hidden" name="deploymentId" value="${deploymentId }"/>
		<c:forEach var="attr" items="${formAttrlist}" varStatus="status">
			<div class="fitem" style="${attr.toReadableStr()}">
			<label>${attr.name}:</label>
			<c:choose>
				<c:when test='${"string".equals(attr.type)}'>
					<input ${attr.toWritableStr()}  class="easyui-validatebox" ${attr.toRequiredStr()} >
				</c:when>
				<c:when  test='${"long".equals(attr.type)}'>
					<input ${attr.toWritableStr()} class="easyui-numberspinner" data-options="increment:1" ${attr.toRequiredStr() } />
				</c:when>
				<c:when  test='${"boolean".equals(attr.type)}'>
					<input type="checkbox" ${attr.toRequiredStr()}
						class="easyui-checkbox" ${attr.toWritableStr()}  /> 
				</c:when>
				<c:when test='${"date".equals(attr.type)}'>
					<input id="${attr.id}" ${attr.toWritableStr()}  class="easyui-datebox" data-options="sharedCalendar:'#div${attr.id}'" ${attr.toRequiredStr()}>
					<div id="div${attr.id}" class="easyui-calendar"></div>
				</c:when>
				<c:when test='${"enum".equals(attr.type)}'>
					<select class="easyui-combobox" ${attr.toWritableStr()}  style="width:173px;">
						<c:forEach var="node" items="${attr.selects}" >
							<option value="${node.attrMap.id}">${node.attrMap.name}</option>
						</c:forEach>
					</select>
				</c:when>
				<c:otherwise></c:otherwise>
			</c:choose>
		</div>
		</c:forEach>
		<br>
		<div style="text-align: center;">
			<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="startProc()">启动流程</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="closeWin()">取消</a>
		</div>
	</form>
</body>
</html>

base.jsp

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="static/plugins/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/plugins/easyui/themes/icon.css">

<script type="text/javascript" src="static/plugins/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/plugins/easyui/jquery.easyui.min.js"></script>
<script src="static/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="static/plugins/easyui/easyui_patch.js?v=1"></script>
<link rel="stylesheet" type="text/css" href="static/plugins/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="common/css.css">

        public String toRequiredStr(){
		return required ? " required='true' " : "";
	}
	public String toReadableStr(){
		return readable ? "" : " display:none; ";
	}
	public String toWritableStr(){
		return writable ? " name='"+id+"' " : " readonly='readonly' ";
	}

遍历输出对应的控件，jsp动态生成相应的html，使用EL表达式和easyui框架，给用户展示一个相对友好的动态表单页面。

这样基于activiti+spring+mybatis+easyui的动态表单功能就完成了。

xiaozaq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
activiti 动态表单+easyui 实现启动流程功能(三)

上一篇已经讲了根据流程定义id获取表单列表。接下来只剩下最后一步4.3. 即根据表单属性列表生成相应的html代码。不多说，先直接上源码：start.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 启动流程 $(funct
复制链接

扫一扫

专栏目录