以上为选中效果图和搜索的效果图
- 需要引用Ztree相关的js以及css<!DOCTYPE html<html>
<head> <title></title> <style> ul.ztree { border: 1px solid #617775; background: #f0f6e4; } .userInput{ height: auto; background-color: #FFF !important; border: 1px solid #FFF; border-radius: 1px; color: inherit; display: block; width: 100px; margin-top: 10px; } .usera{ padding: 2px 5px; background: #5FB878; border-radius: 2px; color: #fff; display: block; line-height: 20px; height: 20px; margin: 7px 5px 2px 0; float: left; } </style> </head> <body class="gray-bg"> <div> <div class="form-group"> <label class="col-sm-2 control-label">执行者 : </label> <div class="col-sm-10" style="display: table;"> <div class="layui-input multiple" id="workUserTree" style="margin-left: 0px;display: table-cell;" > <div id="userIdInfo"></div> <input type="text" id="userName" class="userInput" autocomplete="off"> </div> </div> </div>
<!-- 用于存放下拉框的组织树--> <div id="menuContent_dept" class="menuContent" style="display: none; position: absolute;"> <ul id="treeDemo_dept" class="ztree" style="margin-top: 0; width: 255px;"></ul> </div> </div> <script type="text/javascript"> var userId=[]; //用于存放选中的人 var setting = { view : { dblClickExpand : true, selectedMulti : true,//可以多选 showLine : true }, check : { enable : true,//显示复选框 chkStyle : "checkbox" }, data : { simpleData : { enable : true } }, callback : { onCheck : zTreeOnCheck } }; $(function() { search(); //搜索input回车事件 $("#userName").keydown(function(e) { if (e.keyCode == 13) { search(); } }); //标签删除 $("#workUserTree").on("click", ".usera", function(event){ var id=$(this).attr('value'); $(this).remove(); var treeObj = $.fn.zTree.getZTreeObj("treeDemo_dept"); var nodes = treeObj.getNodeByParam("aid",id); treeObj.checkNode(nodes,false,true); var index = userId.indexOf(parseInt(id)); //获取id的下标 if (index > -1) { userId.splice(index, 1); //移除该下标 } event.stopPropagation(); }) $("#workUserTree").click(function(){ showMenu_dept(); }); }); // 显示组织树 function showMenu_dept() { var cityObj = $("#workUserTree"); var cityOffset = $("#workUserTree").offset(); $("#menuContent_dept").css({ left : cityOffset.left + "px", top : cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown_dept); } //隐藏组织树 function onBodyDown_dept(event) { if ($(event.target).parents("#menuContent_dept").length == 0) { hideMenu_dept(); } } function hideMenu_dept() { $("#menuContent_dept").fadeOut("fast"); $("#userName").val(""); search(); $("body").unbind("mousedown", onBodyDown_dept); } //组织树选中事件 function zTreeOnCheck(e, treeId, treeNode) { var checked = treeNode.checked; var type = treeNode.types; var str ='' ; if(type==2){ //选中人 var id =treeNode.aid; var index = userId.indexOf(id); //获取id的下标 if (index > -1) { userId.splice(index, 1); //移除该下标 $("a[class='usera'][value=" + treeNode.aid + "]").remove(); } if(checked){ //选中 userId.push(id) str ='<a class="usera" value='+treeNode.aid+' href="javascript:;"><span>'+treeNode.name+'</span><i class="layui-icon">ဆ</i></a>'; } }else{ //选中部门 str = getAllChildrenNodes(treeNode,str,checked); } $("#userIdInfo").before(str) } // 递归，获取所有子节点 function getAllChildrenNodes(treeNode,result,checked){ if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (var i = 0; i < childrenNodes.length; i++) { if (childrenNodes[i].types == 2) { var index = userId.indexOf(childrenNodes[i].aid); //获取id的下标 if (index > -1) { userId.splice(index, 1); //移除该下标 $("a[class='usera'][value="+ childrenNodes[i].aid + "]").remove(); } if (checked) { userId.push(childrenNodes[i].aid) result += '<a class="usera" value='+childrenNodes[i].aid+' href="javascript:;"><span>' + childrenNodes[i].name + '</span><i class="layui-icon" >ဆ</i></a>'; } } result = getAllChildrenNodes(childrenNodes[i], result,checked); } } } return result; } // 搜索按钮事件 function search() {
var deptList = {"result":1,"code":"","data":{"deptList":[{"types":1,"idpath":"169","sex":null,"icon":"/img/icon/dept.png","pId":169,"sort":1.01,"name":"董事长 ","id":"169","rootPath1":"169","nocheck":false,"aid":0,"open":true,"cid":0},{"types":1,"idpath":"2","sex":null,"icon":"/img/icon/dept.png","pId":2,"sort":2.01,"name":"项目经理","id":"39","rootPath1":"2","nocheck":false,"aid":0,"open":true,"cid":0},{"types":2,"idpath":"169/5","sex":1,"icon":"/img/icon/man.png","pId":169,"sort":1.0,"name":"张三","id":"c6ee9c96-bcda-11e9-a2c1-54bf6404ef9f","rootPath1":"169,5","nocheck":false,"aid":5,"open":true,"cid":801},{"types":2,"idpath":"2/15","sex":1,"icon":"/img/icon/man.png","pId":39,"sort":39.01,"name":"李四","id":"c6ee9cc4-bcda-11e9-a2c1-54bf6404ef9f","rootPath1":"2,15","nocheck":false,"aid":15,"open":true,"cid":723},{"types":2,"idpath":"2/17","sex":1,"icon":"/img/icon/man.png","pId":39,"sort":39.02,"name":"刘洋洋","id":"c6ee9cd9-bcda-11e9-a2c1-54bf6404ef9f","rootPath1":"2,17","nocheck":false,"aid":17,"open":true,"cid":433},{"types":2,"idpath":"2/18","sex":1,"icon":"/img/icon/man.png","pId":39,"sort":39.03,"name":"苏妲己","id":"c6ee9cec-bcda-11e9-a2c1-54bf6404ef9f","rootPath1":"2,18","nocheck":false,"aid":18,"open":true,"cid":434},{"types":2,"idpath":"2/19","sex":1,"icon":"/img/icon/man.png","pId":39,"sort":39.05,"name":"羊刀","id":"c6ee9cfd-bcda-11e9-a2c1-54bf6404ef9f","rootPath1":"2,19","nocheck":false,"aid":19,"open":true,"cid":435}]},"desc":"成功"} if (userId.length > 0) { for (var i = 0; i < deptList.length; i++) { //如果已经有选中的 就默认勾选 if (userId.indexOf(deptList[i].aid) > -1 && deptList[i].types == 2) { deptList[i].checked = true; } } } $.fn.zTree.init($("#treeDemo_dept"), setting, deptList); } }
</script> </body> </html>