目的：实现一个公共的组织结构树状图。
效果图：
多选效果图
单选效果图
要点：
- 此树状图作为公共功能被调用。
- 此树状图不能被其他控件所遮挡。
目录结构：
目录结构
查询页面：/EasyUiLearn/WebContent/tree/queryPage.jsp
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath %>">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/demo.css">
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-panel" title="说明" style="margin-bottom:15px">
1.通过jsp:include获取公共的组织机构树。<br/>
2.树状图设置成position:absolute，防止打开后被其他元素遮挡。
</div>
<div class="easyui-panel" title="查询">
<table>
<tr>
<td width="100px" align="right">机构：</td>
<td width="150px" align="left" valign="top" style="padding-top:4px">
<jsp:include page="./org.jsp">
<jsp:param name="url" value="tree/js/tree_data.json"/>
<jsp:param name="checkbox" value="true"/>
<jsp:param name="onlyLeafCheck" value="false"/>
<jsp:param name="url" value="tree/js/tree_data.json"/>
</jsp:include>
</td>
<td width="100px" align="right">姓名：</td>
<td><input type="text"/></td>
<td>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getOrg()">获取选中</a>
</td>
</tr>
</table>
</div>
</body>
</html>
其中，
<jsp:include page="./org.jsp">
<jsp:param name="url" value="tree/js/tree_data.json"/>
<jsp:param name="checkbox" value="true"/>
<jsp:param name="onlyLeafCheck" value="false"/>
<jsp:param name="url" value="tree/js/tree_data.json"/>
</jsp:include>
是引入公共页面。checkbox是否显示复选框，onlyLeafCheck是否只能选择叶子节点，url数据来源。
公共树状图页面：/EasyUiLearn/WebContent/tree/org.jsp
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%
String url = request.getParameter("url");
String checkbox = request.getParameter("checkbox");
String onlyLeafCheck = request.getParameter("onlyLeafCheck");
%>
<div style="position:absolute;z-index:999;">
<ul id="tt"></ul>
</div>
<script type="text/javascript">
$(function(){
$('#tt').tree({
url:'<%=url %>',
checkbox:<%=checkbox%>,
onlyLeafCheck:<%=onlyLeafCheck%>
});
});
function getOrg(){
var nodes = $('#tt').tree('getChecked');
var s = '';
var ids = '';
for(var i=0; i<nodes.length; i++){
if (ids != '') {
s += ',';
ids += ",";
}
s += nodes[i].text;
ids += nodes[i].id;
}
alert("ids=" + ids + "\ntext=" + s);
}
</script>
position:absolute;z-index:999;确保树状图不会被其他元素遮挡。
json数据：
[{
"id": 0,
"text": "Node 0",
"state": "closed",
"children":[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12",
"checked":true
}]
},{
"id": 2,
"text": "Node 2",
"state": "open",
"children": [{
"id": 21,
"text": "Node 11"
},{
"id": 22,
"text": "Node 12",
"checked":true
}]
}
]
}]
完成……
源码下载
网友评论