ztree模糊搜索及ztree与bootstrapTable表格数据左右增加和删除

duansamve
已于 2022-09-09 06:15:31 修改
阅读量843
点赞数
分类专栏： ztree bootstrap 文章标签： ztree bootstrap
于 2019-03-06 22:02:24 首次发布
本文链接：https://blog.csdn.net/duansamve/article/details/88259385
版权
bootstrap 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
ztree
13 篇文章 0 订阅
订阅专栏
<!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>