demo上面加tree
公司最近需要一个word的项目demo,然后在网上找了一个项目让我们加功能上去,我一看这项目不简单啊,都是ts加函数式组件写的.天天写增删改查的我离开了组件库发现啥都写不好了.在网上找了半天发现没有,也可能是有但是我没发现怎么使用吧.没有办法最后自己手搓了一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
const arr = [
{
name: "中国",
eng: "China",
check: false,
children: [
{
name: "北京",
eng: "Beijing",
check: false,
},
{
name: "上海",
eng: "Shanghai",
check: false,
children: [
{
name: "闵行区",
eng: "Minhang",
check: false,
},
{
name: "静安区",
eng: "Jingan",
check: false,
},
],
},
],
},
{
name: "美国",
eng: "American",
check: false,
children: [
{
name: "纽约",
eng: "NewYork",
check: false,
children: [
{
name: "曼哈顿区",
eng: "ManHattan",
check: false,
},
{
name: "皇后区",
eng: "Queen",
check: false,
},
{
name: "布鲁克林区",
eng: "Brooklyn",
check: false,
},
],
},
{
name: "华盛顿",
eng: "Washington",
check: false,
},
],
},
]
var ul = document.createElement("ul");
function digui(params, rongqi, num) {
let newnNum = num + 1
params.forEach((item) => {
var li = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkbox");
checkBox.setAttribute("id", item.eng);
checkBox.setAttribute("name", item.name);
if (item.children) {
//生成子元素
var ul = document.createElement("ul");
ul.style.marginLeft = newnNum * 20 + "px";
digui(item.children, ul, newnNum)
//展开收起
const showicon = document.createElement("span")
showicon.classList.add('zhankai')
showicon.innerHTML = '+'
// showicon.style.cursor = 'pointer'
li.appendChild(showicon);
showicon.onclick = function () {
if (showicon.innerHTML == '+') {
showicon.innerHTML = '-'
ul.style.display = 'none'
} else {
showicon.innerHTML = '+'
ul.style.display = 'block'
}
}
}
function xiugai(obj) {
if (obj.children) {
obj.children.forEach((el) => {
el.check = !el.check
document.getElementById(el.eng).checked = el.check
if (el.children) {
xiugai(el)
}
})
}
}
checkBox.onclick = function () {
item.check = !item.check
checkBox.checked = item.check
xiugai(item)
console.log(item, 6666)
}
li.appendChild(checkBox);
li.appendChild(document.createTextNode(item.name));
rongqi.appendChild(li);
if (item.children) {
li.appendChild(ul);
}
})
}
digui(arr, ul, 0)
document.body.appendChild(ul);
</script>
<style>
* {
margin: 0;
padding: 0;
}
.treeLi {
list-style-type: none;
width: 100px;
font-size: 14px;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
background: #ffffff;
position: relative;
padding-left: 10px;
}
input {
margin: 0.4rem;
vertical-align: middle;
}
.zhankai {
position: absolute;
top: 2px;
left: 0;
cursor: pointer
}
</style>
</html>
取名都很随意,代码大家直接沾到html文件里面就可以跑起来看到效果了
