<!DOCTYPE html>

<HTML>

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>

    <SCRIPT type="text/javascript">

        var setting = {

            data: {

                key: {

                    title: "t"

                },

                simpleData: {

                    enable: true

                }

            },

            view: {

                fontCss: getFontCss

            }

        };

        var nodes =[

            { id:1, pId:0, name:"2", t:"id=1", open:true},

            { id:11, pId:1, name:"22", t:"id=11"},

            { id:12, pId:1, name:"24", t:"id=12"},

            { id:13, pId:1, name:"26", t:"id=13"},

            { id:14, pId:1, name:"28", t:"id=14"},

            { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},

            { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},

            { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},

            { id:23, pId:2, name:"搜我吧", t:"id=23"},

            { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },

            { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},

            { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},

            { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}

        ];

        function focusKey(e) {

            if (key.hasClass("empty")) {

                key.removeClass("empty");

            }

        }

        function blurKey(e) {

            if (key.get(0).value === "") {

                key.addClass("empty");

            }

        }

        var lastValue = "", nodeList = [], fontCss = {};

        function clickRadio(e) {

            lastValue = "";

            searchNode(e);

        }

        function searchNode(e) {

            var zTree = $.fn.zTree.getZTreeObj("sys");

            if (!$("#getNodesByFilter").attr("checked")) {

                                                                                        //如果被选中getNodesByFilter方法

                var value = $.trim(key.get(0).value);

                                                                                        //得到搜索框中的值，传给value

                var keyType = "";

                                                                                        //初始化查询条件

                if ($("#name").attr("checked")) {

                    keyType = "name";

                } else if ($("#level").attr("checked")) {

                    keyType = "level";

                    value = parseInt(value);

                } else if ($("#id").attr("checked")) {

                    keyType = "id";

                    value = parseInt(value);

                                                                                        //如果是根据level和id查的则强制转换为int类型

                }

                if (key.hasClass("empty")) {

                                                                                        //如果搜索框为空，则value为空

                    value = "";

                }

                if (lastValue === value) return;

                lastValue = value;

                                                                                        //如果查询值不变，则直接返回下次结果

                if (value === "") return;

                updateNodes(false);

                if ($("#getNodeByParam").attr("checked")) {

                                                                                        //如果被选中getNodesByParam方法

                    var node = zTree.getNodeByParam(keyType, value);                    //把指定的了结点(查到的第一个)给node

                    if (node === null) {

                        nodeList = [];

                    } else {

                        nodeList = [node];

                    }

                } else if ($("#getNodesByParam").attr("checked")) {

                    nodeList = zTree.getNodesByParam(keyType, value);

                                                                                        //把指定的结点给nodeList

                } else if ($("#getNodesByParamFuzzy").attr("checked")) {                //模糊查询

                    nodeList = zTree.getNodesByParamFuzzy(keyType, value);

                }

            } else {

                updateNodes(false);

                nodeList = zTree.getNodesByFilter(filter);

            }

            updateNodes(true);

        }

        function updateNodes(highlight) {                                       //如果结点数据变了，则动态更新所有ztree结点数据

            var zTree = $.fn.zTree.getZTreeObj("sys");

            for( var i=0, l=nodeList.length; i<l; i++) {

                nodeList[i].highlight = highlight;                              // 高亮显示查到的结果

                zTree.updateNode(nodeList[i]);

            }

        }

        function getFontCss(treeId, treeNode) {

            return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};

        }

        function filter(node) {                                                 //过滤器

            return !node.isParent && node.isFirstNode;

        }

        var key;

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);

            key = $("#key");

            key .bind("focus", focusKey)

                .bind("blur", blurKey)

                .bind("propertychange", searchNode)

                .bind("input", searchNode);

            $("#name").bind("change", clickRadio);

            $("#level").bind("change", clickRadio);

            $("#id").bind("change", clickRadio);

            $("#getNodeByParam").bind("change", clickRadio);

            $("#getNodesByParam").bind("change", clickRadio);

            $("#getNodesByParamFuzzy").bind("change", clickRadio);

            $("#getNodesByFilter").bind("change", clickRadio);

        });

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="sys" class="ztree"></ul>

    </div>

    <div class="right">

        <ul class="list">

            <input type="text" id="key" value="" class="empty" /><br/>

            <!--搜索框-->

            <input type="radio" id="name" name="keyType" class="radio" checked /><span>name</span><br/>

            <!--搜索依据-->

            <input type="radio" id="level" name="keyType" class="radio" /><span>level</span><br/>

            <input type="radio" id="id" name="keyType" class="radio" /><span>id</span><br/>

            <input type="radio" id="getNodeByParam"       name="funType" class="radio"         /><span>getNodeByParam</span><br/>

            <input type="radio" id="getNodesByParam"      name="funType" class="radio"         /><span>getNodesByParam</span><br/>

            <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" checked /><span>getNodesByParamFuzzy </span><br/>

            <input type="radio" id="getNodesByFilter"     name="funType" class="radio"         /><span>getNodesByFilter</span><br/>

        </ul>

    </div>

