前面的话：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
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。
