使用ztree实现左侧树勾选添加到右侧树

需求:左侧人员勾选添加至右侧,也可取消勾选,右侧初始数据不可删除,新添加的可以删除,并且,右侧初始数据,左侧不可勾选

问题: 目前只实现了一个根节点下,有两个部门,本来是打算用id匹配,但是父节点1勾选的时候,子节点会加错位置,现在是由name匹配

仅作记录;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>树形菜单表格</title>
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css"/>
    <link rel="stylesheet" href="../lib/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/new-common.css"/>
    <style type="text/css">
        .gt-body {
            height: 100%;
            padding: 0;
        }

        .gtmap .gt-body .gtmap-body .gt-position-left {
            width: 50%;
            float: left;
            height: 100%;
            padding: 1% 0;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
        }

        .gtmap .gt-body .gtmap-body .gt-position-right {
            width: 50%;
            height: 100%;
            padding: 1% 0;
            left: 50%;
            overflow: auto;
        }

        .gtmap .gt-body .gtmap-body .tree-container {
            background: #fff;
            padding: 0;
            right: 0px;
            left: 20px;
        }

        .gtmap .gt-body .gtmap-body .tree-container .person-list {
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            bottom: 0;
            overflow: auto;
            padding-right: 20px;
        }

        #treeDemo {
            position: absolute;
            top: 40px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .tip-info {
            height: 30px;
            line-height: 30px;
        }

        .person-list li {
            height: 30px;
            line-height: 30px;
            color: #333;
        }

        .person-list li .layui-icon {
            font-size: 20px;
            color: #aaa;
            float: right;
            position: relative;
            top: 1px;
            cursor: pointer;
        }

        .person-list li .left-icon {
            background-color: transparent;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.png);
            background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.gif);
            font-size: 12px;
            background-position: -147px -42px;
            vertical-align: middle;
            line-height: 0;
            margin: 0;
            padding: 0;
            width: 21px;
            height: 20px;
            line-height: 20px;
            float: left;
            position: relative;
            top: 3px;
            margin-right: 3px;
        }

        .zTreeBlurrySearch {
            margin-right: 20px;
        }

        .del-icon{
            font-size: 18px;
            position: relative;
            right: 0px;
            float: right;
            top: 1px;
            color: rgb(229,62,49);
        }
    </style>
</head>
<body class="gtmap">
<div class="gt-body"  id="layerBox">
    <div class="gtmap-body ">
        <div class="gt-position-left">
            <div class="tree-container">
                <!--<div class="tree-cnt">-->
                <div class="zTreeBlurrySearch" id="zTreeSearch">
                    <div class="input-icon-box-right input-icon-box-sm">
                        <input id="key" name="" placeholder="请输入检索内容" autocomplete="off" class="layui-input">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>
                <ul id="treeDemo" class="ztree userTreeColor"></ul>
            </div>
        </div>
        <div class="gtmap-cnt gt-position-right" style="background-color: white;">
            <div class="top-container">
                <div class="tree-container">
                    <div class="zTreeBlurrySearch" id="orgZTreeSearch">
                        <div class="input-icon-box-right input-icon-box-sm">
                            <input id="orgKey" name="" placeholder="请输入检索内容" autocomplete="off" class="layui-input">
                            <i class="layui-icon layui-icon-search"></i>
                        </div>
                    </div>
                    <ul id="orgTreeDemo" class="ztree userTreeColor"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<!--加载ztree-->
