关于zTree树形插件搜索框。

原创 2015年11月20日 15:30:15

       今天学习了一个zTree树形搜索框的功能,学习之前先把zTree的相关知识看了一遍,记录下来如下:

1.获取 id 为 treeDemo 的 zTree 对象

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
2.zTree 初始化方法,创建 zTree 必须使用此方法
var zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
obj           jQuery Object
用于展现 zTree 的 DOM 容器
3.查找isHidden = true的节点数据
nodes = zTree.getNodesByParam("isHidden", true);
getNodesByParam:根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象集合
例如: 查找 name = "test" 的节点数据
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodesByParam("name", "test", null);
4.初始化 zTree 时,如果节点设置 isHidden = true,会被自动隐藏
true 表示被隐藏
false 表示被显示
例如:查看第一个根节点是否被隐藏
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getNodes();
if (sNodes.length > 0) {
    var isHidden = sNodes[0].isHidden;
}

showNodes:显示所有的节点。
5.expandAll
var searchStr = $('#org').val();//通过id为org获取页面上输入的值
 expandAll:展开全部节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);
6.transformToArray
将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式。
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformToArray(treeObj.getNodes());
n.name.indexOf(searchStr) >= 0
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果找到一个 searchStr,则返回 searchStr 的第一次出现的位置。n.name 中的字符位置是从 0 开始的。


如下是具体实现代码:

(1)jsp上的input框,引入js:<script type="text/javascript" src="resource/js/xxxxx.js"></script>

<input type="text" class="form-control" id="searchId" oninput="showSelected('searchId','treeDemo')"
                        style="width:60%;margin-left:5%;height:22px;"  placeholder="请输入检索内容"/>

(2)具体js

xxxxx.js

内容:

备注:页面中必须导入ztree的相关js


//将所有隐藏的节点显示出来。

    function refreashNodes(treeDemo) {
        var zTree = $.fn.zTree.getZTreeObj(treeDemo),
        nodes = zTree.getNodesByParam("isHidden", true);
        zTree.showNodes(nodes);
    }

    function showSelected(searchId,treeDemo){
        var searchStr = $('#searchId').val();//通过id获取页面输入的值
        if (searchStr=='') {
            refreashNodes(treeDemo);
            zTree.expandNode(zTree.getNodeByParam("level", "0", null), true);
            return
        }

        var zTree = $.fn.zTree.getZTreeObj(treeDemo);
        var allNodes = zTree.transformToArray(zTree.getNodes());
        var nodes = new Array();
        $.each( allNodes, function(i, n){ //each用于数组遍历
            if (n.NAME.indexOf(searchStr) >= 0 || n.PINYIN.indexOf(searchStr.toUpperCase()) >= 0) {     //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置(若出现至少是0或者大于0,若不出现,就不执行push方法了)。
                nodes.push(n);   //push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
            }
        });
    
        zTree.hideNodes(allNodes); //隐藏所有节点
        if(nodes.length == 0){
            return
        }
    
        var resultNodes  = new Array();
        $.each( nodes, function(i, n){
            var tempNode = n;
            for(var i=0;i< n.level;i++){
                tempNode = tempNode.getParentNode();//获取当前被选中的节点的父节点
                resultNodes.push(tempNode);
            }
        });
        resultNodes = resultNodes.concat(nodes);           //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
    
        zTree.showNodes(resultNodes);
        zTree.expandAll(true);
    }


以上即实现了功能,数据库里面必须由NAME和PINYIN字段,而且要大写,因为json是要区分大小写的,请注意,本人就遇到过坑。

还有一种是用<%@include file="/jsp/common/xxxxx.jsp" %>Include指令来引入的jsp界面,具体实现过程与这个类似,这个下篇介绍。

版权声明:

相关文章推荐

ztree 树的模糊搜索

(转载),有个坑记录下:(原文)实现类似下面这种:/** * 展开树 * @param treeId */ function expand_ztree(treeId) { var tre...

spring源码学习之路---IOC初探(二)

作者:zuoxiaolong8810(左潇龙),转载请注明出处。           上一章当中我没有提及具体的搭建环境的步骤,一个是不得不承认有点懒,另外一个我觉得如果上章所述的那些环境都还不会搭...

程序员的 “坏” 习惯:试一试

有时,碰到一些程序员会问:“我以前是做安卓的,现在想试着学下后端服务开发,觉得怎样?”。我一下就会卡住,不知该如何回答好。学习本是好事,但前面加个 “试着” 似乎感觉就不太好了。好的出发点“试一试” ...

ztree根据关键字模糊搜索

说明 zTree 是一个依靠 jQuery 实现的多功能 “树插件“。 本文通过利用zTree API编写了一个根据关键字进行模糊搜索的demo。 整体思路: 1. 利用...

jquery源码分析

前段时间上班无聊之时,研究了下jquery的源码。现在记录下自己的成果,分享一下。          下面是我自己琢磨和编写的jquery模型,里面有我所写的注释。 /* * my-jquer...

spring源码学习之路---深度分析IOC容器初始化过程(四)

作者:zuoxiaolong8810(左潇龙),转载请注明出处。              最近由于工作和生活,学习耽搁了几天,今天我们继续接着上一章,分析FileSystemX...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)