上一篇已经讲了根据流程定义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的动态表单功能就完成了。