最近做了一个树状的下拉列表，在这里记录一下，以后可以直接使用
项目中的树状下拉列表是用来选择人员用的，具体实现展示如下：
先说一说功能，左边的人员数是提供选人的，当点击中间的按钮，选中的人员会直接移到右边，如果要删除已选中的人员，只需要双击右边人的姓名即可，点击确定进行集体的业务逻辑操作，一般就是新增人员到某一个表中。
我们再来看看这个DIV的具体代码，由于项目中在多个地方都使用到了这个人员树，所以我把这个DIV抽象出来当作一个公共的jsp页面。如需调用，只需要include这个jsp即可
userTree.jsp:
<%@ page contentType="text/html;charset=utf-8"%> <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="sino" tagdir="/WEB-INF/tags"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <!--弹出窗口,人员树必要--> <link href="https://www.jb51.net/${ctx}/static/lib/jquery-easyui/themes/default/easyui.css" type="text/css" /> <script src="https://www.jb51.net/${ctx}/static/lib/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script> <style type="text/css"> li:hover { cursor: pointer; } </style> <!-- 模态框弹出设置评估人 --> <div aria-hidden="true" data-backdrop="static"> <div> <div> <input type="hidden" /> <div> <h4>请选择评估人</h4> </div> <div> <div > <div> 待选择人 </div> <div> 已选择人 </div> </div> <div> <div> </div> <div> <button type="button">>></button> </div> <div> <ul> </ul> </div> <p></p> </div> <div> <input type="button" value="确定"> <input type="button" value="取消"> </div> <p/> </div> </div> </div> </div> <script type="text/javascript"> //人员数组(longinName) 本项目是已登录名为主键存入，也可存入userID var arr = []; //点击确定的处理逻辑方法名称,调用方法的时候需要设置 var fn = ""; //展示人员树，右边没有默认值 function showTree(groupId) { //查询范围是在groupId这个部门以下的节点部门和人员 //console.log(groupId); $('#tt').tree({ //一般情况下，除了url外，其他参数非必选 //url: contextPath + requestURL,//请求的后台路径 //这里需要注意的是后台url不要指定请求方式为GET方式，否则会报错。 url : CONTEXT_PATH + "/sysmgr/user/chooseAssessorTree?groupId="+groupId, animate : true, //是否需要动画效果 checkbox : 'true', //是否需要checkbox 支持复选 cascadeCheck : 'false',//是否级联选中 onlyLeafCheck : 'true', //是否只有leaf节点有checkbox lines : true,//是否显示线 onClick : function(node) { //点击 /* var leaf = $('#tt').tree("isLeaf", node.target); //判断是否为leaf if(leaf){ arr.push(node.id); } */ $('#tt').tree("toggle", node.target);//点击父节点和点击父节点前面的+号一样能展开 }, onLoadError : function(node, data) { alert("查询不到数据,树形加载失败"); return; }, onCheck : function(node, checked) { if (checked) { //arr.push(node); } else { //arr.remove(node); } } /* onBeforeLoad:function(node,param){ param.screeningTxt = $("#screeningTxt").val(); }*/ }); $("#groupuser").modal("show");//显示模态框， } //接口方法，外面的jsp通过调用这个方法来弹出人员树模态框，且希望只能调用这个方法 //展示人员数，右边有默认值 //参数havaDefault表示是否有默认值，注意，批量设置不能够有默认值 布尔值：true,false //参数loginNameDisplayNameStr是longinName和displayName的组合字符串，例如有三个人："zhangsan-张三,lisi-李四,wangwu-王五"，如果没有默认值，就设置为null //参数method表示方法名称，即你点击确定之后返回的人员的处理方法名称，注意这个方法规定参数只能有一个，那就是人员登陆名的一个字符串，多个人用";"隔开 //参数groupId表示传入到后台的一个参数。在本项目中，由于需要根据条件查询出不同公司/部门下的人员，所以传入了部门ID，若没有，可以为null function showTreeDefault(loginNameDisplayNameStr, method, havaDefault,groupId) { arr = [];//需要设置为全局变量 fn = method; if (!havaDefault) { showTree(groupId); return; } if (loginNameDisplayNameStr!=null) { //alert(loginNameDisplayNameStr); //加载默认值到树的右边边框 var result = loginNameDisplayNameStr.split(","); for (var i = 0; i < result.length; i++) { var user = result[i].split("-"); var loginName = user[0]; var displayName = user[1]; var ul = document.getElementById("names"); var li = document.createElement("li"); li.setAttribute("value", loginName); li.setAttribute("ondblclick", "$remove(this)"); li.innerHTML = displayName; ul.appendChild(li); arr.push(loginName); } } showTree(groupId); } function modelCheckAssessors() { if (arr.length != 0) { //将登录名数组以";"隔开组成一个字符串 var loginNameStr = arr.join(";"); returnVal(loginNameStr); } else { returnVal(null); } } function returnVal(retArr) { //调用处理逻辑方法 window[fn](retArr); //关闭模态框 modalHide(); } function modalHide() { //清空右边li的数据 $('ul li').remove(); $("#groupuser").modal("hide"); } function $add() { var nodes = $('#tt').tree('getChecked'); if (nodes.length != 0) { for (var i = 0; i < nodes.length; i++) { var loginName = nodes[i].id; var userName = nodes[i].text; addEleInMainBox(loginName, userName); $('#tt').tree('uncheck', nodes[i].target);//去掉选中的 } } }; function addEleInMainBox(loginName, userName) { //1.判断当前div中是否已经存在该loginName,如果有重复的则不添加 if (arr.Exists(loginName)) { //alert("已经存在"+loginName+"，不再添加"); return; } //2.添加该评估人到li中 var ul = document.getElementById("names"); var li = document.createElement("li"); li.setAttribute("value", loginName); li.setAttribute("ondblclick", "$remove(this)"); li.innerHTML = userName; ul.appendChild(li); arr.push(loginName); } function $remove(obj) { var loginName = obj.getAttribute("value"); obj.parentNode.removeChild(obj); arr.remove(loginName); } Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; Array.prototype.Exists = function(v) { var b = false; for (var i = 0; i < this.length; i++) { if (this[i] == v) { b = true; break; } } return b; }; </script>
下面再来看看java后台是如何来查找这个树的，附上后台代码