专栏首页编程微刊基于ztree树的穿梭框

基于ztree树的穿梭框

前面的话:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。

ztree官方文档:http://www.treejs.cn/v3/api.php 在项目开发中,基于ztree树,可以实现很多不同的效果,比如仿windows文件,对树文件进行新建和拖拽效果,比如对树文件子菜单进行转移到另外一个div里面的穿梭框。

今天要说一个功能:基于ztree树的穿梭框,主要实现: 1:点击选中树的子菜单,点击按钮,移动到右侧的div框里面 2:移动到右侧之后的元素,进行可以删除和选中等操作 3:将移动到右侧的内容设为组长或者取消组长(业务需求,仅供参考) 4:将设置为组长的状态提交到后端

步骤: 1:先去官网上面下载css和js的相关安装包,并且引入

 <link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" />
<script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>

2:准备好json数据,自己写的假数据,用于测试渲染看效果。

[
    {
        "id": null,
        "pId": 1,
        "name": "典韦212",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "D91D0DE952DE",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "马可波罗",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "EAFA6CCF3CDD",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "lkjTest",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "D69C2A3ACB30",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "DDDDD",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "DDDDDD",
        "type": 1
    }, {
        "id": null,
        "pId": 1,
        "name": "DDDDDF",
        "iconSkin": null,
        "checked": null,
        "isParent": false,
        "token": "EEEEEEE",
        "type": 1
    }, {
        "id": 1,
        "pId": 0,
        "name": "王小婷",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 134,
        "pId": 1,
        "name": "技术部",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 137,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 138,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }, {
        "id": 139,
        "pId": 1,
        "name": "wer",
        "iconSkin": null,
        "checked": null,
        "isParent": true,
        "token": "organ",
        "type": null
    }
]

3:开始写逻辑代码,代码样式写的较为简单。

<!DOCTYPE html>
<html>
    <head>
        <title>ztree</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" />
        <link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" />
        <style>
            li {
                list-style-type: none;
            }
            
            .ztree {
                margin: 0;
                padding: 5px;
                color: #333;
                width: 232px;
                height: 259px;
                border: 1px solid #000;
            }
            
            #boxRight {
                border: 1px solid #000000;
                width: 200px;
                height: 259px;
                position: absolute;
                top: -7px;
                left: 308px;
            }
            
            #toRight {
                position: absolute;
                top: 120px;
                left: 256px;
            }
            
            .del {
                color: red;
            }
            
            .group {
                color: red;
            }
        </style>

        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
        <script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>

    </head>

    <body>
        <ul id="zTree" class="ztree">
        </ul>

        <button id="toRight">》》</button>
        <li class="shuttleBox near">
            <ul id="boxRight">
                <!--<span  class="del">删除</span>马可波罗<span  class="group">设为组长</span>-->
            </ul>
        </li>
        <button id="btn" type="submit">提交</button>
    </body>
    <script type="text/javascript">
        //树形菜单
        var zTreeObj; //定义ztree对象
        initTree(); //初始化ztree
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: {
                    "Y": "s",
                    "N": "s"
                }
            },
            view: {
                selectedMulti: true,
                showLine: false
            },
            data: {
                key: {
                    name: "name"
                },
                simpleData: {
                    enable: true,
                    pIdKey: "pId",
                }
            },

        };
        //请求数据
        function initTree() {
            $.get("data.json", function(data) {
                console.log(JSON.stringify(data));
                zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
                zTreeObj.expandAll(true);
            });
        }

        //穿梭框左侧选中
        $("#zTree").on('click', 'li.level1', function() {
            if($(this).hasClass('shuttleAct')) {
                $(this).removeClass('shuttleAct');
            } else {
                $(this).addClass('shuttleAct');
            }
        });

        //向右移动
        $("#toRight").click(function() {
            var html = '';
            if($("#zTree .shuttleAct").length == 0) return false;
            $('span.checkbox_true_full').closest('li').each(function() {

                html += '<li>';
                html += '<span  class="del" >删除</span><span class="name">' + $(this).text() + '</span><span  class="group">设为组长</span>';
                html += '</li>';
            })

            $('span.checkbox_true_full').closest('li').remove();

            $('#boxRight ').append(html)
            $('.del').click(function() {
                $(this).closest('li').remove();
            })

            $('.group').click(function() {

                $(this).text() === '设为组长' ? $(this).text('取消组长') : $(this).text('设为组长')
            })
            //$('span.checkbox_true_full').closest('li').appendTo("#boxRight")
            // $("#zTree").find('.shuttleAct').appendTo("#boxRight");
            $("#boxRight li").removeClass('shuttleAct');

        });
        
        //提交所选中的状态,提交给后端
        $("#btn").click(function() {
            var params = {
                name: $(".group:contains('取消组长')").prev('.name').text()
            }
            alert(JSON.stringify(params))
            $.ajax({
                url: basePath + "/patrol",
                contentType: 'application/json',
                data: JSON.stringify(params),
                type: "POST",
                success: function(data) {
                }
            });
        })
    </script>
</html>

效果图

参考demo已经提交至github:https://github.com/wangxiaoting666/ztreeTest

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 获取ztree树的选中子菜单信息并且提交给后端

    前面写过,ztree实现一棵树的文章,https://www.jianshu.com/p/c2b919e91e91 现在要用ajax+json模拟交互效果

    祈澈菇凉
  • ztree取消节点操作

    但是在Ztree的组件里面,我们看到的勾选框并不是checkbox完成,而是使用了图片精灵,选中和未选中的状态里面是一张背景图片里面不同的定位~

    祈澈菇凉
  • jQuery的toFixed() 方法-保留小数位数

    当后端给的返回值是小数的时候,前端需要对小数进行处理,得到自己想要的来展示,多数的时候,是保存小数点后面一位或者两位,这个时候,可以使用toFixed() 方法...

    祈澈菇凉
  • ThreadLocal从源码到应用

    最早接触到ThreadLocal是在阅读dianping的Cat-client,当时对它不是很理解,就搜索了一下,大概了解是一种解决线程安全问题的机制。现在再...

    用户1154259
  • 获取ztree树的选中子菜单信息并且提交给后端

    前面写过,ztree实现一棵树的文章,https://www.jianshu.com/p/c2b919e91e91 现在要用ajax+json模拟交互效果

    祈澈菇凉
  • 与Ajax同样重要的jQuery(2)

    练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

    奋斗蒙
  • 使用Optional来减少null检查

    平常我们使用null检查在项目中简直太常见了,从数据库中查询到的数据可能不存在返回null,service中处理中发现不存在返回一个null,在互相调用的时候每...

    Dylan Liu
  • ECSHOP整合百度ueditor编辑器方法 支持远程图片本地化

    image.png ECSHOP商城自带的编辑器实在是不能忍,太难用了。 就换成了百度的ueditor编辑器,本来最近修改了几个商城的,索性自己也记录一次吧。 ...

    速企云
  • 如何使用Java调用CM的API动态配置Yarn资源池

    用户在使用CDH集群大数据平台时会有需求在自己的统一管理平台上通过API接口能够动态的设置Yarn资源池,Cloudera Manager提供了丰富的API接口...

    Fayson
  • [代码优化]null校验的优美处理

    我们写java代码的时候,使用对象前,都会下意识先判断对象非null,这是防止NPE的无奈之举,毕竟入门写代码时都写过npe的代码。这么做真的好吗,每层方法中都...

    逝兮诚

扫码关注云+社区

领取腾讯云代金券