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

最新推荐文章于 2024-02-19 17:09:49 发布
最新推荐文章于 2024-02-19 17:09:49 发布
阅读量496 收藏
点赞数
分类专栏： zTree 文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36652782/article/details/124726653
版权

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

问题: 目前只实现了一个根节点下，有两个部门，本来是打算用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
    评论
专栏目录
js+Ztree实现左侧树节点拖动到右侧面板上 补充
mumu13141516的博客
11-27 908
/*------------------------------------- zTree Style version:    3.5.19 author:        Hunter.z email:        hunter.z@263.net website:    http://code.google.com/p/jquerytree/ ---------------------...
el-tree左侧树，右侧内容结构
AnnaYaya的博客
07-14 548
el-tree左侧树，右侧内容结构，设置选中节点，设置展开节点
zTree树插件实现点击左侧树，右侧展示文章列表页面实现思路
热门推荐
Nishuibaichuan 的博客
11-11 1万+
上一篇文章中说了zTree树插件编写过程。接来下，谈谈zTree树插件实现点击左侧树，右侧展示文章列表页面过程。效果展示 2.这里就说说思路。 channel.jsp &lt;div class=&quot;pos-a&quot; style=&quot;width:280px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; backgro
elementUi+vue默认选中左侧树节点并加载右侧列表
loy_zy的博客
09-23 2321
[场景实现]：左侧目录树右侧内容联动
最新发布
A5120184120的博客
02-19 820
[场景实现]：左侧目录树右侧内容联动
ztree实现左边动态生成树，右边为具体信息功能
祈澈菇凉
04-19 3462
页面原型图：图片.png功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面前端代码实现：引入css文档：&lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/js/global/plugins/datatables/plugins/bootstr...
ztree实现左右两棵树的节点移动
06-12
ztree实现左右两棵树的节点移动，左边移动到右边，在右边树上添加节点，左边树上删除节点，右移左，逻辑一致
ztree实现左边动态生成树右边为内容详情功能
10-19
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。接下来通过本文给大家分享ztree实现左边动态生成树右边为内容详情功能，需要的朋友参考下吧
jQuery使用zTree插件实现树形菜单和异步加载
10-22
主要介绍了jQuery使用zTree插件实现树形菜单和异步加载的相关方法，感兴趣的小伙伴们可以参考一下
jquery ztree实现下拉树形框使用到了json数据
01-19
公司最近的项目需要用到树形下拉框，在网上找了挺多源码，最后还是采用了zTree来实现，因为代码的移植性比较高，而且数据的获取比较容易。废话不多说，直接上代码。 index.jsp 代码如下: <%@ page language=...
基于zTree-MultiSelect实现的左右选择框Demo
06-08
自己写的基于zTree-MultiSelect实现的左右选择框Demo，有好几个例子，可以参考
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据
04-21
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据，列表显示，子表可增删改查。并附上后端Controller.java
layui+ztree下拉树，支持单选和多选
09-11
layui+ztree下拉树，支持单选和多选，简单封装方便实用
jQuery 利用ztree实现树形表格的实例代码
10-19
在本文中，我们将探讨如何使用jQuery和zTree库来实现一个树形表格的实例。zTree是一个基于jQuery的树插件，它提供了丰富的交互性和可定制性，使得创建树形结构变得简单。以下是对实现过程的详细说明： 首先，我们...
Jquery 可拖拽的Ztree（移动，复制）两种选择
被世界遗弃的江的博客
12-08 5171
首先要引入ztree依赖的js<link rel="stylesheet" type="text/css" href="<c:url value="/js/common/zTree-v3.5.14/css/zTreeStyle/zTreeStyle.css"/>"/> <script src="<c:url value="/js/common/zTree-v3.5.14/js/jquery.ztre
element-ui树形表格，左边勾选，右边显示选中的数据-功能（如动图）
weixin_42125732的博客
08-05 2681
vue element表格
css左树右表,layui左树dtree右列表table
weixin_32236693的博客
08-03 1771
layui左树dtree右列表tabledtree样式引入字体引入位置：static/layuiadmin/dtree/font/dtreefont.css样式引入位置：static/layuiadmin/dtree/dtree.cssjs引入位置：static/layuiadmin/modules/dtree.js前端页面xmlns:shiro="http://www.pollix.at/thy...
【JVS低代码配置平台】基于树形字典的纯配置实现左树右表
03-28 280
1、创建树模型，这个模型是可以根据业务需求灵活独立创建，在模型新增表单中配置相关组件，注意父级目录字段使用下拉组件关联当前模型（此处为文档目录）。在树模型的新增表单中设置如下：2、新建列表页（左树右表），页面设置中布局设置选择目录，字段中加入树模型字段。在新增表单中，树字段使用级联选择组件，数据类型选择数据模型，关联模型选择树模型（此处为文档目录），传递值选择数据id。在新增表单中设置级联组件，组件的数据类型选择“数据模型”，关键对应的配置的数据模型。
layui 左侧导航右侧显示
qq_45222993的博客
12-01 1844
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 后台大布局 - Layui</title> <link rel="styleshee
使用zTree插件实现jQuery动态树
本资源主要讲解了如何使用zTree插件在jQuery中构建动态树。 zTree是一个基于jQuery的灵活的树插件，支持多态性、异步加载、复选框等功能，适用于多种场景，如文件管理、组织结构展示等。在描述中提到的代码示例中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值