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 ...
随机推荐
- NuGet Packages are missing,This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.
错误内容 This project references NuGet package(s) that are missing on this computer. Use NuGet Package R ...
- DOTween-Ease缓动函数
Ease.InQuad 不知道Quad代表什么意思 Ease.InQuart 有1/4的时间是没有缓动. Ease.InQuint, 是1/5时间没有缓动. Ease.InExpo 一直很平缓, ...
- 为什么要用kafka、rabbit等消息队列
1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多消息队列所采用的&q ...
- Linux 依据关键字查找正在运行的进程
ps aux |grep tm1s
- GitLab push除发Jenkins事件
1.打开Jenkins项目配置 2.勾选Trigger builds remotely (e.g., from scripts) 3.Authentication Token随便填个内容(比方1234 ...
- Ubuntu下开启Mysql远程访问的方法
首先想说,JetProfiler对分析项目中MySQL问题以及优化,是个非常好的工具.但是看网上文章,中文介绍真的不多.是因为国内现在都不用MySQL了吗? 因为公司JetProfiler是共用的,安 ...
- 更改ORACLE归档路径及归档模式
更改ORACLE归档路径及归档模式 在ORACLE10g和11g版本,ORACLE默认的日志归档路径为闪回恢复区($ORACLE_BASE/flash_recovery_area).对于这个路径, ...
- Spring framewrok 源码概览
关于Spring 框架阅读记录 关于SpringMvc 框架阅读记录 1.首先看一个 spring-web 项目 项目结构 http 包 主要存储 http 相关信息 HttpRequst,HttpS ...
- 微信小程序开发笔记03
今天基本实现了微信小程序主要功能,页面还没有进行优化,有些功能还需完善. 页面之间的信息转化部分还未实现.
- 《JavaScript》 程序基本知识 数据类型。 {0912上} {0912下}
JS脚本语言: 这是JaxaScript的全称名 JS是网页里面使用的脚本语言 JS是一个非常强大的语言 JS的基础语法 注释语法: 单行注释 // 多行注释 /**/ 输出语法: 双标 ...