转：zTree树控件实战篇：针对多个下拉加载zTree树应该如何做出合理的配置

今天有一个zTree的朋友遇到一个非常棘手的问题，才研究zTree树控件两天就被上头催着看成果，很是苦恼。他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树，由于对zTree下拉加载树的一些关键配置以及原理的不太深入导致问题无从查起。今天就来一起聊聊这样一个下拉加载zTree的问题。

一、几个关键的配置需要注意

1、针对不同的下拉选择需要有自己独立控制zTree显示位置以及隐藏相应标签的方法；

2、需要根据所点击事件定位zTree的显示位置；

3、zTree树选择后需要加以判断是显示在哪一个对应的文本框内；

4、对于多个下拉需要加载不同zTree的情况我们需要创建多棵独立的zTree树且执行上面的1、2、3三个步骤。

二、针对对个下拉加载同一个zTree的情况

1、创建一个zTree树

var setting = {
            view: {
                dblClickExpand: false,
                selectedMulti: true, //是否允许多选
                txtSelectedEnable: false //是否允许选中节点的文字
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick //节点点击事件
            }
        };

        var zNodes = [
            { id: 1, pId: 0, name: "北京" },
            { id: 2, pId: 0, name: "天津" },
            { id: 3, pId: 0, name: "上海" },
            { id: 6, pId: 0, name: "重庆" },
            { id: 4, pId: 0, name: "河北省", open: true },
            { id: 41, pId: 4, name: "石家庄" },
            { id: 42, pId: 4, name: "保定" },
            { id: 43, pId: 4, name: "邯郸" },
            { id: 44, pId: 4, name: "承德" },
            { id: 5, pId: 0, name: "广东省", open: true },
            { id: 51, pId: 5, name: "广州" },
            { id: 52, pId: 5, name: "深圳" },
            { id: 53, pId: 5, name: "东莞" },
            { id: 54, pId: 5, name: "佛山" },
            { id: 6, pId: 0, name: "福建省", open: true },
            { id: 61, pId: 6, name: "福州" },
            { id: 62, pId: 6, name: "厦门" },
            { id: 63, pId: 6, name: "泉州" },
            { id: 64, pId: 6, name: "三明" }
         ];
       //节点点击事件的实现
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            
            var nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = null;
            if(CurInput == 1)
            {
               cityObj = $("#citySel");  
               cityObj.attr("value", v);          
            }else
            {
                cityObj = $("#citySelTwo");  
                cityObj.attr("value", v);
             }
            
            return false;
        }
       
       //zTree树的初始化
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

 

这样一颗城市zTree树就创建完成了。

2、页面设置多个文本框以及选择的一些标签

<ul class="list">
                <li class="title">&nbsp;&nbsp;<span class="highlight_red">选择城市时，按下 Ctrl 键可以进行多选</span></li>
                <li class="title">&nbsp;&nbsp;城市1：<input id="citySel" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
                <li class="title">&nbsp;&nbsp;城市2：<input id="citySelTwo" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtnTwo" href="#" onclick="showMenuTwo(); return false;">选择</a></li>
</ul>

 

3、用于装在zTree树对象的容器

<div id="menuContent" class="menuContent" style="displayx: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
        </ul>
</div>

 

不能看出容器被一个外围div包裹，且默认设置此div不可见，位置属性为绝对位置。

4、城市1的选择a标签的onclick事件实现

这个主要就是显示zTree树，且根据当前鼠标点击的位置来动态设置容器外围div的位置值。

//点击“选择”后显示zTree树
        function showMenu() {
            CurInput = 1; //标记第一个文本框
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            //定位zTree外围div容器位置
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
            //绑定页面的鼠标按下事件
            $("body").bind("mousedown", onBodyDown);
        }
        //隐藏zTree外围div容器
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }  
        //判断当前事件来源
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

 

5、城市2的选择a标签的onclick事件实现

描述如同城市1一样：

//城市2相关的下拉配置
        function showMenuTwo() {
            CurInput = 2; //标记第二个文本框
            var cityObj = $("#citySelTwo");
            var cityOffset = $("#citySelTwo").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");

            $("body").bind("mousedown", onBodyDownTwo);
        }
        function hideMenuTwo() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDownTwo);
        }
        function onBodyDownTwo(event) {
            if (!(event.target.id == "menuBtnTwo" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenuTwo();
            }
        }

 

6、zTree树节点选择后如何判断应该填充至哪一个文本框内？

大家可能从上面的显示zTree树的代码段中已经看出一些端倪了的吧！在显示zTree的时候我会记录一个变量的值，这个变量就是CurInput，以此来标记是选择的城市1还是城市2，有了这样一个变量值，我们在zTree的树节点选中事件中我们就可以根据此进行判断应该填充至哪一个文本框内，事件实现片段如下所示：

//节点点击事件的实现
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            
            var nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = null;
            //城市1
            if(CurInput == 1)
            {
               cityObj = $("#citySel");  
               cityObj.attr("value", v);          
            }else
            {
                //城市2
                cityObj = $("#citySelTwo");  
                cityObj.attr("value", v);
             }            
            return false;
        }