关于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根据关键字模糊搜索

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

Jquery结合Ztree生成树

1、添加样式、js

ztree 搜索 过滤掉无关 添加选中状态

.ztree{ background-color: #FFFFFF; } var labelParent = {LABEL_ID:'root',PARENT_ID:0,LABEL_NAME:...

zTree的模糊搜索(2)

检索:                           var zTreeObj;          var setting = {data:{simpleData:{enable:...

ztree 带搜索框的 下拉选择树

效果图: 步骤 : 1  jsp文件引入 zTree对应的js 2  jsp 写如下html class="mide">: id="zzjgNam...

ztree 实现树的搜索功能

var userZTree; var userSetting={ check: { enable: true, chkStyle: "radio", chkboxType : {...

【ztree系列】树节点的模糊查询

以前设计模糊查询的功能,一般都是针对表格来做的,还真没考虑过对tree进行模糊查询,也可能是因为遇到的数据量还没到头疼的程度吧。为了完美的实现模糊查询的效果,搞了半天css,对输入框显示效果的设置更是...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

使用zTree报错 $.fn.zTree.getZTreeObj("tree") 为 null解决办法

最后想了下,可能是因为没有找到tree这个元素!!! 但是很奇怪,我的tree这个ul放在了bootstrap的model里面,虽然进入页面是隐藏的,但是初始化的时候一样是隐藏的,就可以成功; 基...

zTree实现可搜索功能(升级版)

1、问题背景(1)生成zTree(2)点击节点选中并给输入框赋值(3)输入某个字符,树节点含有该字符被选中,颜色发生变化2、实现源码 zTree具有搜索功能 var ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于zTree树形插件搜索框。
举报原因:
原因补充:

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