zTree如何实现模糊查找实战
1.说明
最近在研究zTree树控件。过程中涉及到了实现模糊查找结点的功能，特此分享一下。
有关zTree的有关介绍和使用，请访问其官网：zTree -- jQuery 树插件
本文假设你已经比较熟悉了这个控件。
2.实现效果
3.代码
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ztree模糊查询演示</title>
<head>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script>
<style type="text/css">
body {
font-family: "微软雅黑", "宋体";
font-size: 12px;
line-height: 26px;
color: #666;
background-color: #fff;
width: 600px;
height: 600px;
}
div.content_wrap {
width: 800px;
height: 380px;
}
div.content_wrap div.left {
float: left;
width: 250px;
height: 300px;
}
div.content_wrap div.right {
float: right;
width: 340px;
}
.scontent {
height: 300px;
overflow-y: scroll;
}
li {
list-style: none;
}
</style>
<script>
var setting = {
check:{
enable: true,
chkStyle: "checkbox", //勾选框类型(checkbox 或 radio）
chkboxType: {"Y": "ps", "N": "ps"} //勾选 checkbox 对于父子节点的关联关系
},
data: {
simpleData: {
enable: true
}
},
callback: {
//zTree节点的点击事件
onCheck:onClick/*,
onClick: onClick*/
}
};
//Ztree的初始数据
var zNodes = [
{id: 1, pId: 0, name: "北京"},
{id: 2, pId: 0, name: "天津"},
{id: 3, pId: 0, name: "上海"},
{id: 6, pId: 0, name: "重庆"},
{id: 4, pId: 0, name: "河北省", open: true},
{id: 41, pId: 4, name: "石家庄"},
{id: 42, pId: 4, name: "保定"},
{id: 43, pId: 4, name: "邯郸"},
{id: 44, pId: 4, name: "承德"},
{id: 5, pId: 0, name: "广东省", open: true},
{id: 51, pId: 5, name: "广州"},
{id: 52, pId: 5, name: "深圳"},
{id: 53, pId: 5, name: "东莞"},
{id: 54, pId: 5, name: "佛山"},
{id: 7, pId: 0, name: "江苏", open: true},
{id: 71, pId: 7, name: "南京", open: true},
{id: 711, pId: 71, name: "鼓楼区"},
{id: 712, pId: 71, name: "建邺区"},
{id: 713, pId: 71, name: "栖霞区"},
{id: 7131, pId: 713, name: "南大"},
{id: 72, pId: 7, name: "苏州"}
];
//点击某个节点 然后将该节点的名称赋值值文本框
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//获得选中的节点
var nodes = zTree.getSelectedNodes(),
v = "", existFlg=false;
if(nodes.length==0){
nodes = zTree.getCheckedNodes(true);
//先清空已选面板
$(".scontent>ul").empty();
}
//根据id排序
nodes.sort(function compare(a, b) {
return a.id - b.id;
});
var selectedObj = $(".content_wrap>.right>.scontent>ul");
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
//判断是否已在列表中
$(".scontent>ul>li").each(function(){
if($(this).attr("data-id")==nodes[i].id){
existFlg = true;
return false;
}
});
if(!existFlg){
selectedObj.append("<li id=data-" + nodes[i].id + ">" + nodes[i].name + "<button class='remove' style='float: left;' onclick='removeNode("+nodes[i].id+")'>移除</button></li>");
//增加已选择数量
$("#scount").text($(".scontent>ul>li").length);
}
}
//将选中节点的名称显示在文本框内
if (v.length > 0) v = v.substring(0, v.length - 1);
//var cityObj = $("#citySel");
//cityObj.attr("value", v);
//隐藏zTree
//hideMenu();
//return false;
}
//删除已选择元素同时取消选中状态
function removeNode(nodeId){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getCheckedNodes(true);
for(var i=0; i<nodes.length; i++){
//alert(JSON.stringify(nodes[i]));
if(nodes[i].id==nodeId){
$("#data-"+nodeId).remove();
zTree.checkNode(nodes[i], false);
zTree.refresh();
$("#scount").text($(".scontent>ul>li").length);
return false;
}
}
}
//显示树
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({
left: cityOffset.left + "px"/*,
top: cityOffset.top + cityObj.outerHeight() + "px"*/
}).slideDown("fast");
}
//隐藏树
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown");
}
//还原zTree的初始数据
function InitialZtree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
//根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
if (txtObj.value.length > 0) {
InitialZtree();
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#treeDemo"), setting, nodeList);
showMenu();
} else {
//隐藏树
//hideMenu();
InitialZtree();
}
}
function clearAll() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);
$(".content_wrap>.right>.scontent>ul").empty();
$("#scount").text(0);
}
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
showMenu();
});
</script>
</head>
<body>
<div class="content_wrap">
<div class="left">
<ul class="list">
<li class="title"> 城市：<input id="citySel" type="text" placeholder="请输入关键字检索"
onkeyup="AutoMatch(this)"
style="width: 150px;"/>
</li>
</ul>
<div id="menuContent" class="menuContent" style="position: relative;">
<ul id="treeDemo" class="ztree">
</ul>
</div>
</div>
<div class="right">
<div class="stitle">
<h4>
已选择：
<span id="scount" style="color: red;">0</span>
</h4>
</div>
<div class="scontent">
<ul></ul>
</div>
</div>
</div>
<div class="button" style="float: right;">
<input type="button" value="清空" onclick="clearAll()">
</div>
</body>
</html>zTree如何实现模糊查找实战的更多相关文章
- 转：zTree树控件实战篇：针对多个下拉加载zTree树应该如何做出合理的配置
今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...
- 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...
- [实战]MVC5+EF6+MySql企业网盘实战(19)——BJUI和ztree
写在前面 上周在博客园看到一篇通用权限系统的文章,看到他那个UI不错,这里就研究了一下,将网盘的UI修改为他的那个,感兴趣的可以参考:http://b-jui.com/ 系列文章 [EF]vs15+e ...
- zTree实战
1.实体 public class UserDataZTreeVo { private String id; private String pid; private String name; priv ...
- ant design pro 实战 : 使用 ztree
应当指出,antd 是有 ztree 组件的,但是太简单,无法满足复杂的业务需求. 所以我还是决定使用zTree. 用 npm | cnpm 或者 yarn | tyarn 安装,这一步略. 在 js ...
- [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表
写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...
- [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表
写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...
- AJAX实现google搜索建议实战
搜索建议实战的目标是为了输入搜索内容,动态的进行匹配,效果图如下: 整体思路: 在客户端搜索框中触发onkeyup事件, 随时向PHP服务器请求当前输入框中的内容, PHP服务器获取到keywords ...
- 洗礼灵魂，修炼python（73）--全栈项目实战篇（1）——【转载】前提准备之学习ubuntu
本篇是为项目实战做准备,学习Linux是必备的,不然都不好意思叫全栈对吧?下面是一位资深大神写的文章,够详细,我也不用浪费时间再写了 原文链接:Ubuntu学习——第一篇 内容: 一. Ubuntu简 ...
- [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表
写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...
随机推荐
- [转帖]命令行参数--与-D的区别
https://juejin.cn/post/7238420276228341815 Spring Boot 学习笔记 我们要想了解这两者之间的差异,首先来看一个案例: bash 复制代码 # ...
- SkyWalking的学习之三
SkyWalking的学习之三 持续优化 SkyWalking 默认可以使用h2,但是感觉容量和性能都可能不太好 所以我想使用一下elasticSearch进行替换. 自己其实一直想心想去学习, 但是 ...
- [转帖]wiki Rust
Rust[编辑] 维基百科,自由的百科全书 跳到导航跳到搜索 此条目介绍的是由Mozilla主导开发的编程语言.关于"rust"在英文中的本意,请见"铁锈 ...
- [转帖]Intel“革命性”X86s架构，带来哪些颠覆及影响？
https://www.eet-china.com/mp/a221822.html 英特尔发布了一份新的白皮书(Intel X86-S扩展架构规格),计划简化其处理器指令集架构(ISA).英特尔提供了 ...
- [转帖]Python-Mock接口测试
https://www.cnblogs.com/zhangwuxuan/p/12928850.html 前言 今天跟小伙伴们一起来学习一下如何编写Python脚本进行mock测试. 什么是mock? ...
- [转帖]【k8s】1、基础概念和架构及组件
文章目录 一.kubernetes概述 1.什么是kubernetes? 2.应用程序部署方式的演变 3.为什么要用kubernetes? 二.kubernetes 特性 三.Kubernetes集群 ...
- 国产飞腾2000+服务器 存储单盘性能简单验证 SSD 与 HDD
有kylinV10的源 可以直接安装fio yum install fio -y 第一步, 将sdd 进行初始化,并且设置文件系统 fdisk /dev/sdbmkdir /ssd2 mkfs.ext ...
- Vue.use和install之间的关系
创建一个plugins.js文件 跟main.js同级下,创建一个plugins.js文件 export default { // install是vue给我们提供的.它会自动去执行install. ...
- 手写promise完成异常处理和状态只能够修改一次
8.处理 Promise 抛出的异常 <script src="./Promise.js"></script> <script type=" ...
- Stable Diffusion WebUI Model 加载个人笔记
参考1:https://www.bilibili.com/read/cv20039815 参考2:https://blog.cmyr.ltd/archives/e740aac.html 服务器:阿里云 ...