<!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>
