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

已于 2022-05-12 13:33:44 修改
阅读量779 收藏 2
点赞数
分类专栏： zTree 文章标签： css javascript html
于 2022-05-12 11:47:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36652782/article/details/124728077
版权

仅作记录

<!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"/>
    <link rel="stylesheet" type="text/css" href="../css/new-public.css"/>
    <style type="text/css">
        .gt-body {
            height: 100%;
            padding: 0;
        }

        .gt-header {
            font-size: 18px;
            text-align: center;
        }

        .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%;
        }

        .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;
        }
    </style>
</head>
<body class="gtmap">
<div class="gt-body">
    <div class="gt-toolbar gt-header">
        添加人员
    </div>
    <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">
            <div class="tree-container list-container">
                <p class="tip-info">已选择了<span>0</span>个联系人</p>
                <ul class="person-list">   无数据  </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="listTpl">
    <p class="tip-info">已选择了<span>{{d.length}}</span>个联系人</p>
    <ul class="person-list">
        {{# layui.each(d, function(index, item){ }}
        <li data-id="{{item.id}}">
            <i class="left-icon"></i>
            <span>{{item.name}}</span>
            <i class="layui-icon layui-icon-close-fill delete-icon"></i>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        无数据
        {{# } }}
    </ul>

</script>
<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 = $;
    layui.use(['jquery', 'form', 'laypage', 'laytpl', 'element'], function () {
        var form = layui.form,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            element = layui.element,
            $ = layui.jquery;


        // 定义右侧列表渲染的数组
        var renderArr = [];


        //树形配置
        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 zNodes = [
            {id: 1, pId: 0, name: "父节点1", open: true},
            {id: 11, pId: 1, name: "父节点11", open: true},
            {id: 111, pId: 11, name: "叶子节点111"},
            {id: 112, pId: 11, name: "叶子节点112"},
            {id: 113, pId: 11, name: "叶子节点113"},
            {id: 114, pId: 11, name: "叶子节点114"},
            {id: 12, pId: 1, name: "父节点12"},
            {id: 121, pId: 12, name: "叶子节点121"},
            {id: 122, pId: 12, name: "叶子节点122"},
            {id: 123, pId: 12, name: "叶子节点123"},
            {id: 124, pId: 12, name: "叶子节点124"},
            {id: 13, pId: 1, name: "父节点13"},
            {id: 2, pId: 0, name: "父节点2"},
            {id: 21, pId: 2, name: "父节点21", open: true},
            {id: 211, pId: 21, name: "叶子节点211"},
            {id: 212, pId: 21, name: "叶子节点212"},
            {id: 213, pId: 21, name: "叶子节点213"},
            {id: 214, pId: 21, name: "叶子节点214"},
            {id: 22, pId: 2, name: "父节点22"},
            {id: 221, pId: 22, name: "叶子节点221"},
            {id: 222, pId: 22, name: "叶子节点222"},
            {id: 223, pId: 22, name: "叶子节点223"},
            {id: 224, pId: 22, name: "叶子节点224"},
            {id: 23, pId: 2, name: "父节点23"},
            {id: 231, pId: 23, name: "叶子节点231"},
            {id: 232, pId: 23, name: "叶子节点232"},
            {id: 233, pId: 23, name: "叶子节点233"},
            {id: 234, pId: 23, name: "叶子节点234"},
            {id: 3, pId: 0, name: "父节点3"}
        ];

        // 获取某节点下的所有叶子节点
        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 = [];
            if (treeNode.checked) {
                if (treeNode.isParent) {
                    str = getAllChildrenNodes(treeNode, str);
                    selectedNodesId = str.split(',');
                    selectedNodesId = selectedNodesId.slice(1);
                } else {
                    selectedNodesId.push(treeNode.id)
                }
                for (var i = 0; i < selectedNodesId.length; i++) {
                    var selectedId = selectedNodesId[i];
                    var selectedName = zNodes.filter(function (v) {
                        return v.id == selectedId
                    })[0].name;
                    renderArr.push({
                        id: selectedId,
                        name: selectedName
                    })
                }
            } else {
                if (treeNode.isParent) {
                    str = getAllChildrenNodes(treeNode, str);
                    selectedNodesId = str.split(',');
                    selectedNodesId = selectedNodesId.slice(1);
                } else {
                    selectedNodesId.push(treeNode.id)
                }
                for (var i = 0; i < selectedNodesId.length; i++) {
                    var selectedId = selectedNodesId[i];
                    var index = renderArr.indexOf(renderArr.filter(function (v) {
                        return v.id == selectedId
                    })[0]);
                    renderArr.splice(index, 1);
                }
            }
            console.log(renderArr)
            laytpl($('#listTpl').html()).render(renderArr, function (html) {
                $('.list-container').html(html);
            })
        }

        $(document).on('click', '.delete-icon', function () {
            // 更新右侧列表
            var dataId = $(this).parent().attr('data-id');
            var index = renderArr.indexOf(renderArr.filter(function (v) {
                return v.id == dataId
            })[0]);
            renderArr.splice(index, 1);
            laytpl($('#listTpl').html()).render(renderArr, function (html) {
                $('.list-container').html(html);
            })
            // 更新左侧树
            var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
            function filter(node) {
                return (node.id == dataId);
            }
            var node = treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
            treeObj.checkNode(node, false, true, false)
        })

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


</script>
</html>

冷雨温喉
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js+Ztree实现左侧树节点拖动到右侧面板上 补充
mumu13141516的博客
11-27 906
/*------------------------------------- zTree Style version:    3.5.19 author:        Hunter.z email:        hunter.z@263.net website:    http://code.google.com/p/jquerytree/ ---------------------...
使用ztree实现左侧树勾选添加到右侧树
冷雨温喉的博客
05-12 495
需求：左侧人员勾选添加至右侧，也可取消勾选，右侧初始数据不可删除，新添加的可以删除，并且，右侧初始数据，左侧不可勾选 问题: 目前只实现了一个根节点下，有两个部门，本来是打算用id匹配，但是父节点1勾选的时候，子节点会加错位置，现在是由name匹配 仅作记录； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>树形菜单表格</title>
elementUi+vue默认选中左侧树节点并加载右侧列表
loy_zy的博客
09-23 2320
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
el-tree左侧树，右侧内容结构
最新发布
AnnaYaya的博客
07-14 541
el-tree左侧树，右侧内容结构，设置选中节点，设置展开节点
jQuery使用zTree插件实现树形菜单和异步加载
10-22
主要介绍了jQuery使用zTree插件实现树形菜单和异步加载的相关方法，感兴趣的小伙伴们可以参考一下
jquery ztree实现下拉树形框使用到了json数据
01-19
公司最近的项目需要用到树形下拉框，在网上找了挺多源码，最后还是采用了zTree来实现，因为代码的移植性比较高，而且数据的获取比较容易。废话不多说，直接上代码。 index.jsp 代码如下: <%@ page language=...
ztree实现左边动态生成树右边为内容详情功能
10-19
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。接下来通过本文给大家分享ztree实现左边动态生成树右边为内容详情功能，需要的朋友参考下吧
ztree实现左右两棵树的节点移动
06-12
本文将深入探讨如何使用ZTree实现左右两棵树之间的节点移动，包括节点的添加、删除以及同步更新的操作。 首先，ZTree是基于jQuery的插件，它的核心功能包括节点的增删改查、拖拽排序、多选、权限控制等。在实际应用...
ztree实现左边动态生成树，右边为具体信息功能
祈澈菇凉
04-19 3456
页面原型图：图片.png功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面前端代码实现：引入css文档：&lt;link rel="stylesheet" type="text/css" href="&lt;c:url value="/js/global/plugins/datatables/plugins/bootstr...
基于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（移动，复制）两种选择
被世界遗弃的江的博客
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
css左树右表,layui左树dtree右列表table
weixin_32236693的博客
08-03 1768
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 277
1、创建树模型，这个模型是可以根据业务需求灵活独立创建，在模型新增表单中配置相关组件，注意父级目录字段使用下拉组件关联当前模型（此处为文档目录）。在树模型的新增表单中设置如下：2、新建列表页（左树右表），页面设置中布局设置选择目录，字段中加入树模型字段。在新增表单中，树字段使用级联选择组件，数据类型选择数据模型，关联模型选择树模型（此处为文档目录），传递值选择数据id。在新增表单中设置级联组件，组件的数据类型选择“数据模型”，关键对应的配置的数据模型。
layui 左侧导航右侧显示
qq_45222993的博客
12-01 1840
<!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
layui树形菜单右键_layui树形菜单写的树形列表（treetable）
weixin_33363265的博客
02-17 876
基于layui v2.2.5的 layui-tree写了一个treetable(树形列表)效果1.1 收起效果图 1.2 展开效果图 1.开发预备首先需要到layui官网https://www.layui.com/, 下载layui插件，在页面引入layui.js和layui.css2.页面元素添加expredable参数: 设置展示treetable时是否展开，默认为false;treetabl...
Layui树形列表，Layui树形菜单列表
weixin_43992507的博客
10-06 4602
Layui树形列表 比较简单请耐心查看 效果图 实现方式 首先引入组件（代码放到最后面了） layui.config({ base: $projectPath+"/js/util/layui-module/" }).extend({ treeSelect: "treeSelect", treeTable: "treeTable", }); js 中 var layer; var form; var table; var treeTable; var interUrl = {
使用zTree实现动态菜单的实验感想
06-06
使用 zTree 实现动态菜单的实验感想： 1. zTree 是一个非常强大、灵活和易于使用的树形菜单插件，可以方便地实现各种类型的动态菜单和树形结构。 2. zTree 的 API 文档和示例非常详细和丰富，可以帮助开发者快速上手和解决各种问题。 3. 在实验中，我学会了如何使用 zTree 的基本配置和方法，包括初始化树形菜单、加载数据、展开和收起节点、选中和取消选中节点等。 4. 我还学习了如何使用 zTree 的回调函数来处理各种事件和操作，例如点击节点、拖拽节点、搜索节点等。 5. 在实验中，我遇到了一些问题，例如如何处理异步加载数据、如何自定义节点图标、如何设置节点的不同状态等，但通过查阅文档和示例，我成功地解决了这些问题。 6. 总的来说，使用 zTree 实现动态菜单是一项有趣和有益的实验，让我更深入地了解了前端开发和树形菜单的实现原理和技术。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值