基于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>

效果图

相关文章
|
8月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
262 0
|
图形学
Unity遍历子物体以及孙物体
遍历子物体以及孙物体
|
2月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
19 0
CSS3几何透明层文本悬停变色源码
|
4月前
|
移动开发 HTML5
蓝色炫酷碎粒子HTML5导航源码
蓝色炫酷碎粒子HTML5导航源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
41 1
|
8月前
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
715 3
|
算法
Threejs中使用astar(A*)算法寻路导航,Threejs寻路定位导航
Threejs中使用astar(A*)算法寻路导航,Threejs寻路定位导航
665 0
|
JavaScript
jQuery实现一个穿梭框
jQuery实现一个穿梭框
71 0
04zTree - 不显示节点图标的树
04zTree - 不显示节点图标的树
124 0
60EasyUI 树形菜单- 树形网格惰性加载节点
60EasyUI 树形菜单- 树形网格惰性加载节点
47 0