前面的话: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>
效果图