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 ...
随机推荐
- Oracle集群（RAC）时间同步（ntp和CTSS）
Oracle集群(RAC)时间同步(ntp和CTSS) http://blog.itpub.net/26736162/viewspace-2157130/ crsctl stat res -t -in ...
- vscode切换界面布局
调整vscode的控制面板位置 鼠标操作 view>Appearance>Toggle Panel Position 调整控制面板在界面底部 或者界面右侧 2.编辑区分布 鼠标操作 v ...
- PowerDesigner 15进行逆向工程生成数据库图表时，注释的comment的生成，解决PowerDesigner逆向工程没有列注释
使用PowerDesigner默认配置逆向工程是没有注释(name列为英文,comment列是空的),这样的不方便查看字段具体是什么意义,将注释一同导出,方便查看字段具体的意义,如下图 注释列导出步骤 ...
- Struts2与spingmvc区别
1.Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上Spr ...
- 方差+标准差+四分位数+z-score公式
一.方差公式 $S^2 = \frac{1}{N}\sum_{i=1}^{N}(X_i - \mu)^2 = \frac{1}{N}[(X_1-\mu)^2 + (X_2-\mu)^2 + ... + ...
- 【python】——三级菜单
作业需求: 打印三级菜单 可返回上一级 可随时退出程序 #!/usr/bin/env python # -*- coding:utf-8 -*- #Author: __Json.Zzgx__ menu ...
- 软件毕业设计文档流程与UML图之间的关系
每个模型都是用一种或者多种UML图来描述的,映射关系如下: 1.用例模型:使用用例图.顺序图.通信图.活动图和状态图来描述. 2.分析模型:使用类图和对象图(包括子系统和包).顺序图(时序图).通信图 ...
- Spring boot Mybatis 整合（完整版）
个人开源项目 springboot+mybatis+thymeleaf+docker构建的个人站点开源项目(集成了个人主页.个人作品.个人博客) 朋友自制的springboot接口文档组件swagge ...
- nginx笔记 安装nginx 配置 反向代理 多虚拟主机
1,检测linux上是否 通过yum安装了nginxrpm -qi nginx 2.安装nginx之前的依赖包yum install gcc patch libffi-devel python- ...
- 《Mysql 分区分表》
一:分区/分表 为了什么? - 当MySQL单表的数据量过大时,数据库的访问速度会下降,需要处理大量数据,所以需要把数据分散存储. - 常用 "水平" 切分 二:MySQL常见的水 ...