数组转树结构的自定义层数的循环实现方式

回到文章>>

COPYHTML

<div class="setting"> <p>自定义层级:</p> <div class="radios"></div> </div> <div class="container"></div>

COPYCSS

.setting { padding: 20px; } .setting label { margin-right: 10px; white-space: nowrap; } .setting label span { padding-left: 10px; padding-right: 20px; } .container { padding: 20px; } .comment { background-color: rgba(105, 218, 91, 0.17); margin-bottom: 10px; padding: 10px; } .list .list { margin-left: 40px; }

COPYJAVASCRIPT

const list = [ { id: 1, pid: 0, replyid: 0, nick: '111', content: '' }, { id: 2, pid: 0, replyid: 0, nick: '222', content: '' }, { id: 3, pid: 2, replyid: 2, nick: '333', content: '' }, { id: 4, pid: 2, replyid: 3, nick: '444', content: '' }, { id: 5, pid: 2, replyid: 4, nick: '555', content: '' }, { id: 6, pid: 1, replyid: 1, nick: '666', content: '' }, { id: 7, pid: 2, replyid: 3, nick: '777', content: '' }, { id: 8, pid: 2, replyid: 5, nick: '888', content: '' }, { id: 9, pid: 2, replyid: 8, nick: '999', content: '' }, { id: 10, pid: 2, replyid: 9, nick: 'aaa', content: '' }, { id: 11, pid: 2, replyid: 10, nick: 'bbb', content: '' }, ]; const listToTreeSelf = (list, maxPath = 4) => { const newList = JSON.parse(JSON.stringify(list)); // 避免影响之前的数组 const map = new Map(); const result = []; newList.forEach((comment) => { map.set(comment.id, comment); if (comment.replyid) { // 楼中楼的评论 const parentComment = map.get(comment.replyid) || {}; comment.deep = parentComment.deep + 1; if (comment.deep >= maxPath) { const ancestorComment = map.get(parentComment.pid); comment.replyNick = parentComment.nick; if (!ancestorComment.children) { ancestorComment.children = []; } comment.pid = ancestorComment.id; ancestorComment.children.push(comment); } else { if (!parentComment.children) { parentComment.children = []; } comment.pid = parentComment.id; parentComment.children.push(comment); } } else { comment.deep = 0; result.push(comment); } }); return result; }; const render = (list) => { let html = '<div class="list">'; list.forEach((comment) => { html += `<div class="comment"><p>${comment.nick}${ comment.replyNick ? ` to ${comment.replyNick}` : '' }</p></div>`; if (Array.isArray(comment.children)) { html += render(comment.children); } }); html += '</div>'; return html; }; document.querySelector('.container').innerHTML = render(listToTreeSelf(list)); const renderRadio = () => { const min = 2; const max = 10; let html = ''; for (let i = min; i < max; i++) { html += `<label><input type="radio" name="ceng" value="${i}" ${ i === 4 ? 'checked' : '' } /><span>${i}</span></label>`; } document.querySelector('.radios').innerHTML = html; }; renderRadio(); document.querySelector('.radios').addEventListener('click', () => { if (event.target.tagName.toUpperCase() === 'INPUT') { const value = Number(event.target.value) || 4; document.querySelector('.container').innerHTML = render(listToTreeSelf(list, value)); } });
新窗口打开