ztree模糊搜索
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./static/libs/web-icons/web-icons.css">
<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css">
<link rel="stylesheet" href="./static/libs/toastr/css/toastr.css">
<link rel="stylesheet" href="./static/css/common/base.css">
<link rel="stylesheet" href="./static/libs/bootstrap-validator/css/bootstrapValidator.css">
<link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle_adm.css" type="text/css">
<link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.core.css" type="text/css">
<link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.bootstrap.css" type="text/css">
<style>
.pull-left {
padding-left: 10px;
}
.pull-right {
padding-right: 10px;
}
#ztreeObj{
height: 300px;
overflow: auto;
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<a class="btn btn-default" style="text-decoration: none;" id="move-dept-button">移动</a>
<!-- https://www.cnblogs.com/bsc2012/p/9241739.html -->
<!-- // 移动部门 begin -->
<div class="modal fade" id="move-dept-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-create">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title"> 移动部门 </h4>
</div>
<form id="move-dept-modal-form" method="post" class="form-horizontal" action="">
<div class="modal-body">
<!-- // modal-body begin -->
<div class="form-group">
<label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">部门：</label>
<div class="col-lg-6 col-md-6 col-sm-6" style="position:relative;z-index:9999999; padding-left: 0;">
<input class="form-control" id="keyword" type="text" value="" onkeyup="AutoMatch()"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right"></label>
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-left: 0;">
<ul id="ztreeObj" class="ztree ztree-ul" style="height: 300px; margin-top: 0;"></ul>
</div>
</div>
<!-- modal-body end // -->
</div>
<div class="modal-footer">
<button class="btn btn-success" id="move-dept-modal-submit" type="submit">
确 定
</button>
<button class="btn btn-default" type="button" data-dismiss="modal">
取 消
</button>
</div>
</form>
</div><!-- /Modal -->
</div>
</div><!-- 移动部门 end // -->
<script src="./static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="./static/libs/bootstrap/js/bootstrap.js"></script>
<script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script>
<script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="./static/libs/toastr/js/toastr.min.js"></script>
<script src="./static/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.exedit.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="./static/libs/alertify.js-0.3.11/lib/alertify.min.js"></script>
<script src="./static/libs/My97DatePicker/WdatePicker.js"></script>
<script>
$("#move-dept-button").click(function(){
$("#move-dept-modal").modal("show");
})
//ztree配置
var setting = {
check : {
enable : true,
chkboxType : {
"Y" : "ps",
"N" : "ps"
}
},
view : {
dblClickExpand : false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ztreeObj");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return true;
},
onCheck : function(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ztreeObj"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
if (nodes[i].isParent) {
} else {
v += nodes[i].name + ",";//只获取最末端节点的值
}
}
if (v.length >= 0){
v = v.substring(0, v.length - 1);
$("#keyword").val(v).change();
}
}
}
};
/**
* 查找子结点，如果找到，返回true，否则返回false
*/
function searchChildren(keyword, children){
if(children == null || children.length == 0){
return false;
}
for(var i = 0;i < children.length;i++){
var node = children[i];
if(node.name.indexOf(keyword)!=-1){
return true;
}
//递归查找子结点
var result = searchChildren(keyword,node.children);
if(result){
return true;
}
}
return false;
}
/**
* 查找当前结点和父结点，如果找到，返回ture，否则返回false
*/
function searchParent(keyword, node){
if(node == null){
return false;
}
if(node.name.indexOf(keyword)!=-1){
return true;
}
//递归查找父结点
return searchParent(keyword, node.getParentNode());
}
var hiddenNodes = [];
function AutoMatch(){
var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
//显示上次搜索后隐藏的结点
ztreeObj.showNodes(hiddenNodes);
//查找不符合条件的结点
//返回true表示要过滤，需要隐藏，返回false表示不需要过滤，不需要隐藏
function filterFunc(node){
var keyword=$("#keyword").val();
//如果当前结点，或者其父结点可以找到，或者当前结点的子结点可以找到，则该结点不隐藏
if(searchParent(keyword,node) || searchChildren(keyword,node.children)){
return false;
}
return true;
};
//获取不符合条件的叶子结点
hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);
//隐藏不符合条件的叶子结点
ztreeObj.hideNodes(hiddenNodes);
var usersTreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
usersTreeObj.expandAll(true);
}
$(document).ready(function(){
$.ajax({
type: "GET",
url: 'data/' + 'move-dept-modal-new-dept-tree' + '.json',
data: {},
dataType: "json",
success: function(data){
$.fn.zTree.init($("#ztreeObj"), setting, data);
},
error: function(data){
alert("error");
}
});
});
</script>
</body>
</html>
ztree模糊搜索的更多相关文章
- zTree 模糊搜索
/** * 搜索树,高亮显示并展示[模糊匹配搜索条件的节点s] * @param treeId * @param searchConditionId 搜索条件Id */ function search ...
- zTree模糊搜索，显示全部节点和高亮显示
function searchFun() { var value; if($("#code2").val()!=null && $("#code2&quo ...
- zTree树的模糊搜索
工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...
- ztree树的模糊搜索功能
在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择 具体实现过程如下 ...
- ztree 树的模糊搜索
(转载),有个坑记录下: (原文)实现类似下面这种: /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj ...
- ztree根据关键字模糊搜索
html页面需要引入以下资源 <!-- jquery包,ztree依赖jquery --> <script type="text/javascript" src= ...
- zTree的使用
一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type=" ...
- zTree模糊查询人员姓名：getNodesByParamFuzzy
以前使用zTree,不知道有getNodesByParamFuzzy这个模糊查询的方法,所以用了比较笨的方法,比如:功能要求(模糊查询人员姓名),先获得用户输入的名称,然后到数据库或者缓存中去查找,然 ...
- jquery ztree异步搜索
一.初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...
随机推荐
- 某公司面试java试题之【一】，看看吧，说不定就是你将要做的题
- 【中间件安全】IIS6安全加固规范
1. 适用情况 适用于使用IIS6进行部署的Web网站. 2. 技能要求 熟悉IIS配置操作,能够利用IIS进行建站,并能针对站点使用IIS进行安全加固. 3. 前置条件 1. 根据站点开放端口.进程 ...
- 机器学习 —— 深度学习 —— 基于DAGNN的MNIST NET
DAGNN 是Directed acyclic graph neural network 缩写,也就有向图非循环神经网络.我使用的是由MatConvNet 提供的DAGNN API.选择这套API作为 ...
- xcode8 iOS函数返回值使用警告
没有使用返回值时, 警告 swift: @warn_unused_result func doSomething() -> Bool { return true } OC: - (BOOL)do ...
- 算法提高 最小方差生成树（Kruskal）_模板
算法提高 最小方差生成树 时间限制:1.0s 内存限制:256.0MB 问题描述 给定带权无向图,求出一颗方差最小的生成树. 输入格式 输入多组测试数据.第一行为N,M,依次是 ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- yarn集群客户端gateway常用限制
spark默认集群模式,省略上传依赖包过程:spark-default.sh spark.yarn.jars hdfs:///${PATH}/sparkJar/jars/*.jarspark.subm ...
- Linux命令 umask
umask: 文件预设权限 指定当前用户在创建文件或目录时的权限默认值. $ umask0002$ umask -Su=rwx,g=rwx,o=rx 创建文件时,预设没有x 权限,即只有rw 权限,最 ...
- phpredis Redis集群 Redis Cluster
官方url: https://github.com/phpredis/phpredis/blob/develop/cluster.markdown#readme 2017年10月29日20:44:25 ...
- 让我对 docker swarm mode 的基本原理豁然开朗的几篇英文博文
关于 docker swarm mode 的基本架构 How does it work? Docker! Part 1: Swarm general architecture 关于 Overlay N ...