关闭

关于zTree树形插件搜索框。

标签: javajszTree
3015人阅读 评论(0) 收藏 举报
分类:

       今天学习了一个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界面,具体实现过程与这个类似,这个下篇介绍。

1
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11022次
    • 积分:164
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:1篇
    • 评论:7条
    文章分类
    文章存档