easyui的tree之模糊查询

最新推荐文章于 2022-02-09 11:33:57 发布

cgsthtm

最新推荐文章于 2022-02-09 11:33:57 发布

阅读量4.2k

点赞数 1

分类专栏： javascript jquery 文章标签： easyui tree

本文链接：https://blog.csdn.net/CGS_______/article/details/53349459

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

在不改动原有tree的前提下，添加搜索功能，增加一个input提供搜索关键字，一个div显示与tree节点相匹配的text

            <div>
                <input id="kw" οnkeyup="getContent(this,'tree_menu');" class="search_input" style="width: 250px;" />
                <div id="append" style="background-color: white;width: 250px;border:1px solid #95b8e7" ></div>
            </div>
            <ul id="tree_menu" class="easyui-tree"></ul>

下面是javascript代码

        $('#tree_menu').tree({
            url: "DataList.ashx",
            prerendered: false,
            cascadeCheck: true,
            checkbox: false,
            onClick: function (node) {
                if (node.id != "" && node.id != undefined) {
                    getLivePlay(node.attributes.detlineid);
                }
            },
        });
        var treeid;
        var textid;
  
  
   
           //公共方法
        var dojob = function () {
            $("#" + textid).blur();     //失去焦点事件
            var node = $("#" + treeid).tree('getChildren');    //获取Tree的所有节点
            //$("#" + treeid).tree('expandAll', node.target);    //展开所有节点
            var value = $(".addbg").text();        //获取文本框输入的内容
  
  
  
  
   
               //查找相应节点并滚动到该节点，高亮显示
            for (i = 0; i < node.length; i++) {
                //var treeId = node[i].id;
                var treeName = node[i].text;
                //找到相应的设备
                if (treeName.indexOf(value) >= 0) {
                    if (treeName == value) {
                        //var nodes = $("#" + treeid).tree('find', treeId);   //找到当前的节点
                        //$("#" + treeid).tree('scrollTo', node[i].target);     //滚动到当前节点
                        $("#" + treeid).tree('select', node[i].target);       //高亮显示
                        $("#" + treeid).tree('expand', node[i].target);       //高亮显示
                        var p = $("#" + treeid).tree('getParent', node[i].target);       //高亮显示getParent
                        $("#" + treeid).tree('expand', p.target);       //高亮显示
                    }
                }
            }
            $("#" + textid).val(value);    //将选择的设备显示到搜索框中
            $("#append").hide().html("");   //隐藏下拉框
        }
  
  
  
  
   
       //输入事件
    function getContent(obj, idtree) {
        treeid = idtree;
        textid = obj.id;
        //获取tree的所有节点
        var nodes = $("#" + treeid).tree('getChildren');
        //获取输入的值
        var kw = jQuery.trim($(obj).val());
        if (kw == "") {
            $("#append").hide().html("");
            return false;
        }
        var html = "";
        //匹配并动态加载到下拉框中
        for (i = 0; i < nodes.length; i++) {
            var treeId = nodes[i].id;
            var treeName = nodes[i].text;
  
  
  
  
   
               if (treeName.indexOf(kw) >= 0) {
                //动态加载下拉框和数据
                html = html + "<div style='width:200px;' class='item' οnmοuseenter='getFocus(this)' onClick='getCon(this,treeid);'>" + treeName + "</div>";
            }
        }
        if (html != "") {
            $("#append").show().html(html);
        } else {
            $("#append").hide().html("");
        }
    }
    //获取焦点事件
    function getFocus(obj) {
        $(".item").removeClass("addbg");
        $(obj).addClass("addbg");
    }
    //单击事件
    function getCon(obj, treeid) {
        $("#" + textid).blur();     //失去焦点事件
        var node = $("#" + treeid).tree('getChildren');    //获取Tree的所有节点
        //$("#" + treeid).tree('expandAll', node.target);    //展开所有节点
        var value = $(obj).text();        //获取文本框输入的内容
  
  
  
  
   
           //查找相应节点并滚动到该节点，高亮显示
        for (i = 0; i < node.length; i++) {
            //var treeId = node[i].id;
            var treeName = node[i].text;
            //找到相应的设备
            if (treeName.indexOf(value) >= 0) {
                if (treeName == value) {
                    //var nodes = $("#" + treeid).tree('find', treeId);   //找到当前的节点
                    //$("#" + treeid).tree('scrollTo', node[i].target);     //滚动到当前节点
                    $("#" + treeid).tree('select', node[i].target);       //高亮显示
                    $("#" + treeid).tree('expand', node[i].target);       //高亮显示
                    var p = $("#" + treeid).tree('getParent', node[i].target);       //高亮显示getParent
                    $("#" + treeid).tree('expand', p.target);       //高亮显示
                }
            }
        }
        $("#" + textid).val(value);    //将选择的设备显示到搜索框中
        $("#append").hide().html("");   //隐藏下拉框
    }

详细参考：http://blog.csdn.net/zlts000/article/details/47959173