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企业网 ...
随机推荐
- 给Hexo博客文章加密
有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 原文地址 这是个啥 首先, 这是 Hexo 生态圈中 最好的 ...
- [转帖]Day63_Kafka(一）
第一讲 Kafka基础操作 课程大纲 课程内容 学习效果 掌握目标 Kafka简介 消息队列 掌握 Kafka简介 Kafka分布式环境 Kafka操作 Kafka shell 掌握 Kafka ap ...
- [转帖]Innodb存储引擎-备份和恢复(分类、冷备、热备、逻辑备份、二进制日志备份和恢复、快照备份、复制)
文章目录 备份和恢复 分类 冷备 热备 逻辑备份 mysqldump SELECT...INTO OUTFILE 恢复 二进制日志备份与恢复 快照备份(完全备份) 复制 快照+复制的备份架构 备份和恢 ...
- Navicat For Redis 的学习与使用
Navicat For Redis 的学习与使用 背景 周末在家看了几个公众号: 说到Navicat 16.2已经有了 Redis的客户端. 想着前段时间一直在学习Redis, 但是没有GUI的工具, ...
- [转帖]查看x86 cpu睿频命令
查看cpu是否开启睿频,offline掉一些cpu核心后,查看cpu睿频是否升高? turbostat统计X86 处理器的频率.空闲状态.电源状态.温度等状态等 [root@rootbird~]# t ...
- 【我在京东做研发】揭秘支撑京东万人规模技术人员协作的行云DevOps平台
分享人:孙长虹 京东云DevOps解决方案架构师 复旦大学计算机系毕业,并拥有人民大学心理学硕士学位.曾任职于Alcatel-Lucent,IBM和惠普,具有丰富的大型复杂产品研发及项目管理经验,擅长 ...
- Go 跟踪函数调用链，理解代码更直观
Go 跟踪函数调用链,理解代码更直观 目录 Go 跟踪函数调用链,理解代码更直观 一.引入 二.自动获取所跟踪函数的函数名 三.增加 Goroutine 标识 四.让输出的跟踪信息更具层次感 五.利用 ...
- Docker 安装 Nacos 注册中心
废话不多说直接上安装脚本: 在运行安装脚本之前,首先,我们查看一下 Nacos 的版本分别有哪些使用 docker search nacos: 然后在执行: docker pull nacos/nac ...
- 19.7 Boost Asio 传输序列化数据
序列化和反序列化是指将数据结构或对象转换为一组字节,以便在需要时可以将其存储在磁盘上或通过网络传输,并且可以在需要时重新创建原始对象或数据结构. 序列化是将内存中的对象转换为字节的过程.在序列化期间, ...
- 14.7 Socket 循环结构体传输
在上述内容中笔者通过一个简单的案例给大家介绍了在套接字编程中如何传递结构体数据,本章将继续延申结构体传输,在某些时候例如我们需要传输一些当前系统的进程列表信息,或者是当前主机中的目录文件,此时就需要使 ...