zTree的菜单筛选

作者: 纯洁的小怪兽 | 来源:发表于2017-01-16 14:54 被阅读0次

zTree的菜单筛选
创建 ZTree
iOS 封装电商通用筛选菜单,自由配置
iOS 筛选菜单
选中ztree组件中数据没有提交问题
ztree树的使用
》》》PHP初入---（四）
筛选菜单控件
Android自定义PopupWindow实现流式布局筛选控件（
栗子——ListView实现筛选菜单滑动吸顶悬停

1.首先需要引入的js/css

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>

exhide这个文件必须引入否则无法做筛选

2.html

<body>
    <div >
        <div class="search-bar">
            <input id="keyword" type="text" placeholder="搜索菜单">
            <button id="search-bt">搜索</button>
        </div>
        <div class="content">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>

</body>

3.js部分

（这里用的是静态数据，也可以异步加载数据，不影响筛选）

var hiddenNodes=[]; //用于存储被隐藏的结点

$(function(){
    init();
})

function init(){
    var zNodes=[    //ztree 测试数据，也可以从数据库拉取
        {
            name:"根节点",
            open:true,
            children:[
                {
                    name:"父节点A1",
                    open:true, 
                    children:[
                        {
                            name:"子节点A11"
                        },
                        {
                            name:"子节点A12"
                        },
                        {
                            name:"子节点A13"
                        },
                        {
                            name:"子节点A14"
                        }
                    ]
                },{
                    name:"父节点B1",
                    open:true, 
                    children:[
                        {
                            name:"子节点B11"
                        },
                        {
                            name:"子节点B12"
                        },
                        {
                            name:"子节点B13"
                        },
                        {
                            name:"子节点B14"
                        }
                    ]
                },
            ]
        }
    ];

    var setting = {     //ztree配置选项
            data: {
                key: {
                    name:"name",
                    title: "name"
                }
            }
            //在这里可是使用异步加载async
    };

    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    //或者$.fn.zTree.init($("#treeDemo"), setting);也是可以的
    $("#search-bt").click(filter);
};

//过滤ztree显示数据
function filter(){
    //显示上次搜索后背隐藏的结点
    zTreeObj.showNodes(hiddenNodes);

    //查找不符合条件的叶子节点
    function filterFunc(node){
        var _keywords=$("#keyword").val();
        if(node.isParent||node.name.indexOf(_keywords)!=-1) return false;
        return true;        
    };

    //获取不符合条件的叶子结点
    hiddenNodes=zTreeObj.getNodesByFilter(filterFunc);
    
    //隐藏不符合条件的叶子结点
    zTreeObj.hideNodes(hiddenNodes);
};