</div>

</BODY>

</HTML>

javascript入门 之 ztree(七 结点的查询)的更多相关文章

  1. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

  2. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  3. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  4. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  5. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  6. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  7. javascript入门 之 ztree（三 简单json数据）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  8. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  9. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. 安卓手机tcpdump的使用

    一.常规操作步骤 1. 手机要有root权限 2. 下载tcpdump http://www.strazzere.com/android/tcpdump 3. adb push c:\wherever ...

  2. SQLserver用Image格式储存图片

    前言 最近项目更新一个新需求,要求把图片储存在SQLserver中,而不是储存在本地磁盘.很好,又有新东西可以学了. 正文 一.建表 这里大概建几个字段演示一下 CREATE TABLE [dbo]. ...

  3. Python - 变量的作用域

    变量作用域 Python能够改变变量作用域的代码段是 def . class . lamda. if/elif/else.try/except/finally.for/while 并不能涉及变量作用域 ...

  4. 深度学习归一化：BN、GN与FRN

    在深度学习中,使用归一化层成为了很多网络的标配.最近,研究了不同的归一化层,如BN,GN和FRN.接下来,介绍一下这三种归一化算法. BN层 BN层是由谷歌提出的,其相关论文为<Batch No ...

  5. Blazor-断开连接后重新加载浏览器

    在大多数情况下,Blazor将与以前相同的线路上重新连接到服务器.但有时无法重新连接,需要重新加载web浏览器才能使网站重新工作.如果服务器回收应用程序池,则需要手动重新加载页面在没有调试的情况下在I ...

  6. [Dynamic Programming]动态规划之背包问题

    动态规划之背包问题 例题 现有4样物品n = ['a', 'b', 'c', 'd'],重量分别为w = [2, 4, 5, 3],价值分别为v = [5, 4, 6, 2].背包最大承重c = 9. ...

  7. JavaScript 模式》读书笔记（4）— 函数2

    这篇,我们仍旧继续学习函数. 二.回调模式 函数都是对象,这表示它们可以作为参数传递给其它函数. function writeCode(callback) { // 执行一些事务... callbac ...

  8. GPP(Group Policy Preference)组策略偏好漏洞利用

    总结与反思: GPP中管理员给域成员添加的账号信息存在xml,可以直接破解拿到账号密码. Windows Sever 2008 的组策略选项(GPP)是一个新引入的插件,方便管理员管理的同时也引入了安 ...

  9. 贪心-最大相容区间-Maximum Number of Events That Can Be Attended

    2020-02-16 16:24:19 问题描述: 问题求解: 看起来就像是sort + 贪心,但是具体如何做呢? 实际上本题是最大相容区间的变种题,在最大相容区间里,我们按照结束时间对interva ...

  10. sql数据库（更新）

    安装postgreSQL,遇到的bug:不要选择默认路径,安装到program files,否则连接数据库的时候会出现问题 如图显示数据库连接成功. 1.创建数据库——执行创建数据库的SQL 语句 C ...