基于ztree树的穿梭框

王小婷

发布于 2019-10-14 17:33:55

2.5K0

发布于 2019-10-14 17:33:55

文章被收录于专栏：编程微刊

前面的话：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>

效果图