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企业网 ...
随机推荐
- [百度贴吧]部分CPU的SPEC2006int 结果
这些测试成绩基本上是本人自己测试的结果.下表中有来自spec官网的两个成绩,因为测试年份较早,系统环境和编译器都较老,测试成绩本人实测的还差,所以仅作为参考.部分测试启用了自动并行和附加的优化库,是为 ...
- nginx 进行目录浏览的简单配置
1. 公司网络安全不让用vsftpd的匿名网络访问了, 没办法 只能够使用 nginx 通过http协议来处理. 2. 最简单的办法就是另外开一个nginx进程简单设置一下nginx的配置文件 wor ...
- node借助jsonwebtoken生成token以及验证token是否过期
生成token使用 jsonwebtoken 插件 我当时使用的版本"jsonwebtoken": "^9.0.0", cnpm i jsonwebtoken ...
- 【笔记】VictoriaMetrics中，对大量的pull模式的targets进行分片
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 配置的方法请看这里:https://docs.victor ...
- 【VictoriaMetrics源码阅读】: vm中对map的优化
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu github 公众号:一本正经的瞎扯 具体代码请看:https://github.com/ahf ...
- jenkins上发布项目后将文件推送到另一台服务器build镜像
1.配置jenkins 1)主页面点击manage jenkins 2) 选择SystemConfiguration 3) 配置服务器信息,注意密码一定要输入对,还有端口有,一般是默认的22端口,但有 ...
- windows10卸载小娜
适用于2004版本往后的 win+x如图 输入如下代码 Get-AppxPackage-allusersMicrosoft.549981C3F5F10|Remove-AppxPackage 运行结束后 ...
- word论文常用格式设定技巧【公式对齐、制表符公式编号等】
1.公式对齐 改动前: 改动后结果: 2.段落行距要求 对于文字可以设定为1.5倍行距 对于公式 5号字体对应1.5倍行距大概在23.4磅,因此可以根据需求适当调整大小. 3.公式标号---使用制表符 ...
- 9.9 Windows驱动开发：内核远程线程实现DLL注入
在笔者上一篇文章<内核RIP劫持实现DLL注入>介绍了通过劫持RIP指针控制程序执行流实现插入DLL的目的,本章将继续探索全新的注入方式,通过NtCreateThreadEx这个内核函数实 ...
- C/C++ Qt 使用JSON解析库 [修改篇]
JSON是一种轻量级的数据交换格式,它是基于ECMAScript的一个子集,使用完全独立于编程语言的文本格式来存储和表示数据,简洁清晰的的层次结构使得JSON成为理想的数据交换语言,Qt库为JSON的 ...