jqxtree的简单搜索框的实现

最新推荐文章于 2023-06-14 10:21:52 发布

sinweng_12138

最新推荐文章于 2023-06-14 10:21:52 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： html 搜索 javascript

本文链接：https://blog.csdn.net/sinat_36421705/article/details/68064152

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

由于没有找到jqxTree的前台模糊匹配（有一个incrementalSearch，但是效果并不是很好），
所以动手写了一个简单的jqxTree search

html部分


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta name="keywords" content="jQuery Tree, Tree Widget, Tree" />
        <meta name="description" content="jqxTree的搜索框控件" />
        <title id='Description'>jqxTree的简单搜索框控件</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="jqxTree_search.js"></script>
        <script type="text/javascript" src="events.js"></script>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #container{
                width: 200px;
                height: 400px;
                overflow-x: hidden;
                overflow-y: auto;
                border: 1px solid #ccc;
            }
            .toolbar{
                width: 100%;
                height: 40px;
                position: relative;
                border-bottom: 1px solid #ccc;
            }
            .toolbar input{
                width: 100%;
                height: 100%;
                outline: none;
                border: 0;
                padding-left: 10px;
            }
            .toolbar span{
                display: block;
                width: 20px;
                height: 20px;
                right: 5px;
                top: 50%;
                margin-top: -10px;
                cursor: pointer;
                position: absolute;
            }
            .jqxTreex{
                width: 100%;
                border: 0;
            }
        </style>
    </head>

    <body>
        <div id='container'>
                <div class="toolbar">
                    <input type="text" name="" id="searchBox" />
                    <span class="wx_jqx_reset" title="没有引图标库 用个X代替">x</span>
                </div>



                <div id='jqxTree' class="jqxTreex">
                </div>
        </div>
    </body>
</html>

jqxTree_search.js

var jqxTreeSearch = function(id, textboxId, delayTime) {
    this.tree = $('#' + id); //树容器标识
    this.inputs = $('#' + textboxId); //输入框标识
    this.preValue = '#####$$$$$'; //初始时，上一次的值
    this.delayTime = delayTime;     //延迟时间
    this.timer = null;  //定时器
};

jqxTreeSearch.prototype = {
    Search: function(value) {
        //获取树的所有子节点
        clearTimeout(this.timer);//清除定时器
        var items = this.tree.jqxTree('getItems');
        var inputValue = $.trim(value); //去除首尾空格，缓存当前
        var that = this;

            this.timer = setTimeout(function() {    //设置定时器
                if(inputValue != that.preValue) {
                    if(inputValue == '') { //输入框没有值(删除)
                        that.resetItem();
                        /*that.ExpandedAll();*/
                    } else {
                        that.CollapsedAll();
                        that.resetItem();
                        var matchedNodeList = [];
                        if(that.tree && that.tree.length > 0) {
                            var node = null;
                            for(var i = 0, len = items.length; i < len; i++) {
                                node = items[i];
                                if(that.isMatch(inputValue, node.label)) {
                                    matchedNodeList.push(node);
                                }
                            }
                            that.showParent(matchedNodeList);
                            that.showChilden(matchedNodeList);
                            that.showNode(matchedNodeList);

                        }
                    that.preValue = value;
                    }
                }
            }, this.delayTime);
    },
    isMatch: function(searchText, targetText) {

        return targetText.toUpperCase().indexOf(searchText.toUpperCase()) != -1;
    },
    hideNode: function(arr) {
        var node = null;
        for(var i in arr) {
            node = arr[i];
            this.tree.jqxTree('disableItem', node.element);

        }
    },
    showNode: function(arr) {
        var node = null;
        for(var i in arr) {
            node = arr[i];
            $(node.titleElement[0]).css({
                'background': '#3399ff',
                'color': '#fff'
            });
        }
    },
    CollapsedAll: function() {
        this.tree.jqxTree('collapseAll');
    },
    ExpandedAll: function() {
        this.tree.jqxTree('expandAll');
    },

    resetItem: function() {
        /*console.log(this.timer);
        clearTimeout(this.timer);//清除定时器*/
        var items = this.tree.jqxTree('getItems');
        for(var i = 0, len = items.length; i < len; i++) {
            this.tree.jqxTree('enableItem', items[i].element);
            $(items[i].titleElement[0]).css({
                'background': '#fff',
                'color': '#000'
            });
        }
    },
    showChilden: function(arr) {
        var node = null;
        for(var i in arr) {
            node = arr[i];
            if(node.hasItems) {
                this.tree.jqxTree('expandItem', node.element);
            }
        }
    },
    showParent: function(arr) {
        var node = null;
        for(var i in arr) {
            node = arr[i];
            if(node.parentElement) {
                var parEle = node.parentElement;
                this.tree.jqxTree('expandItem', parEle);
            }
        }
    }

};

$(document).ready(function() {
    // Create jqxTree
    var source = [{
            icon: "../../images/mailIcon.png",
            label: "Mail",
            expanded: true,
            items: [
                { icon: "../../images/calendarIcon.png", label: "王1" },
                { icon: "../../images/contactsIcon.png", label: "王2", selected: true }
            ]
        },
        {
            icon: "../../images/folder.png",
            label: "Inbox",
            expanded: true,
            items: [
                { icon: "../../images/folder.png", label: "李一" },
                { icon: "../../images/folder.png", label: "李二" },
                { icon: "../../images/folder.png", label: "李三" },
                { icon: "../../images/folder.png", label: "Other" },
            ]
        },
        { icon: "../../images/recycle.png", label: "Deleted Items" },
        { icon: "../../images/notesIcon.png", label: "Notes" },
        { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
        { icon: "../../images/favorites.png", label: "Favorites" },
        { icon: "../../images/recycle.png", label: "Deleted Items" },
        { icon: "../../images/notesIcon.png", label: "Notes" },
        { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
        { icon: "../../images/favorites.png", label: "Favorites" },
    ];

    // create jqxTree

    $('#jqxTree').jqxTree({ source: source, width: '100%', checkboxes: true });
    $('#jqxTree').jqxTree('collapseAll');
    var c1 = new jqxTreeSearch('jqxTree', 'searchBox',500);
    console.log(c1)
    $('#searchBox').on('keyup', function() {
        var that = $(this);
        c1.Search(that.val());
    })

    $('.wx_jqx_reset').on('click',function(){
        $(this).parent().find('#searchBox').val('');
        c1.resetItem();
    });
});

实际效果图
页面初始

模糊搜索

代码待会另附

sinweng_12138

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jqxtree的简单搜索框的实现

由于没有找到jqxTree的前台模糊匹配（有一个incrementalSearch，但是效果并不是很好），所以动手写了一个简单的jqxTree search html部分<!DOCTYPE html><html lang="en"> <head> <meta name="keywords" content="jQuery Tree, Tree Widget, Tree"
复制链接

扫一扫

专栏目录