第一问,功能为根据请求⽅式 method 不同,拿到树型组件的数据并返回
注意点在于要用好ajax方法中的三个参数url method data
async function ajax({ url, method = "get", data }) {
let result;
// TODO:根据请求方式 method 不同,拿到树型组件的数据
// 当method === "get" 时,localStorage 存在数据从 localStorage 中获取,不存在则从 /js/data.json 中获取
// 当method === "post" 时,将数据保存到localStorage 中,key 命名为 data
if(method === "get"){
const localData = localStorage.getItem("data")
if(localData){
result = JSON.parse(localData)
}else{
const res = await axios.get(url)
result = res.data.data
}
}else if(method === "post"){
localStorage.setItem("data",JSON.stringify(data))
}
return result;
}
第二问,补全 js/index.js ⽂件中的 treeMenusRender 函数,使⽤所传参数 data ⽣成指定 DOM 结构 的模板字符串(完整的模板字符串的 HTML 样例结构可以在 index.html 中查看),并在包含 .tree-node 的元素节点上加上指定属性如下
我的做法是直接使用循环来进行渲染,然后将数据直接放入到模板字符串中,拼接好返回
function treeMenusRender(data, grade = 0) {
let treeTemplate = "";
// TODO:根据传入的 treeData 的数据生成树型组件的模板字符串
for(let i = 0;i < data.length;i++){
grade = 1
treeTemplate += `<div class="tree-node" data-index="${data[i].id}" data-grade="${grade}">
<div class="tree-node-content" style="margin-left: 0px">
<div class="tree-node-content-left">
<img src="./images/dragger.svg" alt="" class="point-svg" />
<span class="tree-node-label">${data[i].label}</span>
<img class="config-svg" src="./images/config.svg" alt="" />
</div>
</div>
<div class="tree-node-children">
`
let treeNodeChildrenTemplate = ""
for(let j = 0;j < data[i].children.length;j++){
grade = 2
treeNodeChildrenTemplate += `<div class="tree-node" data-index="${data[i].children[j].id}" data-grade="${grade}">
<div class="tree-node-content" style="margin-left: 15px">
<div class="tree-node-content-left">
<img src="./images/dragger.svg" alt="" class="point-svg" />
<span class="tree-node-label">${data[i].children[j].label}</span>
<img class="config-svg" src="./images/config.svg" alt="" />
</div>
</div>
<div class="tree-node-children">`
let treeNodeContentTemplate = ''
for(let k = 0;k < data[i].children[j].children.length;k++){
grade = 3
treeNodeContentTemplate += `<div class="tree-node" data-index="${data[i].children[j].children[k].id}" data-grade="${grade}">
<div class="tree-node-content" style="margin-left: 30px">
<div class="tree-node-content-left">
<img src="./images/dragger.svg" alt="" class="point-svg" />
<span class="tree-node-tag">${data[i].children[j].children[k].tag}</span>
<span class="tree-node-label">${data[i].children[j].children[k].label}</span>
</div>
<div class="tree-node-content-right">
<div class="students-count">
<span class="number"> 0人完成</span>
<span class="line">|</span>
<span class="number">0人提交报告</span>
</div>
<div class="config">
<img class="config-svg" src="./images/config.svg" alt="" />
<button class="doc-link">编辑文档</button>
</div>
</div>
</div>
</div>`
}
treeNodeChildrenTemplate += treeNodeContentTemplate + `</div>
</div>`
}
treeTemplate += treeNodeChildrenTemplate + `</div>
</div>`
}
return treeTemplate;
}
第三问,补全 js/index.js ⽂件中的 treeDataRefresh 函数,功能为:根据参数列表 { dragGrade, dragElementId }, { dropGrade, dropElementId } 重新⽣成拖拽后的树型组件 数据 treeData ( treeData 为全局变量,直接访问并根据参数处理后重新赋值即可)。
步骤是先找到需要移动的数据并保存到变量当中,随后将需要移动的数据删除,然后寻找需要移动要的位置,插入数据即可
function treeDataRefresh(
{ dragGrade, dragElementId },
{ dropGrade, dropElementId }
) {
if (dragElementId === dropElementId) return;
// TODO:根据 `dragElementId, dropElementId` 重新生成拖拽完成后的树型组件的数据 `treeData`
if( dragGrade == dropGrade || dragGrade - dropGrade == 1){
let drapItem = {}
for(let i = 0;i < treeData.length;i++){
if(treeData[i].id === Number(dragElementId)){
drapItem = treeData[i]
treeData.splice(i,1)
break
}
for(let j = 0;j < treeData[i].children.length;j++){
if(treeData[i].children[j].id === Number(dragElementId)){
drapItem = treeData[i].children[j]
treeData[i].children.splice(j,1)
break
}
for(let k = 0;k < treeData[i].children[j].children.length;k++){
if(treeData[i].children[j].children[k].id === Number(dragElementId)){
drapItem = treeData[i].children[j].children[k]
treeData[i].children[j].children.splice(k,1)
break
}
}
}
}
if(dragGrade == dropGrade){
for(let i = 0;i < treeData.length;i++){
if(treeData[i].id === Number(dropElementId)){
treeData.splice(i+1,0,drapItem)
return
}
for(let j = 0;j < treeData[i].children.length;j++){
if(treeData[i].children[j].id === Number(dropElementId)){
treeData[i].children.splice(j+1,0,drapItem)
return
}
for(let k = 0;k < treeData[i].children[j].children.length;k++){
if(treeData[i].children[j].children[k].id === Number(dropElementId)){
treeData[i].children[j].children.splice(k+1,0,drapItem)
return
}
}
}
}
}else if(dragGrade - dropGrade == 1){
for(let i = 0;i < treeData.length;i++){
if(treeData[i].id === Number(dropElementId)){
console.log( treeData[i])
treeData[i].children.unshift(drapItem)
return
}
for(let j = 0;j < treeData[i].children.length;j++){
if(treeData[i].children[j].id === Number(dropElementId)){
treeData[i].children[j].children.unshift(drapItem)
return
}
}
}
}
}
}