使用jquery 仿element Tree 树形控件
代码如下
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.children{
padding-left: 30px;
}
.content{
width: 300px;
height: 300px;
overflow: auto;
margin-left: 50px;
padding-left: 30px;
border: 1px solid green;
}
.number{
color: red;
}
.img{
width: 12px;
height: 12px;
}
.active{
height:21px;
overflow:hidden;
}
.on{
color: pink;
}
</style>
<script>
$(document).ready(function() {
//模拟数据
var nodes = [
{img:'./tab/add.png',name: "父节点1点击展开", children: [
{name: "子节点1"},
{name: "子节点2"}
]},
{img:'./tab/add.png',name: "没有子节点"},
{img:'./tab/add.png',name: "父节点3", children: [
{name: "子节点3"},
{img:'./tab/add.png',name: "子节点3",children: [
{name: "子节点333"},
{name: "子节点333"}
]},
{name: "子节点3"},
{name: "子节点5"},
{img:'./tab/add.png',name: "子节点5",children: [
{name: "子节点55"},
{name: "子节点55"}
]},
]}
];
//遍历元素到页面上
var srcHtml = '';
$.each(nodes, function(i, item) {
srcHtml += '<div class="parent active">'
srcHtml += '<img class="img" src='+item.img+'>'
srcHtml += '<input type="checkbox" />'
srcHtml += '<span class="text">'+ item.name +'</span>'
if(item.children){
$.each(item.children,function(i,items){
srcHtml += '<div class="children active">'
if(items.children){
srcHtml += '<img class="img" src='+item.img+'>'
}
srcHtml += '<input type="checkbox" />'
srcHtml += '<span class="text">'+ items.name +'</span>'
if(items.children){
$.each(items.children,function(i,items){
srcHtml += '<div class="children">'
srcHtml += '<input type="checkbox" />'
srcHtml += '<span class="text">'+ items.name +'</span>'
srcHtml += '</div>'
})
}
srcHtml += '</div>'
})
}
srcHtml += '</div>'
})
$('.tree').html(srcHtml);
$('.num').html($("input[type='checkbox']").length)
//点击复选框可选中元素
$('input[type="checkbox"]').click(function(){
//设置全选按钮
if ($(this).prop("checked") == true) {
// 判断复选框已被选中
// 如果当前元素没有父级元素，那么直接勾选此元素下面所有的input
$(this).siblings('.children').find('input').prop("checked", true)
// 如果当前元素有父级元素,让父级元素的复选框选中
$(this).parent().siblings('input').prop("checked", true)
$(this).parent().parent().siblings('input').prop("checked", true);
} else {
// 上面的复选框没被选中
$(this).siblings('.children').find('input').prop("checked", false)
}
if(!$(this).parent().siblings().find('input').is(':checked') && !$(this).is(':checked')){
// 如果当前元素有父级元素,并且子元素都没有被选中
$(this).parent().siblings('input').prop("checked", false)
$(this).parent().parent().siblings('input').prop("checked", false)
}
// 选中的值个数
var len = $("input[type='checkbox']:checked").length
$('.number').html(len);
// 将选中的文本拼接起来 // 选中的元素对应的文本
var str =[]
$.each($("input[type='checkbox']:checked"),function(i,item){
// 遍历元素，选中元素的父级 被选中
$(this).parent().siblings('input').prop("checked", true)
$(this).parent().parent().siblings('input').prop("checked", true);
str.push($(this).siblings('span').text())
});
console.log(str)
var html ='<span>'
for(let i =0;i<len;i++){
html += '<div class="on">'+ str[i]+'</div>'
}
html+='<span>'
$('.txt').html(html)
})
//点击折叠数据
$(document).on("click",".img",function(){
$(this).parent().addClass('active')
$(this).attr("src", './tab/add.png');
});
$(document).on("click",".text",function(){
if(!$(this).parent().is(".active")){
$(this).parent().addClass('active')
$(this).siblings('.img').attr("src", './tab/add.png');
}
});
//点击展开数据
$(document).on("click",".active",function(){
$(this).removeClass('active')
$(this).children('img').attr("src", './tab/re.png');
});
});
</script>
</head>
<body>
<div style="display: flex;justify-content: center;">
<div class="tree"></div>
<div class="content">
一共有<span class="num"></span>节点 <br>
当前选中的元素个数是<span class="number">0</span>
<div>
被选中的值有 <span class="txt"></span>
</div>
</div>
</div>
</body>
</html>
