javascript入门 之 ztree(七 结点的查询)
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
<SCRIPT type="text/javascript"> var setting = {
data: {
key: {
title: "t"
},
simpleData: {
enable: true
}
},
view: {
fontCss: getFontCss
}
}; var nodes =[
{ id:1, pId:0, name:"2", t:"id=1", open:true},
{ id:11, pId:1, name:"22", t:"id=11"},
{ id:12, pId:1, name:"24", t:"id=12"},
{ id:13, pId:1, name:"26", t:"id=13"},
{ id:14, pId:1, name:"28", t:"id=14"},
{ id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
{ id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
{ id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
{ id:23, pId:2, name:"搜我吧", t:"id=23"},
{ id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
{ id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
{ id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
{ id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
]; function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
function clickRadio(e) {
lastValue = "";
searchNode(e);
}
function searchNode(e) { var zTree = $.fn.zTree.getZTreeObj("sys"); if (!$("#getNodesByFilter").attr("checked")) {
//如果被选中getNodesByFilter方法 var value = $.trim(key.get(0).value);
//得到搜索框中的值，传给value
var keyType = "";
//初始化查询条件 if ($("#name").attr("checked")) {
keyType = "name";
} else if ($("#level").attr("checked")) {
keyType = "level";
value = parseInt(value);
} else if ($("#id").attr("checked")) {
keyType = "id";
value = parseInt(value);
//如果是根据level和id查的则强制转换为int类型
} if (key.hasClass("empty")) {
//如果搜索框为空，则value为空
value = "";
} if (lastValue === value) return;
lastValue = value;
//如果查询值不变，则直接返回下次结果 if (value === "") return;
updateNodes(false); if ($("#getNodeByParam").attr("checked")) {
//如果被选中getNodesByParam方法 var node = zTree.getNodeByParam(keyType, value); //把指定的了结点(查到的第一个)给node if (node === null) { nodeList = [];
} else { nodeList = [node];
} } else if ($("#getNodesByParam").attr("checked")) { nodeList = zTree.getNodesByParam(keyType, value);
//把指定的结点给nodeList } else if ($("#getNodesByParamFuzzy").attr("checked")) { //模糊查询 nodeList = zTree.getNodesByParamFuzzy(keyType, value);
} } else { updateNodes(false);
nodeList = zTree.getNodesByFilter(filter);
} updateNodes(true); }
function updateNodes(highlight) { //如果结点数据变了，则动态更新所有ztree结点数据 var zTree = $.fn.zTree.getZTreeObj("sys"); for( var i=0, l=nodeList.length; i<l; i++) { nodeList[i].highlight = highlight; // 高亮显示查到的结果
zTree.updateNode(nodeList[i]);
}
} function getFontCss(treeId, treeNode) { return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
} function filter(node) { //过滤器
return !node.isParent && node.isFirstNode;
} var key;
$(document).ready(function(){
$.fn.zTree.init($("#sys"), setting, nodes); key = $("#key");
key .bind("focus", focusKey)
.bind("blur", blurKey)
.bind("propertychange", searchNode)
.bind("input", searchNode); $("#name").bind("change", clickRadio);
$("#level").bind("change", clickRadio);
$("#id").bind("change", clickRadio); $("#getNodeByParam").bind("change", clickRadio);
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
}); </SCRIPT>
</HEAD> <BODY>
<div class="content_wrap"> <div class="zTreeDemoBackground left">
<ul id="sys" class="ztree"></ul>
</div> <div class="right">
<ul class="list">
<input type="text" id="key" value="" class="empty" /><br/>
<!--搜索框--> <input type="radio" id="name" name="keyType" class="radio" checked /><span>name</span><br/>
<!--搜索依据--> <input type="radio" id="level" name="keyType" class="radio" /><span>level</span><br/>
<input type="radio" id="id" name="keyType" class="radio" /><span>id</span><br/> <input type="radio" id="getNodeByParam" name="funType" class="radio" /><span>getNodeByParam</span><br/>
<input type="radio" id="getNodesByParam" name="funType" class="radio" /><span>getNodesByParam</span><br/>
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" checked /><span>getNodesByParamFuzzy </span><br/>
<input type="radio" id="getNodesByFilter" name="funType" class="radio" /><span>getNodesByFilter</span><br/> </ul>
</div>
</div>
</BODY>
</HTML>
javascript入门 之 ztree(七 结点的查询)的更多相关文章
- javascript入门 之 ztree (六 结点的点击和展开/折叠事件)
1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...
- javascript入门 之 zTree（十四 增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- javascript入门 之 zTree（十三 移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
- javascript入门 之 zTree（十二 托拽事件（二））
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
- javascript入门 之 zTree（十一 托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
- javascript入门 之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
- javascript入门 之 ztree（三 简单json数据）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...
- javascript入门 之 zTree（十四 增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
- javascript入门 之 ztree (九 单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
随机推荐
- mybatis探究之延迟加载和缓存
mybatis探究之延迟加载和缓存 一.什么是延迟加载 1.延迟加载的概念 在mybatis进行多表查询时,并非所有的查询都需要立即进行.例如在查询带有账户信息的用户信息时,我们们并不需要总是在加载用 ...
- libfastcommon总结（一）加载主机上所有网卡的IPv4的地址
头文件为local_ip_func.h 主要接口 load_local_host_ip_addrs();//加载主机网口所有IPv4地址到列表 print_local_host_ip_addrs ...
- php 生成游戏兑换码（礼包）方法
最近项目中要做礼包码生成,看了看网上的代码,可以使用php扩展unid 当然我这里并不是用的unid,而是使用的php自带的uniqid,人狠话不多.看代码 /** * 生成礼包接口 100W数据同时 ...
- 数据库事务练习-Java(新手)
数据库事务: 一个数据库事务通常包含了一个序列的对数据库的读/写操作. 为数据库操作序列提供了一个从失败中恢复到正常状态的方法,同时提供了数据库即使在异常状态下仍能保持一致性的方法. p ...
- Journal of Proteome Research | Quantitative Subcellular Proteomics of the Orbitofrontal Cortex of Schizophrenia Patients （精神分裂症病人眶额叶皮层亚细胞结构的定量蛋白质组学研究）（解读人：王聚）
期刊名:Journal of Proteome Research 发表时间:(2019年10月) IF:3.78 单位: 里约热内卢联邦大学 坎皮纳斯州立大学 坎皮纳斯州立大学神经生物学中心 卡拉博大 ...
- hdu1856 并查集
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1856/ 题目就是要求并查集中各树的大小的最大值,我们只要在根节点处存树的大小就可以,合并也是合并根节点的数,最后 ...
- （数据科学学习手札81）conda+jupyter玩转数据科学环境搭建
本文示例yaml文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在使用Python进行数据分析时,很 ...
- 递归回溯法求N皇后问题
问题描述:在一个NN(比如44)的方格中,在每一列中放置一个皇后,要求放置的皇后不在同一行,同一列,同一斜线上,求一共有多少种放置方法,输出放置的数组. 思路解析:从(1,1)开始,一列一列的放置皇后 ...
- TensorFlow 训练好模型参数的保存和恢复代码
TensorFlow 训练好模型参数的保存和恢复代码,之前就在想模型不应该每次要个结果都要重新训练一遍吧,应该训练一次就可以一直使用吧. TensorFlow 提供了 Saver 类,可以进行保存和恢 ...
- TensorFlow Windows 安装
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 本系列教程将手把手带您从零开始学习Tensorflow,并最终通过 ...