转：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;
        }
时间： 2024-09-29 22:51:44

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

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

上拉刷新下拉加载控件-PullToRefresh

在很多软件中,我们会用到上拉刷新,同时大多也会有下拉加载的功能,PullToRefresh这个控件就可以帮我们实现这个效果. 要使用这个空间首先我们要导包 布局文件 布局文件中就是添加了一个最简单的PullToRefreshListView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/r

Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件的真实位置还是在原来动画前的那里.举个例子,如果有个Button,你给它设置了动画,让它移动到其他位置,当移动完成后,你会发现,点击Button没有任何效果,而在Button原来的位置,就是动画前的位置点击,明明没有任何控件,却看到了点击Button的效果.不知道Google为什么要这样设计.解决思

通用版的上拉刷新下拉加载控件

通用版的上拉刷新下拉加载控件 适用于各种控件实现上拉刷新,下拉加载的功能. 下载地址:http://www.devstore.cn/code/info/964.html 运行截图:    

转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给

【MFC】picture控件 两种有细微差别的动态加载图片方法

摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门  VS2010  VC++  MFC 上一节中鸡啄米讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是静态文本控件,因此两者的使用方法有很多相同之处,所属

自定义SWT控件二之自定义多选下拉框

2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; import org.eclipse.swt.SWT; import org.eclipse.swt.custom.CLabel; import or

Html5下拉控件同时支持文本输入和下拉代码

有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="position:relative;"> <span style=&quo

DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部

private void dgvLoad_Scroll(object sender, ScrollEventArgs e) { if (e.ScrollOrientation == ScrollOrientation.VerticalScroll) { if (e.NewValue + dgvLoad.DisplayedRowCount(false) == dgvLoad.Rows.Count) { MsgShow.Warning(string.Format("NewValue:{0}--Old