ztree实例（点击input弹出员工部门树）

最新推荐文章于 2024-08-01 09:37:29 发布

阿条.

最新推荐文章于 2024-08-01 09:37:29 发布

阅读量1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/liu066154/article/details/94739413

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html

<link rel="stylesheet" href="${ctx}/Hplus/js/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css"/>
<div class="form-group">
    <label class="col-sm-2 control-label">发送到：</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="sendto"  autocomplete="off">
        <div style="width: 100%;position: absolute;z-index:10;border: none">
        <!-- 用于展开ztree树，z-index：10 则div堆叠在最表层 -->
	<div id="menuContent" class="menuContent" hidden="true" style="border:1px solid #617775;background: #F5F5F5;height: 300px;margin-right: 28px;padding: 20px;overflow-y: auto;">
	<ul id="connet" class="ztree"></ul>
        </div>
        </div>
    </div>
</div>

 <script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
 <script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
 <script type="text/javascript" src="${ctx}/Hplus/plugins/zTree_v3/js/jquery.ztree.exedit.js"></script>
 <script type="text/javascript">
	   $("#sendto").on("click", function(e){
		    if($("#menuContent").is(":hidden")){
		        $("#menuContent").show();
		    }else{
		        $("#menuContent").hide();
		    }

		    $(document).one("click", function(){
		        $("#menuContent").hide();
		    });

		    e.stopPropagation();
		});
		$("#menuContent").on("click", function(e){
		    e.stopPropagation();
		});
		var zTree;
		var setting = {
		async:{  
            enable:true,
            url: ""
		},
		view: {
            removeHoverDom: false,
            selectedMulti: true,
            addDiyDom: addDiyDom,
            dblClickExpand: false,
            showLine: true            
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: ""
            }
        },
        edit: {
            drag: {
                isCopy: false,
				isMove: false,
            },
            enable: false,
            showRenameBtn: true,
            showRemoveBtn: setRemoveBtn
        },
        callback: {
        	beforeEditName: beforeEditName,
        	beforeRemove: beforeRemove,	
            onClick: onClick,
            onCheck: onCheck
        }
    };
$(function () {
	  $.get("${ctx}/mail/userList",
		function tree(data) {
			tree=$.fn.zTree.init($("#connet"), setting, data);$._tree=tree;
			expandNode();
		});
}); 

function expandNode() {
	var zTree = $.fn.zTree.getZTreeObj("connet");
    var nodes = zTree.getNodes();
    for (var i = 0; i < nodes.length; i++) { //设置节点展开
    	zTree.expandNode(nodes[i], true, false, true);
    } 
}

function beforeClick() {
	var zTree = $.fn.zTree.getZTreeObj("connet");
	zTree.expandNode(treeNode);
	$("#"+treeNode.tid+"_span").css("background", "blue");
	return (treeNode.click != false);
}

function onClick(event, treeId, treeNode, clickFlag) {
	
	var zTree = $.fn.zTree.getZTreeObj("connet");
	//点击当前节点，展开当前节点的子节点
	//zTree.expandNode(treeNode); 
	//提交post并刷新表格  
	 inputs = $("#queryForm").serializeArray();
        var postData = {};
        for(x in inputs){
        	postData[inputs[x].name] = inputs[x].value;
        }
    $("#table_grid").jqGrid("setGridParam",{url:'${ctx}/grid/queryconnets/sys_dpt_user?id='+treeNode.id,postData:postData}).trigger("reloadGrid");  
}
/**
 * 设置字数过长隐藏
 */
function addDiyDom(treeId, treeNode) {  	
    var spaceWidth = 5;  
    var switchObj = $("#" + treeNode.tId + "_switch"),      
    icoObj = $("#" + treeNode.tId + "_ico");  
    switchObj.remove();  
    icoObj.before(switchObj);   
      
    icoObj.parent().before(switchObj);
    var spantxt = $("#" + treeNode.tId + "_span").html();
    if (spantxt.length > 9) {
        spantxt = spantxt.substring(0, 9) + "...";
        $("#" + treeNode.tId + "_span").html(spantxt);
    } 
}
/**
 * 设置父节点不可删除 
 */
function setRemoveBtn(treeId, treeNode) {
	return !treeNode.isParent;
}
/**
 * 重命名文件夹  
 */
function beforeEditName(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("connet");
	var node = zTree.selectNode(treeNode);
    openTreee("${ctx}/grid/updateDptPage?id="+treeNode.id+"&parentId="+treeNode.pid+"&treeNode="+treeNode,"编辑组织机构",treeNode);  
 
	return false;
} 


/**
 * 删除节点 
 */
function beforeRemove(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("connet");
	var node = zTree.selectNode(treeNode);
	dele(treeNode);
	return false;

}

/**
 * 新增节点
 */
function addHoverDom(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("connet");
	var node = zTree.getSelectedNodes();	
	
	var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='添加部门 ' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
         openTreee("${ctx}/grid/addDptPage?id="+treeNode.id+"&parentId="+treeNode.pid,"添加组织机构",treeNode);  
        return false;
    });
};
//展开
function expand(){
var zTree = $.fn.zTree.getZTreeObj("connet");
 zTree.expandAll(true);
 $("#btnExpand").attr("display","none");
 document.getElementById("btnExpand").style.display="none";
 document.getElementById("btnCollapse").style.display="inline-block";
}
//折叠
function collapse(){
var zTree = $.fn.zTree.getZTreeObj("connet");
 zTree.expandAll(false);
 document.getElementById("btnCollapse").style.display="none";

 document.getElementById("btnExpand").style.display="inline-block";
}

function showDiv() {
	$("#menuContent").show();
}

//刷新
function reFresh(){
 //$.get("${ctx}/grid/queryZtree/sys_department",
 $.get("${ctx}/grid/queryZtree/sys_department",
		function tree(data) {
			$.fn.zTree.init($("#connet"), setting, data);
			
			expandNode();
		    
		});
}
	function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("connet"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			k = "";
			for (var i=0, l=nodes.length; i<l; i++) {
			   if(!nodes[i].isParent){
			      v += nodes[i].name + ",";
			      k += nodes[i].id + ",";
			   }
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#sendto");
			var cityKey = $("#send");
			cityObj.attr("value", v);
			cityKey.attr("value",k);
		}
</script>

controller

        /**
	 * 获取收件人列表
	 */
	public void userList() {
		User user = this.getSessionAttr(EovaConst.USER);
		String userId = user.getStr("id");
		
		List<Record> list = Db.find("SELECT id,dpt_name name,pid from sys_department  UNION SELECT id,user_name name, department pid from sys_user where id != 1 and id !=?", userId);
	    renderJson(list);
	}