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企业网 ...
随机推荐
- 数据-CRUD
CRUD Create 创建 Read 读取 Update 更新 Delete 删除 场景 只要存在数据结构概念,就必存在CRUD
- [转帖]Oracle nvarchar2存储特殊字符乱码问题
https://www.cnblogs.com/PiscesCanon/p/15157506.html 这个问题研究了一天多,终于搞定了. 起因是业务需要存特殊字符'ø'到varchar2的字段中出现 ...
- [转帖]【rpm】源码包制作rpm包|修改rpm、重新制作rpm包
目录 前言 安装rpmbuild rpmbuild制作rpm 包 同时生成devel包 阻止rpmbuid打包时strip程序/库 修改rpm.重新制作rpm包 RPM 打包 工具 SPEC文件 sp ...
- 【转帖】磁盘IOPS的计算
计算磁盘IOPS的三个因素: 1.RAID类型的读写比 不同RAID类型的IOPS计算公式: RAID类型 公式 RAID5.RAID3 Drive IOPS=Read IOPS + 4*Write ...
- [转帖]SYSTEMD 配置文件
https://www.cnblogs.com/xiexun/p/13643952.html [Unit]区块通常是配置文件的第一个区块,用来定义 Unit 的元数据,以及配置与其他 Unit 的关系 ...
- [转帖]一本正经的八卦一下CPU的自主可控 之二
https://zhuanlan.zhihu.com/p/62399200 一本正经的八卦一下CPU的自主可控 之二 上回书说到CPU自主可控第一个层面的指令集问题.这回聊一聊接下来的设计问题. 第二 ...
- 一次w3wp出现crash的简单解决方案
1. 前几天同事求助, 说一台服务器iis出现多次崩溃的现象,重启iis就可以了. 具体原因不明. 之前遇到过类似的问题 感觉最彻底的解决方案是 抓dump然后使用windbg 进行分析. 但是自 ...
- 源码补丁神器—patch-package
一.背景 vue项目中使用 vue-pdf第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题.后期需求有变,业务需求增加电子签章功能.这个时候pdf文件的内容可以显示出来,但是公 ...
- 【团队效率提升】Python-PyWebIO介绍
作者:京东零售 关键 Q&A快速了解PyWebIO Q:首先,什么是PyWebIO? A:PyWebIO提供了一系列命令式的交互函数,能够让咱们用只用Python就可以编写 Web 应用, 不 ...
- 人工智能创新挑战赛：助力精准气象和海洋预测Baseline[3]：TCNN+RNN模型、SA-ConvLSTM模型
"AI Earth"人工智能创新挑战赛:助力精准气象和海洋预测Baseline[3]:TCNN+RNN模型.SA-ConvLSTM模型 1.气象海洋预测-模型建立之TCNN+RNN ...