js 树菜单 ztree

http://www.ztree.me/v3/api.php

官网 api

js

/**
<div id="menuContent" class="menuContent" style=" position: absolute;">
<ul id="orgTree" class="ztree" style="margin-top:0; 160px;"></ul>
</div>
 */
  
  
    //var allowClick = true; //标记节点是否能被点击
   var sdorg={};
    /**
     * 初始化组织机构树
     * renderId 渲染位置
     * nodeClick 点击时触发的事件
     * beforeNodeClick 点击前触发的事件
     * ischkbox 是否显示多选框
     */
    sdorg.showcurrorg =function (renderId,nodeClick,beforNodeClick,ischkbox) {
    var orgNodes;
    var setting = {
            data:{
                simpleData:{
                    enable:true,
                    idKey:"id",
                    pIdKey:"parentId",
                    root:0
                },
                key:{
                    name:"orgName"
                }
            },
            view:{
                showIcon:true
            },
            check:{
            	enable:ischkbox
            	,chkStyle:'checkbox'
            	,chkboxType:{ "Y": "", "N": "" }
                //,autoCheckTrigger: false
            },
            async:{
                enable:true,
                url:baseURL+"/org/org!listOrgNode.action",
                autoParam:["id"],
                dataFilter:ajaxDataFilter
            },
            callback:{
//                onExpand:expandParentOrg,
                onClick:nodeClick||_nodeClick,
                beforeClick:beforNodeClick||_beforNodeClick,
            }
        };
    
     var url =baseURL+'/org/org!listOrgRoot.action';
        $.ajax({
            url:url,
            type:'post',
            dataType:'json',
            success:function (result) {
                if ('0' == result.code) {
                    $.fn.zTree.init($('#'+renderId), setting, null);
                    var orgTree = $.fn.zTree.getZTreeObj(renderId);
                        orgTree.addNodes(null, result.data.orgList );
                    // 展开机构树的根节点
                    var rootNodes = orgTree.getNodes();
                    if (rootNodes.length > 0)
                        orgTree.expandNode(rootNodes[0], true, false, true);
                    //orgTree.expandAll(true);
                } else {
                    alert(result.desc);
                }
            }
        });
    }
    
    sdorg.showcurrorg1 =function (renderId,nodeClick,nodeCheck,ischkbox,beforeShow,onExpand,orgId,orgName) {
        var orgNodes;
        var setting = {
                data:{
                    simpleData:{
                        enable:true,
                        idKey:"organizationId",
                        pIdKey:"parentId",
                        root:0
                    },
                    key:{
                        name:"organizationName"
                    }
                },
                view:{
                    showIcon:true
                },
                check:{
                	enable:ischkbox
                	,chkStyle:'checkbox'
                	,chkboxType: { "Y": "s", "N": "s" }
                    ,autoCheckTrigger: true
                },
                async:{
                    enable:true,
                    url:baseURL+"/org/org!listOrgNode.action",
                    autoParam:["organizationId"],
                    dataFilter:ajaxDataFilter
                },
                callback:{
//                    onExpand:expandParentOrg,
                    onClick:nodeClick||_nodeClick,
                    onCheck:nodeCheck,
                    onExpand:onExpand
                }
            };
        
         //var url = cur_user_id=="admin"?baseURL+'/orgext/orgext!listOrgRoot.action':baseURL+'/orgext/orgext!listOrgUnderCurrentUserOrg.action';
        var url = orgId?baseURL+'/org/org!listOrgNode.action':baseURL+'/org/org!listOrgRoot.action';
     // alert(orgId); return;
        $.ajax({
                url:url,
                type:'post',
                dataType:'json',
                data:{organizationId:orgId},
                success:function (result) {
                    if ('0' == result.code) {
                    	$.fn.zTree.init($('#'+renderId), setting, null);
                    	var orgTree = $.fn.zTree.getZTreeObj(renderId);
                    	if(orgId){
                    		var newNode = {organizationId:orgId,organizationName:orgName};
                        	orgTree.addNodes(null, newNode);
                    		orgTree.addNodes(orgTree.getNodeByParam("organizationId",orgId,null), result.data.orgList );
                    	}else{
                    		orgTree.addNodes(null, result.data.orgList );
                    		
                    	}
                        // 展开机构树的根节点
                        var rootNodes = orgTree.getNodes();
                        if (rootNodes.length > 0)
                            orgTree.expandNode(rootNodes[0], true, false, true);
                        	//orgTree.expandAll(true);
                        beforeShow&&beforeShow.call();
                    } else {
                        alert(result.desc);
                    }
                }
            });
        }
   
    sdorg.showchildorg= function (renderId,orgId,nodeClick,beforNodeClick,ischkbox,iscanexpand) {
        var orgNodes;
        var setting = {
                data:{
                    simpleData:{
                        enable:true,
                        idKey:"organizationId",
                        pIdKey:"parentId",
                        root:0
                    },
                    key:{
                        name:"organizationName"
                    }
                },
                view:{
                    showIcon:true
                },
                check:{
                	enable:ischkbox
                	,chkStyle:'checkbox'
                	,chkboxType:{ "Y": "", "N": "" }
                    //,autoCheckTrigger: false
                },
                async:{
                    enable:iscanexpand||false,
                    url:baseURL+"/orgext/orgext!listOrgNode.action",
                    autoParam:["organizationId"],
                    dataFilter:ajaxDataFilter
                },
                callback:{
//                    onExpand:expandParentOrg,
                    onClick:nodeClick||_nodeClick,
                    beforeClick:beforNodeClick||_beforNodeClick,
                }
            };
        
        var url = orgId?baseURL+'/orgext/orgext!listOrgNode.action':baseURL+'/orgext/orgext!listOrgRoot.action';
            $.ajax({
                url:url,
                type:'post',
                data:{organizationId:orgId},
                dataType:'json',
                success:function (result) {
                    if ('0' == result.code) {
                        orgNodes =ajaxDataFilter(null, null, result); //result.data.orgList;
                        if (orgNodes.length > 0) { 
                            $.fn.zTree.init($('#'+renderId), setting, orgNodes);
                            // 展开机构树的根节点
                            var orgTree = $.fn.zTree.getZTreeObj(renderId);
                            var rootNodes = orgTree.getNodes();
                            if ((!orgId||iscanexpand)&&rootNodes.length > 0)
                              orgTree.expandNode(rootNodes[0], true, false, true);
                            	//orgTree.expandAll(true);
                        } 
                    } else {
                        alert(result.desc);
                    }
                }
            });
        }
    //
    /**
     * 异步加载节点数据后的处理函数
     * @param treeId
     * @param parent
     * @param result
     */
    function ajaxDataFilter(treeId, parent, result) {
        //if ('0' == result.code) {
            return result.data.orgList;
        //}
    }
    function _nodeClick(event, treeId, treeNode) {
    	//console.info(treeNode);
     //alert(treeNode.organizationId);
     //alert(treeNode.organizationName);
    }
    /**
     * 控制节点是否能被选中
     * @param treeId
     * @param treeNode
     * @param clickFlag
     */
    function _beforNodeClick(treeId, treeNode, clickFlag) {
    }
  //当前对应input框 显示的input 和要隐藏id的input
	var $_currdom2,$_hiddendom2;
	//显示下拉树
	function showMenu2(inputid,hiddenid) {
		$_currdom2 = $("#"+inputid);
		$_hiddendom2 = $("#"+hiddenid);
		var cityOffset = $_currdom2.offset();
		$("#Content").css({left:cityOffset.left, top:cityOffset.top-50}).slideDown("fast");
		$("body").bind("mousedown", onBodyDown2);
	}
	//隐藏下拉树
	function hideMenu2() {
		$("#Content").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown2);
	}
	//点击页面其他位置时，下拉树退出
	function onBodyDown2(event) {
		if (!(event.target.id == "Btn" || event.target.id == "Content" || $(event.target).parents("#Content").length>0)) {
			hideMenu2();
		}
	}
	//节点点击事件
	function onClick2(e, treeId, treeNode) {
		$_currdom2.val(treeNode.organizationName);
		$_currdom2.focus();
		$_hiddendom2.val(treeNode.organizationId);
		$("#Content").fadeOut("fast");
}
    function onCheck(e,treeId,treeNode){
        var treeObj = $.fn.zTree.getZTreeObj("org");
        var $ckNode = treeObj.getCheckedNodes();
        var orgName = "";
        var orgId = "";
        $($ckNode).each(function(){
            orgName+=this.organizationName+",";
            orgId+=this.organizationId+",";
        })
        $_currdom2.val(orgName);
        $_hiddendom2.val(orgId);
    }

html

<!-- 组织架构树 -->
<div id="Content" class="menuContent" style="position:absolute;display:none;z-index:10000;">
    <ul id="org" class="ztree" style="margin-top:0; width:350px; background:white; border:2px dotted #cccccc;"></ul>
</div>