<!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;
}
</style>
</head>
<body>
<a id="add-virtual-group-button" href="#" title="" onclick="return false;">添加</a>
<!-- // 创建虚拟组 begin -->
<div class="modal fade" id="add-virtual-group-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-create" style="width: 700px;">
<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="add-virtual-group-modal-form" method="post" class="form-horizontal" action="">
<div class="modal-body">
<!-- // modal-body begin -->
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="add-virtual-group-modal-tab">
<li role="presentation" class="active"><a href="#add-virtual-group-modal-base-info" aria-controls="add-virtual-group-modal-base-info" role="tab" data-toggle="tab">基本信息</a></li>
<li role="presentation"><a href="#add-virtual-group-modal-users" aria-controls="add-virtual-group-modal-users" role="tab" data-toggle="tab">用户</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="add-virtual-group-modal-base-info">
<div class="clear"></div>
<!-- 基本信息 bedin -->
<div style="height: 30px; clear: both;"></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">
<input type="text" class="form-control" id="add-virtual-group-modal-name" name="" placeholder="" onkeyup="checkAddVirtualGroupModalName(this);"/>
</div>
</div>
<div class="form-group" id="add-virtual-group-modal-name-tips-content" style="display: none;">
<label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right"></label>
<div class="col-lg-9 col-md-9 col-sm-9" id="add-virtual-group-modal-name-tips" style="font-size: 12px; color: #ff0000">
</div>
</div>
<!-- 基本信息 end -->
</div>
<div role="tabpanel" class="tab-pane" id="add-virtual-group-modal-users">
<!-- // 主机 begin -->
<table width="100%" border="0">
<tr>
<td width="45%" align="left" valign="top">
<div style="height: 20px; clear: both;"></div>
<div class="form-group" style="margin-left: 0; margin-right: 0;">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<input type="text" id="add-virtual-group-modal-users-input" onkeyup="autoMatchForAddVirtualGroupUsers();" class="form-control" placeholder="模糊匹配" style="border: 1px solid #cccccc; border-right: 0;"/>
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
<ul class="ztree strategy-tab-ul" id="add-virtual-group-modal-users-tree" style="height: 200px; overflow: auto; margin-top: 0; border: 1px solid #e4eaec;">
</ul>
</td>
<td align="left" valign="middle">
<a href="javascript:void(0)" class="btn btn-primary btn-xs" id="add-virtual-group-modal-users-add-button" style="margin: 20px;">添加</a>
<br>
<a href="javascript:void(0)" class="btn btn-primary btn-xs" id="add-virtual-group-modal-users-delete-button" style="margin: 20px;">删除</a>
</td>
<td width="45%" align="left" valign="top">
<table id="add-virtual-group-modal-users-table" data-toggle="table" class="table table-bordered table-striped" style="margin-top: 0;"></table>
</td>
</tr>
</table>
<!-- 主机 end // -->
</div>
</div>
<!-- modal-body end // -->
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add-virtual-group-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>
// 所有节点
var allNodes = [];
$("#add-virtual-group-button").click(function(){
$("#add-virtual-group-modal").modal("show");
initTreeForAddVirtualGroupUsers();
var ztreeObj = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
allNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
console.log(allNodes);
});
//添加用户表格
var $addVirtualGroupModalUsersTable = $('#add-virtual-group-modal-users-table').bootstrapTable('destroy').bootstrapTable({
url: '',
method: 'POST',
uniqueId: 'id',
striped: false,
cache: false,
sortable: true,
sortOrder: "asc",
sidePagination: "client",
undefinedText: '--',
//singleSelect: true,
//showRefresh : true,
//showColumns : true,
toolbar: '#user-table-toolbar',
search: false,
strictSearch: true,
clickToSelect: true,
pagination: true,
pageNumber:1,
pageSize:5,
pageList: [5, 10, 20, 50, 100],
paginationPreText:"上一页",
paginationNextText:"下一页",
paginationLoop:false,
//showToggle: true,
//cardView: false,
//detailView: false,
//showPaginationSwitch: true,
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令（desc，asc）
};
// console.log(temp);
return temp;
},
columns: [
{
checkbox: true
},{
field: 'name',
title: '用户'
}
],
onLoadSuccess: function () {
//alert('表格加载成功！');
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) {
var id = row.ID;
//$("#user-details-modal").modal("show");
//EditViewById(id, 'view');
},
rowStyle: function (row, index) { //设置行的特殊样式
//这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (index == 1) {
//strclass = "warning";
//console.log(row);
}
return { classes: strclass }
}
});
/**
* 功能：创建虚拟组(dsh)
*/
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 && node.isHidden === false){
return true;
}
var result = searchChildren(keyword, node.children);
if(result){
return true;
}
}
return false;
}
function searchParent(keyword, node){
if(node == null){
return false;
}
if(node.name.indexOf(keyword) != -1 && node.isHidden === false){
return true;
}
return searchParent(keyword, node.getParentNode());
}
var hiddenNodesForAddVirtualGroupUsers = [];
function autoMatchForAddVirtualGroupUsers(){
setTimeout(function(){
var ztreeObj = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
ztreeObj.showNodes(hiddenNodesForAddVirtualGroupUsers);
function filterFunc(node){
var keyword = $("#add-virtual-group-modal-users-input").val();
if(searchParent(keyword, node) || searchChildren(keyword, node.children)){
return false;
}
return true;
};
hiddenNodesForAddVirtualGroupUsers = ztreeObj.getNodesByFilter(filterFunc);
ztreeObj.hideNodes(hiddenNodesForAddVirtualGroupUsers);
}, 300);
}
function initTreeForAddVirtualGroupUsers(){
$.fn.zTree.init($("#add-virtual-group-modal-users-tree"), settingForAddVirtualGroupUsers, zNodes);
}
var zNodes = [
{ "id":0, "pId":-1, "name":"根主机组", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
{ "id":1, "pId":0, "name":"主机组1", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
{ "id":2, "pId":0, "name":"主机组2", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
{ "id":6, "pId":1, "name":"主机1", "open": true, "icon":"/secret-hollow/static/img/computer.png"},
{ "id":7, "pId":1, "name":"主机2", "open": true, "icon":"/secret-hollow/static/img/computer.png"},
{ "id":3, "pId":0, "name":"主机组3", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
{ "id":4, "pId":0, "name":"主机组4", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
{ "id":5, "pId":0, "name":"主机组5", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"}
]
var settingForAddVirtualGroupUsers = {
check : {
enable : true,
chkboxType : {
"Y" : "ps",
"N" : "ps"
}
},
view : {
dblClickExpand : false
},
data: {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId",
rootPId : null
}
},
callback: {
beforeClick : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return true;
},
onCheck : function(e, treeId, treeNode) {
}
}
};
// 点击添加按钮
$("#add-virtual-group-modal-users-add-button").click(function(){
// 获取树对象
var ztreeObj = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
// 选择的节点
var selectedNodes = ztreeObj.getCheckedNodes(true);
console.log(selectedNodes);
var len = selectedNodes.length;
// 表格中节点集合
var nodesArrForTable = [];
// 用于删除的节点集合
var nodesArrForRemove = [];
for(var i = 0; i < len; i++){
// 将叶子节点添加进集合
if(!selectedNodes[i].isParenta){
nodesArrForTable.push({id: selectedNodes[i].id, name: selectedNodes[i].name});
nodesArrForRemove.push(selectedNodes[i]);
}
}
if(nodesArrForTable.length == 0){
toastr.error("当前没有选择任何用户", "错误提示");
return false;
}
// 删除节点
for (var i=0; i < nodesArrForRemove.length; i++) {
ztreeObj.removeNode(nodesArrForRemove[i]);
}
// 表格中插入节点
$addVirtualGroupModalUsersTable.bootstrapTable('prepend', nodesArrForTable);
})
// 点击删除按钮
$("#add-virtual-group-modal-users-delete-button").click(function(){
var checkedUsers = $addVirtualGroupModalUsersTable.bootstrapTable('getSelections');
var checkedUsersUidArr = [];
if($addVirtualGroupModalUsersTable.bootstrapTable('getData').length == 0){
toastr.error("当前没有要移除的用户", "错误提示");
return false;
}
if(checkedUsers.length == 0){
toastr.error("请选择要移除的用户", "错误提示");
return false;
}
for(var i = 0; i < checkedUsers.length; i++){
checkedUsersUidArr.push(checkedUsers[i].id);
}
$addVirtualGroupModalUsersTable.bootstrapTable('remove', {
field: 'id', values: checkedUsersUidArr
});
var userNodesForAdd = [];
for(var i = 0; i < checkedUsersUidArr.length; i++){
for(var j = 0; j < allNodes.length; j++){
if(checkedUsersUidArr[i] == allNodes[j].id){
userNodesForAdd.push(allNodes[j]);
}
}
}
console.log("allNodes");
console.log(allNodes);
var ztreeObj = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
nowNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
for(var i = 0; i<nowNodes.length; i++){
if('children' in nowNodes[i]){
delete nowNodes[i].children;
}
}
$.fn.zTree.init($("#add-virtual-group-modal-users-tree"), settingForAddVirtualGroupUsers, nowNodes.concat(userNodesForAdd));
})
</script>
</body>
</html>
扫一扫
4470
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
