zTree树形中的搜索定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div> <input id="keyword" type="text" placeholder="搜索关键字"> <!--<button id="search-bt">搜索</button>--> </div><div class="content" style="width:250px; height:362px;"> <ul id="treeA" class="ztree"></ul> </div><script>$(function(){ init(); setCheck(); }) function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeA"); type = { "Y":p + s, "N":p + s}; zTree.setting.check.chkboxType = type; showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); } function init(){ var zNodes=[ { id:123456, pId:0, name:"西瓜", open:true}, { id:1, pId:123456, name:"苹果", open:true}, { id:11, pId:1, name:"柠檬", open:true}, { id:111, pId:11, name:"菠萝"}, { id:112, pId:11, name:"香蕉"}, { id:12, pId:1, name:"橘子", open:true}, { id:121, pId:12, name:"哈密瓜"}, { id:122, pId:12, name:"杨桃"}, { id:123, pId:12, name:"水蜜桃"}, { id:124, pId:12, name:"梨子"}, { id:125, pId:12, name:"柿子"}, { id:126, pId:12, name:"葡萄"}, { id:127, pId:12, name:"提子"}, { id:128, pId:12, name:"樱桃"}, { id:2, pId:123456, name:"部门2", checked:true, open:true}, { id:21, pId:2, name:"部门2.1"}, { id:22, pId:2, name:"部门2.2", open:true}, { id:221, pId:22, name:"部门2.2.1", checked:true}, { id:222, pId:22, name:"部门2.2.2"}, { id:23, pId:2, name:"部门2.3"}, { id:24, pId:2, name:"部门2.4"}, { id:25, pId:2, name:"部门2.5"}, { id:26, pId:2, name:"部门2.6"}, { id:27, pId:2, name:"部门2.7"}, { id:28, pId:2, name:"部门2.8"}, { id:29, pId:2, name:"部门2.9"} ]; var setting = { check: { enable: true }, data: { simpleData: { enable: true } }, }; zTreeObj = $.fn.zTree.init($("#treeA"), setting, zNodes); $("#search-bt").click(searchNodes); }; //用按钮查询节点 function searchNodes(){ var treeObj = $.fn.zTree.getZTreeObj("treeA"); var keywords=$("#keyword").val(); //根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合,(keywords)模糊匹配只能针对 String 类型的数据var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null);  if (nodes.length>0) { treeObj.selectNode(nodes[0]); //会让节点自动滚到到可视区域内} } //input框变化时查询节点 document.getElementById("keyword").addEventListener("input", test, false); function test(){ var treeObj = $.fn.zTree.getZTreeObj("treeA"); var keywords=$("#keyword").val(); var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null); if (nodes.length>0) { treeObj.selectNode(nodes[0]); } }</script>//treeObj.getNodesByParamFuzzy();方法和treeObj.selectNode();不明之处可参考 zTree v3.5.30 API 文档
</body>
</html>

zTree树形中的搜索定位相关推荐

Leaflet中使用leaflet-search插件实现搜索定位效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现搜索定位效果 ...
php 文件查找类,PHP类搜索定位目录树的具体实现方式解析
大家现在也许对PHP语言比较感兴趣,因为它能够帮助我们很轻松的建设一个功能强大的网站.今天我们将向大家介绍的是有关PHP类搜索定位目录树的方法.大多数时候,在嵌套的PHP结构里进行迭代需要你写出能够 ...
微信有电脑客户端吗_微信公众号文章下载、打印、精确搜索定位与交流方式分享...
点"考研竞赛数学"↑可每天"涨姿势"哦! 封面图来源:pexels.com [注]以下操作适用于所有公众号一.电子文档下载打印咱号一直不赞成积累电子文档,而 ...
ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
高德地图怎么搜索marker_2018-07-06 高德地图搜索定位，滑动地图显示周边信息，根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...
大搜索时代下的网络拓扑搜索定位
互联网的大搜索时代中国互联网十多年的发展历史中,搜索真正启蒙的时间也就最近一两年.搜索从雅虎时代到google时代的更替仅仅花了几年的时间,业界有这样的评价,雅虎搜索的没落是因为其处于搜索与门户交替 ...
HTML5接入百度地图并搜索定位
首先我们得去百度那里注册一下,拥有自己的Appkey,连接:http://lbsyun.baidu.com/ 也可以使用别人的,当然最好还是自己去注册比较好. 第二步,在你自己的网页中引入: 下面直接 ...
007：Mapbox GL实现地图地点搜索定位功能
第007个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中实现地图地点搜索定位功能直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果配 ...
浅谈导航数据中POI搜索技术原理
浅谈导航数据中POI搜索技术原理之一王健导航技术的应用已经成为现在生活中重要组成部分,为我们的生活提供了极大的便利.基本都有这样生活的体验,搜索自己位置附近的银行网点.餐馆.那么这些POI是如何快 ...
迷你播放器--第一阶段（6）--添加搜索定位功能（进阶）-使用filter过滤以及对汉语拼音的排序匹配
迷你播放器--第一阶段(6) 添加搜索定位功能(进阶)-使用filter过滤以及对汉语拼音的排序匹配; 本文章为CSDN作者原创,转载请保留出处:http://blog.csdn.net/lrs030 ...

zTree树形中的搜索定位

zTree树形中的搜索定位相关推荐

最新文章

热门文章