在线预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
* {
margin: 0;
padding: 0;
}
.content {
padding: 50px;
}
ul {
padding-left: 10px;
}
ul li {
list-style: none;
padding: 5px;
}
.textval {
height: 28px;
line-height: 28px;
}
.tree-ul-box {
border: 1px solid #ddd;
width: 600px;
}
input[type='checkbox'] {
margin-right: 5px;
}
button {
border: none;
background-color: #3bafeb;
padding: 5px;
color: #ffffff;
}
</style>
<body>
<div class="content">
<input type="text" class="textval" />
<button onclick="searchTree()">搜索</button>
<button onclick="goback()">重置</button>
<div class="tree-ul-box">
<ul class="tree-ul"></ul>
</div>
</div>
</body>
</html>
<script>
const list = [
{
name: '中国',
checked: false,
isShow: true,
id: "01",
children: [
{
name: '北京市',
checked: false,
id: "01-01",
isShow: true,
children: [
{
name: '昌平区',
id: "01-01-01",
isShow: true,
checked: false,
},
]
}]
}
]
var ul = document.querySelector('.tree-ul');
Tree(list, ul);
function searchTree() {
var textval = document.querySelector('.textval').value;
ul.innerHTML = '';
if(textval === ""){
return;
};
var rendTree = [];
var innerRender = [];
filterTree(list, textval,rendTree);
filterRenderTree(rendTree,innerRender);
appointTree(list,innerRender,0);
Tree(list, ul)
}
function filterRenderTree(rendTree,innerRender){
rendTree.forEach((item,index)=>{
item.split("-").forEach((ele,inx)=>{
if(inx === 0){
innerRender.push(ele);
}else{
for (let teminx = inx; teminx > 0; teminx--) {
teminx -=1;
innerRender.push( innerRender[teminx] + "-" + ele);
}
}
})
})
};
function appointTree(tree,ids,ind){
for (let index = 0; index < tree.length; index++) {
item = tree[index];
if(item.id == ids[ind]){
item.isShow = true;
if(item.children && item.children.length > 0){
ind +=1 ;
if(ind == ids.length){
filterFalg(item.children,true);
return;
}else{
appointTree(item.children,ids,ind);
}
}
}else{
item.isShow = false;
}
}
};
function filterTree(tree, textval,rendTree) {
if (!tree.length) return []
for (let index = 0; index < tree.length; index++) {
item = tree[index]
if (item.name.indexOf(textval) < 0) {
item.isShow = false;
if (item.children && item.children.length){
filterTree(item.children, textval,rendTree)
continue;
}
} else {
item.color = 'red';
item.isShow = true;
rendTree.push(item.id);
if (item.children && item.children.length){
filterTree(item.children, textval,rendTree)
}
}
}
}
function goback() {
ul.innerHTML = '';
filterFalg(list);
Tree(list, ul)
};
function Tree(tree, dom) {
if (tree && tree.length > 0) {
for (let index = 0; index < tree.length; index++) {
const element = tree[index]
if (element.isShow) {
var divTemp = document.createElement('li')
if (element.color) {
divTemp.style.color = element.color
}
var input = document.createElement('input')
var span = document.createElement('span')
input.type = 'checkbox'
if (element.checked) {
input.checked = true
} else {
input.checked = false
}
input.onclick = function (input) {
input.checked = !this.checked;
element.checked = this.checked;
}
span.innerHTML = `${element.name}`
divTemp.appendChild(input)
divTemp.appendChild(span)
dom.appendChild(divTemp)
if (element.children) {
var ul = document.createElement('ul')
divTemp.appendChild(ul)
Tree(element.children, ul)
}
}
}
}
};
function filterFalg(tree,show) {
tree.forEach((item,index)=>{
item.isShow = true;
if(!show){
item.color = "";
item.checked = false;
}
if(item.children && item.children.length > 0) {
filterFalg(item.children);
}
})
}
</script>