<script type="text/javascript" src="../lib/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exhide.js"></script>
<script src="../lib/zTree_v3/js/fuzzysearch.js" type="text/javascript" charset="utf-8"></script>
<script>
    // 先取到ztree要用的jquery
    var ztreeS = $;
    // 定义初始右树的数据
    var orgStr = '';
    var orgSelectedNodesId = [];

    //树形配置
    var setting = {
        check: {
            enable: true//checkbox
        },
        view: {
            nameIsHTML: true, //允许name支持html
            selectedMulti: false
        },
        edit: {
            enable: false,
            editNameSelectAll: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: zTreeOnCheck
        }
    };
    // 树形配置
    var orgSetting = {
        view: {
            nameIsHTML: true, //允许name支持html
            selectedMulti: false
        },
        edit: {
            enable: false,
            showRenameBtn:false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onNodeCreated: orgzTreeOnNodeCreated
        }
    };


    //树形的节点数据
    var zNodes = [
        {id: 1, pId: 0, name: "父节点1", open: true},
        {id: 11, pId: 1, name: "内业人员", open: true, type: 0},
        {id: 111, pId: 11, name: "叶子节点111", type: 0, chkDisabled:true},
        {id: 112, pId: 11, name: "叶子节点112", type: 0, chkDisabled:true},
        {id: 113, pId: 11, name: "叶子节点113", type: 0},
        {id: 114, pId: 11, name: "叶子节点114", type: 0},
        {id: 12, pId: 1, name: "外业人员", open: true, type: 1},
        {id: 121, pId: 12, name: "叶子节点121", type: 1, chkDisabled:true},
        {id: 122, pId: 12, name: "叶子节点122", type: 1, chkDisabled:true},
        {id: 123, pId: 12, name: "叶子节点123", type: 1},
        {id: 124, pId: 12, name: "叶子节点124", type: 1}

    ];

    var orgNodes = [
        {id: 1, pId: 0, name: "父节点1", open: true},
        {id: 11, pId: 1, name: "内业人员", open: true, type: 0},
        {id: 111, pId: 11, name: "叶子节点111", type: 0},
        {id: 112, pId: 11, name: "叶子节点112", type: 0},
        {id: 12, pId: 1, name: "外业人员", open: true, type: 1},
        {id: 121, pId: 12, name: "叶子节点121", type: 1},
        {id: 122, pId: 12, name: "叶子节点122", type: 1},
    ];

    // 获取某节点下的所有叶子节点
    function getAllChildrenNodes(treeNode, result) {
        if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    if (childrenNodes[i].isParent) {
                        result = getAllChildrenNodes(childrenNodes[i], result);
                    } else {
                        result += ',' + childrenNodes[i].id;
                    }
                }
            }
        }
        return result;
    }

    function zTreeOnCheck(event, treeId, treeNode) {
        // alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked);
        // 拿到name值,因为搜索之后匹配字段加样式,获取到的name值不正确,所以要根据id进行匹配
        var str = '';
        var selectedNodesId = [];
        var parentNode = null;
        var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
        var orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
        str = getAllChildrenNodes(treeNode, str);
        selectedNodesId = str.split(',').slice(1);
        // 取左侧勾选的列表和右侧初始数据的差集
        let intersect = new Set([...new Set(selectedNodesId)].filter(x => !new Set(orgSelectedNodesId).has(x)));// set {2, 3}
        selectedNodesId = Array.from(intersect)
        console.log(selectedNodesId)
        if (treeNode.checked) {
            if (!treeNode.isParent){
                selectedNodesId.push(treeNode.id);
            }
            console.log(selectedNodesId);
            for (var i = 0; i < selectedNodesId.length; i++) {
                var selectedId = selectedNodesId[i];
                var selectedName = treeObj.getNodesByParam("id", selectedId)[0].name;
                var selectedType = treeObj.getNodesByParam("id", selectedId)[0].type;
                console.log(selectedName);
                console.log(selectedType);
                var newNode = {
                    id: selectedId,
                    pId: selectedType,
                    name: selectedName,
                    type: selectedType,
                    showBtn:true
                };
                if(selectedType == "0"){
                    parentNode = orgTreeObj.getNodesByParam('name', "内业人员")[0];
                }else{
                    parentNode = orgTreeObj.getNodesByParam('name', "外业人员")[0];
                }
                orgTreeObj.addNodes(parentNode, newNode);
            }
        } else {
            if (!treeNode.isParent){
                selectedNodesId.push(treeNode.id);
            }
            for (var i = 0; i < selectedNodesId.length; i++) {
                var selectedId = selectedNodesId[i];
                orgTreeObj.removeNode(orgTreeObj.getNodesByParam("id", selectedId)[0]);
            }
        }
    }

    function orgzTreeOnNodeCreated(event, treeId, treeNode) {
        if(treeNode.showBtn){
            console.log(treeId, treeNode);
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#diyBtn_"+treeNode.id).length>0) return;
            var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' ><i class='del-icon del-icon-"+ treeNode.id +" layui-icon layui-icon-close-fill '></i></span>"
                + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
                + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
            aObj.append(editStr);
            var btn = $(".del-icon-"+treeNode.id);
            if (btn) btn.bind("click", function(){
                var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
                treeObj.checkNode(treeObj.getNodesByParam("id", treeNode.id)[0], false, true);
                var orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
                orgTreeObj.removeNode(treeNode);
            });
        }
    };

    //树形加载
    $(document).ready(function () {
        ztreeS.fn.zTree.init($("#treeDemo"), setting, zNodes);
        fuzzySearch('treeDemo', '#key', null, true); //初始化模糊搜索方法

        ztreeS.fn.zTree.init($("#orgTreeDemo"), orgSetting, orgNodes);
        fuzzySearch('orgTreeDemo', '#orgKey', null, true); //初始化模糊搜索方法

        //获取初始右侧的树的现有数据,防止左侧勾选掉,在勾选的点击事件里去差集
        orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
        orgStr = getAllChildrenNodes(window.orgTreeObj .getNodes()[0], orgStr);
        orgSelectedNodesId = orgStr.split(',').slice(1);
    });

</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值