豆包ai 生成动态tree 增、删、改以及上移下移 html jquery

@[豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery)

人工Ai 编程

推荐一Kimi https://kimi.moonshot.cn/

推荐二豆包https://www.doubao.com/

实现效果图

在这里插入图片描述

html 代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <title>Chapter Tree</title>
    <style>
        /* 整体树容器样式 */
        #chapter-tree-container {
            padding-left: 20px;
        }
 
        /* 章节li样式 */
        li {
            position: relative;
            padding-left: 20px;
            margin: 5px 0;
            line-height: 24px;
        }
 
        /* 利用伪元素创建线条 */
        li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 10px;
            border-top: 1px solid #ccc;
        }
 
        /* 顶级li去除顶部线条 */
        #chapter-tree-container ul li:first-child::before {
            border-top: none;
        }
 
        /* 有子章节的li添加垂直线条 */
        li:has(ul)::before {
            height: 100%;
            border-left: 1px solid #ccc;
        }
 
        /* 子章节ul样式 */
        ul {
            list-style-type: none;
            padding-left: 10px;
        }
 
        /* 美化 input */
        input.edit-input {
            width: 150px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            color: #555;
            outline: none;
        }
 
        input.edit-input::placeholder {
            color: #999;
        }
 
        /* 美化操作按钮 */
        button {
            padding: 6px 12px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
 
        button:hover {
            background-color: #0056b3;
        }
 
        button.add-button {
            background-color: #28a745;
        }
 
        button.add-button:hover {
            background-color: #218838;
        }
 
        button.modify-button {
            background-color: #ffc107;
        }
 
        button.modify-button:hover {
            background-color: #e0a800;
        }
 
        button.delete-button {
            background-color: #dc3545;
        }
 
        button.delete-button:hover {
            background-color: #c82333;
        }
 
        /* 折叠按钮样式 */
        button[text="+"],
        button[text="-"] {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
            font-size: 14px;
            line-height: 24px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="chapter-tree-container"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 初始数据结构，为每个章节添加唯一 id
        var initialData = [
            {
                id: 1,
                name: "第一单元 成长的节拍",
                children: [
                    {
                        id: 2,
                        name: "第一课 中学时代",
                        children: [
                            { id: 3, name: "中学序曲" },
                            { id: 4, name: "珍惜青春" },
                            { id: 5, name: "步入中学生活" }
                        ]
                    },
                    {
                        id: 6,
                        name: "少年有梦",
                        children: [
                            { id: 7, name: "梦想的含义" },
                            { id: 8, name: "努力的意义" },
                            { id: 9, name: "实现理想的途径" },
                            { id: 10, name: "正确对待理想与现实" }
                        ]
                    }
                ]
            }
        ];
 
        // 渲染树形章节结构
        function renderTree(data) {
            // 清空旧的渲染内容
            $('#chapter-tree-container').empty();
            var ul = $("<ul>");
            function renderChildren(children, parentUl) {
                if (!children) return;
                children.forEach(function (child) {
                    let li;
                    li = $("<li>").data('chapter-id', child.id);
                    var expandButton = $("<button>").text("+");
                    expandButton.click(function () {
                        try {
                            var subUl = li.find("ul");
                            if (subUl.length) {
                                subUl.toggle();
                                expandButton.text(subUl.is(":visible")? "-" : "+");
                            } else {
                                var newSubUl = $("<ul>").hide();
                                renderChildren(child.children, newSubUl);
                                li.append(newSubUl);
                                newSubUl.show();
                                expandButton.text("-");
                            }
                        } catch (error) {
                            console.error('Error in expand button click:', error);
                        }
                    });
                    var chapterNameSpan = $("<span>").text(child.name).addClass('chapter-name-span');
                    // 添加增删改按钮
                    var addButton = $("<button>").text("添加").addClass('add-button');
                    var modifyButton = $("<button>").text("修改").addClass('modify-button');
                    var deleteButton = $("<button>").text("删除").addClass('delete-button');
                    var moveUpButton = $("<button>").text("上移");
                    var moveDownButton = $("<button>").text("下移");
                    var addSubChapterButton = $("<button>").text("添加子章节");
 
                    addButton.click(function () {
                        try {
                            addChapter(li);
                        } catch (error) {
                            console.error('Error in add button click:', error);
                        }
                    });
                    modifyButton.click(function () {
                        try {
                            var currentLi = $(this).closest('li');
                            var chapterId = currentLi.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (!chapter) {
                                console.error('Chapter not found for modification.');
                                return;
                            }
                            var chapterNameSpan = currentLi.find('.chapter-name-span:eq(0)');
                            var input = $("<input>").val(chapter.name).addClass('edit-input').focus();
                            chapterNameSpan.replaceWith(input);
                            input.on('blur', function () {
                                try {
                                    var newName = $(this).val();
                                    var currentLi = $(this).closest('li');
                                    var chapter = getChapterFromLi(currentLi);
                                    if (chapter) {
                                        chapter.name = newName;
                                        var newChapterNameSpan = $("<span>").text(newName).addClass('chapter-name-span');
                                        $(this).replaceWith(newChapterNameSpan);
                                        if (chapter.children && chapter.children.length > 0) {
                                            var subUl = currentLi.find('ul');
                                            if (!subUl.length) {
                                                subUl = $("<ul>");
                                                renderChildren(chapter.children, subUl);
                                                currentLi.append(subUl);
                                            }
                                        }
                                    }
                                } catch (error) {
                                    console.error('Error in blur event of edit input:', error);
                                }
                            });
                        } catch (error) {
                            console.error('Error in modify button click:', error);
                        }
                    });
                    deleteButton.click(function () {
                        try {
                            var chapterId = li.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (chapter) {
                                deleteChapter(chapter);
                            }
                        } catch (error) {
                            console.error('Error in delete button click:', error);
                        }
                    });
                    moveUpButton.click(function () {
                        try {
                            moveChapterUp(li);
                        } catch (error) {
                            console.error('Error in move up button click:', error);
                        }
                    });
                    moveDownButton.click(function () {
                        try {
                            moveChapterDown(li);
                        } catch (error) {
                            console.error('Error in move down button click:', error);
                        }
                    });
                    addSubChapterButton.click(function () {
                        try {
                            var chapterId = li.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (chapter) {
                                addSubChapter(chapter);
                            }
                        } catch (error) {
                            console.error('Error in add sub-chapter button click:', error);
                        }
                    });
 
                    li.append(expandButton, chapterNameSpan, addButton, modifyButton, deleteButton, moveUpButton, moveDownButton, addSubChapterButton);
                    if (child.children && child.children.length > 0) {
                        var subUl = $("<ul>");
                        renderChildren(child.children, subUl);
                        li.append(subUl);
                    }
                    parentUl.append(li);
                });
            }
            renderChildren(data, ul);
            $("#chapter-tree-container").append(ul);
        }
 
        // 添加章节
        function addChapter(clickedLi) {
            try {
                var newChapter = { id: Date.now(), name: "默认章节", children: [] };
                var parentUl = clickedLi.parent('ul');
                var parentChapter;
                if (parentUl.length) {
                    var parentLi = parentUl.parent('li');
                    if (parentLi.length) {
                        parentChapter = getChapterFromLi(parentLi);
                    } else {
                        // 顶级 ul 的情况
                        parentChapter = { children: initialData };
                    }
                } else {
                    // 顶级 li 的情况
                    parentChapter = { children: initialData };
                }
                if (!parentChapter.children) {
                    parentChapter.children = [];
                }
                parentChapter.children.push(newChapter);
                renderTree(initialData);
            } catch (error) {
                console.error('Error in addChapter function:', error);
            }
        }
 
        // 添加子章节
        function addSubChapter(parentNode) {
            try {
                var newChapter = { id: Date.now(), name: "默认子章节", children: [] };
                if (!parentNode.children) {
                    parentNode.children = [];
                }
                parentNode.children.push(newChapter);
                renderTree(initialData);
            } catch (error) {
                console.error('Error in addSubChapter function:', error);
            }
        }
 
        // 删除章节
        function deleteChapter(node) {
            try {
                if (node.parent) {
                    var index = node.parent.children.indexOf(node);
                    if (index >-1) {
                        node.parent.children.splice(index, 1);
                    }
                } else {
                    var index = initialData.indexOf(node);
                    if (index >-1) {
                        initialData.splice(index, 1);
                    }
                }
                renderTree(initialData);
            } catch (error) {
                console.error('Error in deleteChapter function:', error);
            }
        }
 
        // 章节上移
        function moveChapterUp(li) {
            try {
                var prevLi = li.prev("li");
                if (prevLi.length) {
                    var prevIndex = li.parent().children().index(prevLi);
                    var currentIndex = li.parent().children().index(li);
                    var parent = getParentOfLi(li);
                    if (parent && Array.isArray(parent.children)) {
                        var chapter = getChapterFromLi(li);
                        if (chapter) {
                            parent.children.splice(currentIndex, 1);
                            parent.children.splice(prevIndex, 0, chapter);
                        }
                    } else if (!parent && Array.isArray(initialData)) {
                        var chapter = getChapterFromLi(li);
                        if (chapter) {
                            initialData.splice(currentIndex, 1);
                            initialData.splice(prevIndex, 0, chapter);
                        }
                    }
                    li.insertBefore(prevLi);
                }
            } catch (error) {
                console.error('Error in moveChapterUp function:', error);
            }
        }
 
        // 章节下移
        function moveChapterDown(li) {
            try {
                var nextLi = li.next("li");
                if (nextLi.length) {
                    var nextIndex = li.parent().children().index(nextLi);
                    var currentIndex = li.parent().children().index(li);
                    var parent = getParentOfLi(li);
                    if (parent && Array.isArray(parent.children)) {
                        var chapter = getChapterFromLi(li);
                        if (chapter) {
                            parent.children.splice(currentIndex, 1);
                            parent.children.splice(nextIndex + 1, 0, chapter);
                        }
                    } else if (!parent && Array.isArray(initialData)) {
                        var chapter = getChapterFromLi(li);
                        if (chapter) {
                            initialData.splice(currentIndex, 1);
                            initialData.splice(nextIndex + 1, 0, chapter);
                        }
                    }
                    li.insertAfter(nextLi);
                }
            } catch (error) {
                console.error('Error in moveChapterDown function:', error);
            }
        }
 
        function getParentOfLi(li) {
            try {
                var parentLi = li.parent('li');
                if (parentLi.length) {
                    var parentChapterId = parentLi.data('chapter-id');
                    return findChapterById(parentChapterId, initialData);
                }
                return null;
            } catch (error) {
                console.error('Error in getParentOfLi function:', error);
            }
        }
 
        function getChapterFromLi(li) {
            try {
                var chapterId = li.data('chapter-id');
                return findChapterById(chapterId, initialData);
            } catch (error) {
                console.error('Error in getChapterFromLi function:', error);
            }
        }
 
        function findChapterById(id, data) {
            try {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].id === id) {
                        return data[i];
                    }
                    if (data[i].children && data[i].children.length > 0) {
                        var found = findChapterById(id, data[i].children);
                        if (found) {
                            return found;
                        }
                    }
                }
                return null;
            } catch (error) {
                console.error('Error in findChapterById function:', error);
            }
        }
 
        // 初始化渲染
        $(document).ready(function () {
            renderTree(initialData);
        });
    </script>
</body>
 
</html>复制

上一版本有问题，下面是最新版本的。

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <title>Chapter Tree</title>
    <style>
        /* 整体树容器样式 */
        #chapter-tree-container {
            padding-left: 20px;
        }
 
        /* 章节li样式 */
        li {
            position: relative;
            padding-left: 20px;
            margin: 5px 0;
            line-height: 24px;
        }
 
        /* 利用伪元素创建线条 */
        li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 10px;
            border-top: 1px solid #ccc;
        }
 
        /* 顶级li去除顶部线条 */
        #chapter-tree-container ul li:first-child::before {
            border-top: none;
        }
 
        /* 有子章节的li添加垂直线条 */
        li:has(ul)::before {
            height: 100%;
            border-left: 1px solid #ccc;
        }
 
        /* 子章节ul样式 */
        ul {
            list-style-type: none;
            padding-left: 10px;
        }
 
        /* 美化 input */
        input.edit-input {
            width: 150px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            color: #555;
            outline: none;
        }
 
        input.edit-input::placeholder {
            color: #999;
        }
 
        /* 美化操作按钮 */
        button {
            padding: 6px 12px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
 
        button:hover {
            background-color: #0056b3;
        }
 
        button.add-button {
            background-color: #28a745;
        }
 
        button.add-button:hover {
            background-color: #218838;
        }
 
        button.modify-button {
            background-color: #ffc107;
        }
 
        button.modify-button:hover {
            background-color: #e0a800;
        }
 
        button.delete-button {
            background-color: #dc3545;
        }
 
        button.delete-button:hover {
            background-color: #c82333;
        }
 
        /* 折叠按钮样式 */
        button[text="+"],
        button[text="-"] {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
            font-size: 14px;
            line-height: 24px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="chapter-tree-container"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 初始数据结构，为每个章节添加唯一 id
        var initialData = [
            {
                id: 1,
                name: "第一单元 成长的节拍",
                children: [
                    {
                        id: 2,
                        name: "第一课 中学时代",
                        children: [
                            { id: 3, name: "中学序曲" },
                            { id: 4, name: "珍惜青春" },
                            { id: 5, name: "步入中学生活" }
                        ]
                    },
                    {
                        id: 6,
                        name: "少年有梦",
                        children: [
                            { id: 7, name: "梦想的含义" },
                            { id: 8, name: "努力的意义" },
                            { id: 9, name: "实现理想的途径" },
                            { id: 10, name: "正确对待理想与现实" }
                        ]
                    }
                ]
            }
        ];
 
        // 记录展开状态的对象
        var expandedStates = {};
 
        // 渲染树形章节结构
        function renderTree(data) {
            // 清空旧的渲染内容
            $('#chapter-tree-container').empty();
            var ul = $("<ul>");
            function renderChildren(children, parentUl) {
                if (!children) return;
                children.forEach(function (child) {
                    let li;
                    li = $("<li>").data('chapter-id', child.id);
                    var expandButton = $("<button>").text(expandedStates[child.id]? "-" : "+");
                    expandButton.click(function () {
                        try {
                            var subUl = li.find("ul");
                            if (subUl.length) {
                                subUl.toggle();
                                expandButton.text(subUl.is(":visible")? "-" : "+");
                                expandedStates[child.id] = subUl.is(":visible");
                            } else {
                                var newSubUl = $("<ul>").hide();
                                renderChildren(child.children, newSubUl);
                                li.append(newSubUl);
                                newSubUl.show();
                                expandButton.text("-");
                                expandedStates[child.id] = true;
                            }
                        } catch (error) {
                            console.error('Error in expand button click:', error);
                        }
                    });
                    var chapterNameSpan = $("<span>").text(child.name).addClass('chapter-name-span');
                    // 添加增删改按钮
                    var addButton = $("<button>").text("添加").addClass('add-button');
                    var modifyButton = $("<button>").text("修改").addClass('modify-button');
                    var deleteButton = $("<button>").text("删除").addClass('delete-button');
                    var moveUpButton = $("<button>").text("上移");
                    var moveDownButton = $("<button>").text("下移");
                    var addSubChapterButton = $("<button>").text("添加子章节");
 
                    addButton.click(function () {
                        try {
                            addChapter(li);
                        } catch (error) {
                            console.error('Error in add button click:', error);
                        }
                    });
                    modifyButton.click(function () {
                        try {
                            var currentLi = $(this).closest('li');
                            var chapterId = currentLi.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (!chapter) {
                                console.error('Chapter not found for modification.');
                                return;
                            }
                            var chapterNameSpan = currentLi.find('.chapter-name-span:eq(0)');
                            var input = $("<input>").val(chapter.name).addClass('edit-input').focus();
                            chapterNameSpan.replaceWith(input);
                            input.on('blur', function () {
                                try {
                                    var newName = $(this).val();
                                    var currentLi = $(this).closest('li');
                                    var chapter = getChapterFromLi(currentLi);
                                    if (chapter) {
                                        chapter.name = newName;
                                        var newChapterNameSpan = $("<span>").text(newName).addClass('chapter-name-span');
                                        $(this).replaceWith(newChapterNameSpan);
                                        if (chapter.children && chapter.children.length > 0) {
                                            var subUl = currentLi.find('ul');
                                            if (!subUl.length) {
                                                subUl = $("<ul>");
                                                renderChildren(chapter.children, subUl);
                                                currentLi.append(subUl);
                                            }
                                        }
                                    }
                                } catch (error) {
                                    console.error('Error in blur event of edit input:', error);
                                }
                            });
                        } catch (error) {
                            console.error('Error in modify button click:', error);
                        }
                    });
                    deleteButton.click(function () {
                        try {
                            var chapterId = li.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (chapter && (!chapter.children || (chapter.children && chapter.children.length === 0))) {
                                deleteChapter(chapter);
                            }
                        } catch (error) {
                            console.error('Error in delete button click:', error);
                        }
                    });
                    moveUpButton.click(function () {
                        try {
                            moveChapterUp(li);
                        } catch (error) {
                            console.error('Error in move up button click:', error);
                        }
                    });
                    moveDownButton.click(function () {
                        try {
                            moveChapterDown(li);
                        } catch (error) {
                            console.error('Error in move down button click:', error);
                        }
                    });
                    addSubChapterButton.click(function () {
                        try {
                            var chapterId = li.data('chapter-id');
                            var chapter = findChapterById(chapterId, initialData);
                            if (chapter) {
                                addSubChapter(chapter);
                            }
                        } catch (error) {
                            console.error('Error in add sub - chapter button click:', error);
                        }
                    });
 
                    li.append(expandButton, chapterNameSpan, addButton, modifyButton, deleteButton, moveUpButton, moveDownButton, addSubChapterButton);
                    if (child.children && child.children.length > 0) {
                        var subUl = $("<ul>");
                        renderChildren(child.children, subUl);
                        li.append(subUl);
                        if (expandedStates[child.id]) {
                            subUl.show();
                            expandButton.text("-");
                        } else {
                            subUl.hide();
                            expandButton.text("+");
                        }
                    }
                    parentUl.append(li);
                });
            }
            renderChildren(data, ul);
            $("#chapter-tree-container").append(ul);
        }
 
        // 添加章节
        function addChapter(clickedLi) {
            try {
                var newChapter = { id: Date.now(), name: "默认章节", children: [] };
                var parentUl = clickedLi.parent('ul');
                var parentChapter;
                if (parentUl.length) {
                    var parentLi = parentUl.parent('li');
                    if (parentLi.length) {
                        parentChapter = getChapterFromLi(parentLi);
                    } else {
                        // 顶级 ul 的情况
                        parentChapter = { children: initialData };
                    }
                } else {
                    // 顶级 li 的情况
                    parentChapter = { children: initialData };
                }
                if (!parentChapter.children) {
                    parentChapter.children = [];
                }
                parentChapter.children.push(newChapter);
                renderTree(initialData);
            } catch (error) {
                console.error('Error in addChapter function:', error);
            }
        }
 
        // 添加子章节
        function addSubChapter(parentNode) {
            try {
                var newChapter = { id: Date.now(), name: "默认子章节", children: [] };
                if (!parentNode.children) {
                    parentNode.children = [];
                }
                parentNode.children.push(newChapter);
                renderTree(initialData);
            } catch (error) {
                console.error('Error in addSubChapter function:', error);
            }
        }
 
        // 删除章节
        function deleteChapter(node) {
            try {
                let parent;
                let parentArray;
                if (node.id === initialData[0].id) {
                    initialData = [];
                } else {
                    const findParent = (data) => {
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].children) {
                                for (let j = 0; j < data[i].children.length; j++) {
                                    if (data[i].children[j].id === node.id) {
                                        return { parent: data[i], index: j };
                                    }
                                }
                                const result = findParent(data[i].children);
                                if (result) {
                                    return result;
                                }
                            }
                        }
                        return null;
                    };
                    const parentInfo = findParent(initialData);
                    if (parentInfo) {
                        parent = parentInfo.parent;
                        parentArray = parent.children;
                        parentArray.splice(parentInfo.index, 1);
                    }
                }
                renderTree(initialData);
            } catch (error) {
                console.error('Error in deleteChapter function:', error);
            }
        }
 
        // 章节上移
        function moveChapterUp(li) {
            try {
                var chapter = getChapterFromLi(li);
                if (!chapter) {
                    return;
                }
                var parentArray = findContainingArray(chapter, initialData);
                if (!parentArray) {
                    return;
                }
                var currentIndex = parentArray.indexOf(chapter);
                if (currentIndex > 0) {
                    var temp = parentArray[currentIndex - 1];
                    parentArray[currentIndex - 1] = chapter;
                    parentArray[currentIndex] = temp;
                    renderTree(initialData);
                }
            } catch (error) {
                console.error('Error in moveChapterUp function:', error);
            }
        }
 
        // 章节下移
        function moveChapterDown(li) {
            try {
                var chapter = getChapterFromLi(li);
                if (!chapter) {
                    return;
                }
                var parentArray = findContainingArray(chapter, initialData);
                if (!parentArray) {
                    return;
                }
                var currentIndex = parentArray.indexOf(chapter);
                if (currentIndex < parentArray.length - 1) {
                    var temp = parentArray[currentIndex + 1];
                    parentArray[currentIndex + 1] = chapter;
                    parentArray[currentIndex] = temp;
                    renderTree(initialData);
                }
            } catch (error) {
                console.error('Error in moveChapterDown function:', error);
            }
        }
 
        function findContainingArray(target, data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].id === target.id) {
                    return data;
                }
                if (data[i].children) {
                    const subArray = findContainingArray(target, data[i].children);
                    if (subArray) {
                        return subArray;
                    }
                }
            }
            return null;
        }
 
        function getChapterFromLi(li) {
            const chapterId = li.data('chapter-id');
            return findChapterById(chapterId, initialData);
        }
 
        function findChapterById(id, data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].id === id) {
                    return data[i];
                }
                if (data[i].children) {
                    const found = findChapterById(id, data[i].children);
                    if (found) {
                        return found;
                    }
                }
            }
            return null;
        }
 
        // 初始化渲染
        $(document).ready(function () {
            renderTree(initialData);
        });
    </script>
</body>
 
</html>复制

再次实现，两个tree 左右对比，左边的章节，选中关联的在右边tree2 默认出来
在这里插入图片描述
增加搜索按钮，动态折叠展示搜索的内容

增加一个layui 弹框展示无限极联动select 通过数组动态渲染,省市区联动或者章节联动
效果图：
在这里插入图片描述

  
<!-- 按钮，点击弹出多级联动select的弹框 -->
<button id="openSelectDialog" class="layui-btn">打开多级联动选择弹框</button>
 
<script>
layui.use(['layer', 'jquery', 'form'], function(){
    var layer = layui.layer;
    var $ = layui.jquery;
    var form = layui.form;
    var initialData = [
            {
                id: 1,
                name: "1",
                sort: 1,
                children: [
                    {
                        id: 2,
                        name: "1-1",
                        sort: 2,
                        children: [
                            { id: 3, name: "1-1-1", sort: 3, checkbox: true, color: true },
                            { id: 4, name: "1-1-2", sort: 1 },
                            { id: 5, name: "1-1-3", sort: 2 }
                        ]
                    },
                    {
                        id: 6,
                        name: "少年有梦",
                        sort: 1,
                        children: [
                            { id: 7, name: "1-2-1", sort: 1, color: true },
                            { id: 8, name: "1-2-2", sort: 2, color: true },
                            { id: 9, name: "1-2-3", sort: 3 },
                            { id: 10, name: "1-2-4", sort: 4 }
                        ]
                    }
                ]
            },
            {
                id: 11,
                name: "2",
                sort: 1,
                children: [
                    {
                        id: 12,
                        name: "2-1",
                        sort: 2,
                        children: [
                            { id: 13, name: "2-1-1", sort: 3, checkbox: true, color: true },
                            { id: 14, name: "2-1-2", sort: 1 },
                            { id: 15, name: "2-1-3", sort: 2 }
                        ]
                    },
                    {
                        id: 16,
                        name: "2-2",
                        sort: 1,
                        children: [
                            { id: 17, name: "2-2-1", sort: 1, color: true },
                            { id: 18, name: "2-2-2", sort: 2, color: true },
                            { id: 19, name: "2-2-3", sort: 3 },
                            { id: 20, name: "2-2-4", sort: 4 }
                        ]
                    }
                ]
            }
        ];
 
    // 打开弹框的按钮点击事件
    $('#openSelectDialog').on('click', function(){
        // 弹出弹框
        layer.open({
            type: 1,
            area: ['400px', '500px'],
            title: '多级联动选择',
            content: '<div id="selectContainer"></div>', // 弹框内容容器
            success: function(layero, index){
                // 初始化多级联动select，根据数据结构中最深的层级来确定select的数量
                var maxDepth = getMaxDepth(initialData);
                initSelect(initialData, '#selectContainer', maxDepth);
                form.render(); // 重新渲染表单
            },
            btn: ['确定', '取消'],
            yes: function (index, layero) {
               var result = [];
                var level1 = $("#select1").val()??0;
                var level2 = $("#select2").val()??0;
                var level3 = $("#select3").val()??0;
                var level4 = $("#select4").val()??0;
                var level5 = $("#select5").val()??0;
                
                var data = {    
                     id:chapterId,
                     types:'upmove',
                     level1:level1,
                     level2:level2,
                     level3:level3,
                     level4:level4,
                     level5:level5,
                     type:2
                  };
                  $.ajax({
                    url: "../Chapters/chapters",
                    dataType: "json",
                    data: data,
                    type: 'post',
                    success: function(res) {
                        if (res.code == 200) {
                            layer.msg('移动完成');
                            layer.close(index);
                            onLoadZTreewb();
                        } 
                    }
                  })
               
            },
            btn2: function (index) {
                layer.close(index);
                return false;
            }
 
        });
    });
 
    // 获取数据结构中最深的层级
    function getMaxDepth(data, currentDepth = 1){
        var maxDepth = currentDepth;
        data.forEach(function(item){
            if(item.children && item.children.length > 0){
                var childDepth = getMaxDepth(item.children, currentDepth + 1);
                if(childDepth > maxDepth){
                    maxDepth = childDepth;
                }
            }
        });
        return maxDepth;
    }
 
    // 初始化多级联动select的函数
    function initSelect(data, containerSelector, maxDepth){
        var selectContainer = $(containerSelector);
        // 根据最深的层级创建所有select
        for(var i = 1; i <= maxDepth; i++){
            var selectHtml = '<select name="level'+i+'" class="layui-select level-select">';
            selectHtml += '<option value="">请选择第'+i+'级分类</option>';
            selectHtml += '</select>';
            selectContainer.append(selectHtml);
        }
 
        // 为第一个select填充数据
        var firstSelect = selectContainer.find('select[name="level1"]');
        data.forEach(function(item){
            firstSelect.append('<option value="'+item.id+'">'+item.name+'</option>');
        });
 
        // 绑定change事件，动态填充后续select
        selectContainer.on('change', '.level-select', function(){
            var currentSelect = $(this);
            var currentIndex = currentSelect.attr('name').replace('level', '');
            var nextSelect = selectContainer.find('select[name="level'+(parseInt(currentIndex) + 1)+'"]');
            nextSelect.empty().append('<option value="">请选择第'+(parseInt(currentIndex) + 1)+'级分类</option>');
            var selectedId = currentSelect.val();
            if(selectedId){
                var childrenData = findChildrenById(data, selectedId);
                if(childrenData && childrenData.length > 0){
                    childrenData.forEach(function(childItem){
                        nextSelect.append('<option value="'+childItem.id+'">'+childItem.name+'</option>');
                    });
                }
            }
            // 清空当前select之后的所有select的选项
            for(var i = parseInt(currentIndex) + 2; i <= maxDepth; i++){
                selectContainer.find('select[name="level'+i+'"]').empty().append('<option value="">请选择第'+i+'级分类</option>');
            }
            form.render(); // 重新渲染表单
        });
 
        // 根据id查找子数据的函数
        function findChildrenById(data, id){
            for(var i = 0; i < data.length; i++){
                if(data[i].id == id){
                    return data[i].children;
                }else if(data[i].children && data[i].children.length > 0){
                    var result = findChildrenById(data[i].children, id);
                    if(result){
                        return result;
                    }
                }
            }
            return null;
        }
    }
});
</script>复制

豆包ai 生成动态tree 增、删、改以及上移下移 html jquery

人工Ai 编程

推荐一Kimi https://kimi.moonshot.cn/

推荐二豆包https://www.doubao.com/

实现效果图

html 代码

学习Ai 大模型第一步学会使用这些工具助手

监听其他音频播放时暂停正在播放的音频

【现代前端框架中本地图片资源的处理方案】

BCSP-玄子Java开发之Java Web编程CH010_使用Ajax和jQuery实现异步请求

第四章 jQuery基本操作

基于vue jsmind jquery的自定义扩展的思维导图

jquery实现树形列表加拖拽排序功能

jQuery的基本使用学习笔记

web数据可视化(Echarts版)4-9基本漏斗图(代码仅供参考)

echarts 饼图自动高亮展示数据

关于在vue2中echarts折线图双Y轴刻度线对齐的问题

前端哥

监听其他音频播放时暂停正在播放的音频

[Java基础]单元测试

矩阵碰一碰发视频之 API 接口接入技术开发全解析，支持OEM

pyrender 自动计算相机 pose

【音视频】编解码相关概念总结

cv2.solvePnP 报错求相机位姿

高清下载油管视频到本地

websocket

光谱相机的市场发展趋势

[ISP] AE 自动曝光

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale = 1.0">
	<title>Chapter Tree</title>
	<style>
	/* 整体树容器样式 */
	#chapter-tree-container {
	padding-left: 20px;
	}

	/* 章节li样式 */
	li {
	position: relative;
	padding-left: 20px;
	margin: 5px 0;
	line-height: 24px;
	}

	/* 利用伪元素创建线条 */
	li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 10px;
	border-top: 1px solid #ccc;
	}

	/* 顶级li去除顶部线条 */
	#chapter-tree-container ul li:first-child::before {
	border-top: none;
	}

	/* 有子章节的li添加垂直线条 */
	li:has(ul)::before {
	height: 100%;
	border-left: 1px solid #ccc;
	}

	/* 子章节ul样式 */
	ul {
	list-style-type: none;
	padding-left: 10px;
	}

	/* 美化 input */
	input.edit-input {
	width: 150px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	color: #555;
	outline: none;
	}

	input.edit-input::placeholder {
	color: #999;
	}

	/* 美化操作按钮 */
	button {
	padding: 6px 12px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

	button:hover {
	background-color: #0056b3;
	}

	button.add-button {
	background-color: #28a745;
	}

	button.add-button:hover {
	background-color: #218838;
	}

	button.modify-button {
	background-color: #ffc107;
	}

	button.modify-button:hover {
	background-color: #e0a800;
	}

	button.delete-button {
	background-color: #dc3545;
	}

	button.delete-button:hover {
	background-color: #c82333;
	}

	/* 折叠按钮样式 */
	button[text="+"],
	button[text="-"] {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	padding: 0;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div id="chapter-tree-container"></div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	// 初始数据结构，为每个章节添加唯一 id
	var initialData = [
	{
	id: 1,
	name: "第一单元成长的节拍",
	children: [
	{
	id: 2,
	name: "第一课中学时代",
	children: [
	{ id: 3, name: "中学序曲" },
	{ id: 4, name: "珍惜青春" },
	{ id: 5, name: "步入中学生活" }
	]
	},
	{
	id: 6,
	name: "少年有梦",
	children: [
	{ id: 7, name: "梦想的含义" },
	{ id: 8, name: "努力的意义" },
	{ id: 9, name: "实现理想的途径" },
	{ id: 10, name: "正确对待理想与现实" }
	]
	}
	]
	}
	];

	// 渲染树形章节结构
	function renderTree(data) {
	// 清空旧的渲染内容
	$('#chapter-tree-container').empty();
	var ul = $("<ul>");
	function renderChildren(children, parentUl) {
	if (!children) return;
	children.forEach(function (child) {
	let li;
	li = $("<li>").data('chapter-id', child.id);
	var expandButton = $("<button>").text("+");
	expandButton.click(function () {
	try {
	var subUl = li.find("ul");
	if (subUl.length) {
	subUl.toggle();
	expandButton.text(subUl.is(":visible")? "-" : "+");
	} else {
	var newSubUl = $("<ul>").hide();
	renderChildren(child.children, newSubUl);
	li.append(newSubUl);
	newSubUl.show();
	expandButton.text("-");
	}
	} catch (error) {
	console.error('Error in expand button click:', error);
	}
	});
	var chapterNameSpan = $("<span>").text(child.name).addClass('chapter-name-span');
	// 添加增删改按钮
	var addButton = $("<button>").text("添加").addClass('add-button');
	var modifyButton = $("<button>").text("修改").addClass('modify-button');
	var deleteButton = $("<button>").text("删除").addClass('delete-button');
	var moveUpButton = $("<button>").text("上移");
	var moveDownButton = $("<button>").text("下移");
	var addSubChapterButton = $("<button>").text("添加子章节");

	addButton.click(function () {
	try {
	addChapter(li);
	} catch (error) {
	console.error('Error in add button click:', error);
	}
	});
	modifyButton.click(function () {
	try {
	var currentLi = $(this).closest('li');
	var chapterId = currentLi.data('chapter-id');
	var chapter = findChapterById(chapterId, initialData);
	if (!chapter) {
	console.error('Chapter not found for modification.');
	return;
	}
	var chapterNameSpan = currentLi.find('.chapter-name-span:eq(0)');
	var input = $("<input>").val(chapter.name).addClass('edit-input').focus();
	chapterNameSpan.replaceWith(input);
	input.on('blur', function () {
	try {
	var newName = $(this).val();
	var currentLi = $(this).closest('li');
	var chapter = getChapterFromLi(currentLi);
	if (chapter) {
	chapter.name = newName;
	var newChapterNameSpan = $("<span>").text(newName).addClass('chapter-name-span');
	$(this).replaceWith(newChapterNameSpan);
	if (chapter.children && chapter.children.length > 0) {
	var subUl = currentLi.find('ul');
	if (!subUl.length) {
	subUl = $("<ul>");
	renderChildren(chapter.children, subUl);
	currentLi.append(subUl);
	}
	}
	}
	} catch (error) {
	console.error('Error in blur event of edit input:', error);
	}
	});
	} catch (error) {
	console.error('Error in modify button click:', error);
	}
	});
	deleteButton.click(function () {
	try {
	var chapterId = li.data('chapter-id');
	var chapter = findChapterById(chapterId, initialData);
	if (chapter) {
	deleteChapter(chapter);
	}
	} catch (error) {
	console.error('Error in delete button click:', error);
	}
	});
	moveUpButton.click(function () {
	try {
	moveChapterUp(li);
	} catch (error) {
	console.error('Error in move up button click:', error);
	}
	});
	moveDownButton.click(function () {
	try {
	moveChapterDown(li);
	} catch (error) {
	console.error('Error in move down button click:', error);
	}
	});
	addSubChapterButton.click(function () {
	try {
	var chapterId = li.data('chapter-id');
	var chapter = findChapterById(chapterId, initialData);
	if (chapter) {
	addSubChapter(chapter);
	}
	} catch (error) {
	console.error('Error in add sub-chapter button click:', error);
	}
	});

	li.append(expandButton, chapterNameSpan, addButton, modifyButton, deleteButton, moveUpButton, moveDownButton, addSubChapterButton);
	if (child.children && child.children.length > 0) {
	var subUl = $("<ul>");
	renderChildren(child.children, subUl);
	li.append(subUl);
	}
	parentUl.append(li);
	});
	}
	renderChildren(data, ul);
	$("#chapter-tree-container").append(ul);
	}

	// 添加章节
	function addChapter(clickedLi) {
	try {
	var newChapter = { id: Date.now(), name: "默认章节", children: [] };
	var parentUl = clickedLi.parent('ul');
	var parentChapter;
	if (parentUl.length) {
	var parentLi = parentUl.parent('li');
	if (parentLi.length) {
	parentChapter = getChapterFromLi(parentLi);
	} else {
	// 顶级 ul 的情况
	parentChapter = { children: initialData };
	}
	} else {
	// 顶级 li 的情况
	parentChapter = { children: initialData };
	}
	if (!parentChapter.children) {
	parentChapter.children = [];
	}
	parentChapter.children.push(newChapter);
	renderTree(initialData);
	} catch (error) {
	console.error('Error in addChapter function:', error);
	}
	}

	// 添加子章节
	function addSubChapter(parentNode) {
	try {
	var newChapter = { id: Date.now(), name: "默认子章节", children: [] };
	if (!parentNode.children) {
	parentNode.children = [];
	}
	parentNode.children.push(newChapter);
	renderTree(initialData);
	} catch (error) {
	console.error('Error in addSubChapter function:', error);
	}
	}

	// 删除章节
	function deleteChapter(node) {
	try {
	if (node.parent) {
	var index = node.parent.children.indexOf(node);
	if (index >-1) {
	node.parent.children.splice(index, 1);
	}
	} else {
	var index = initialData.indexOf(node);
	if (index >-1) {
	initialData.splice(index, 1);
	}
	}
	renderTree(initialData);
	} catch (error) {
	console.error('Error in deleteChapter function:', error);
	}
	}

	// 章节上移
	function moveChapterUp(li) {
	try {
	var prevLi = li.prev("li");
	if (prevLi.length) {
	var prevIndex = li.parent().children().index(prevLi);
	var currentIndex = li.parent().children().index(li);
	var parent = getParentOfLi(li);
	if (parent && Array.isArray(parent.children)) {
	var chapter = getChapterFromLi(li);
	if (chapter) {
	parent.children.splice(currentIndex, 1);
	parent.children.splice(prevIndex, 0, chapter);
	}
	} else if (!parent && Array.isArray(initialData)) {
	var chapter = getChapterFromLi(li);
	if (chapter) {
	initialData.splice(currentIndex, 1);
	initialData.splice(prevIndex, 0, chapter);
	}
	}
	li.insertBefore(prevLi);
	}
	} catch (error) {
	console.error('Error in moveChapterUp function:', error);
	}
	}

	// 章节下移
	function moveChapterDown(li) {
	try {
	var nextLi = li.next("li");
	if (nextLi.length) {
	var nextIndex = li.parent().children().index(nextLi);
	var currentIndex = li.parent().children().index(li);
	var parent = getParentOfLi(li);
	if (parent && Array.isArray(parent.children)) {
	var chapter = getChapterFromLi(li);
	if (chapter) {
	parent.children.splice(currentIndex, 1);
	parent.children.splice(nextIndex + 1, 0, chapter);
	}
	} else if (!parent && Array.isArray(initialData)) {
	var chapter = getChapterFromLi(li);
	if (chapter) {
	initialData.splice(currentIndex, 1);
	initialData.splice(nextIndex + 1, 0, chapter);
	}
	}
	li.insertAfter(nextLi);
	}
	} catch (error) {
	console.error('Error in moveChapterDown function:', error);
	}
	}

	function getParentOfLi(li) {
	try {
	var parentLi = li.parent('li');
	if (parentLi.length) {
	var parentChapterId = parentLi.data('chapter-id');
	return findChapterById(parentChapterId, initialData);
	}
	return null;
	} catch (error) {
	console.error('Error in getParentOfLi function:', error);
	}
	}

	function getChapterFromLi(li) {
	try {
	var chapterId = li.data('chapter-id');
	return findChapterById(chapterId, initialData);
	} catch (error) {
	console.error('Error in getChapterFromLi function:', error);
	}
	}

	function findChapterById(id, data) {
	try {
	for (var i = 0; i < data.length; i++) {
	if (data[i].id === id) {
	return data[i];
	}
	if (data[i].children && data[i].children.length > 0) {
	var found = findChapterById(id, data[i].children);
	if (found) {
	return found;
	}
	}
	}
	return null;
	} catch (error) {
	console.error('Error in findChapterById function:', error);
	}
	}

	// 初始化渲染
	$(document).ready(function () {
	renderTree(initialData);
	});
	</script>
	</body>

	</html>


	<!-- 按钮，点击弹出多级联动select的弹框 -->
	<button id="openSelectDialog" class="layui-btn">打开多级联动选择弹框</button>

	<script>
	layui.use(['layer', 'jquery', 'form'], function(){
	var layer = layui.layer;
	var $ = layui.jquery;
	var form = layui.form;
	var initialData = [
	{
	id: 1,
	name: "1",
	sort: 1,
	children: [
	{
	id: 2,
	name: "1-1",
	sort: 2,
	children: [
	{ id: 3, name: "1-1-1", sort: 3, checkbox: true, color: true },
	{ id: 4, name: "1-1-2", sort: 1 },
	{ id: 5, name: "1-1-3", sort: 2 }
	]
	},
	{
	id: 6,
	name: "少年有梦",
	sort: 1,
	children: [
	{ id: 7, name: "1-2-1", sort: 1, color: true },
	{ id: 8, name: "1-2-2", sort: 2, color: true },
	{ id: 9, name: "1-2-3", sort: 3 },
	{ id: 10, name: "1-2-4", sort: 4 }
	]
	}
	]
	},
	{
	id: 11,
	name: "2",
	sort: 1,
	children: [
	{
	id: 12,
	name: "2-1",
	sort: 2,
	children: [
	{ id: 13, name: "2-1-1", sort: 3, checkbox: true, color: true },
	{ id: 14, name: "2-1-2", sort: 1 },
	{ id: 15, name: "2-1-3", sort: 2 }
	]
	},
	{
	id: 16,
	name: "2-2",
	sort: 1,
	children: [
	{ id: 17, name: "2-2-1", sort: 1, color: true },
	{ id: 18, name: "2-2-2", sort: 2, color: true },
	{ id: 19, name: "2-2-3", sort: 3 },
	{ id: 20, name: "2-2-4", sort: 4 }
	]
	}
	]
	}
	];

	// 打开弹框的按钮点击事件
	$('#openSelectDialog').on('click', function(){
	// 弹出弹框
	layer.open({
	type: 1,
	area: ['400px', '500px'],
	title: '多级联动选择',
	content: '<div id="selectContainer"></div>', // 弹框内容容器
	success: function(layero, index){
	// 初始化多级联动select，根据数据结构中最深的层级来确定select的数量
	var maxDepth = getMaxDepth(initialData);
	initSelect(initialData, '#selectContainer', maxDepth);
	form.render(); // 重新渲染表单
	},
	btn: ['确定', '取消'],
	yes: function (index, layero) {
	var result = [];
	var level1 = $("#select1").val()??0;
	var level2 = $("#select2").val()??0;
	var level3 = $("#select3").val()??0;
	var level4 = $("#select4").val()??0;
	var level5 = $("#select5").val()??0;

	var data = {
	id:chapterId,
	types:'upmove',
	level1:level1,
	level2:level2,
	level3:level3,
	level4:level4,
	level5:level5,
	type:2
	};
	$.ajax({
	url: "../Chapters/chapters",
	dataType: "json",
	data: data,
	type: 'post',
	success: function(res) {
	if (res.code == 200) {
	layer.msg('移动完成');
	layer.close(index);
	onLoadZTreewb();
	}
	}
	})

	},
	btn2: function (index) {
	layer.close(index);
	return false;
	}

	});
	});

	// 获取数据结构中最深的层级
	function getMaxDepth(data, currentDepth = 1){
	var maxDepth = currentDepth;
	data.forEach(function(item){
	if(item.children && item.children.length > 0){
	var childDepth = getMaxDepth(item.children, currentDepth + 1);
	if(childDepth > maxDepth){
	maxDepth = childDepth;
	}
	}
	});
	return maxDepth;
	}

	// 初始化多级联动select的函数
	function initSelect(data, containerSelector, maxDepth){
	var selectContainer = $(containerSelector);
	// 根据最深的层级创建所有select
	for(var i = 1; i <= maxDepth; i++){
	var selectHtml = '<select name="level'+i+'" class="layui-select level-select">';
	selectHtml += '<option value="">请选择第'+i+'级分类</option>';
	selectHtml += '</select>';
	selectContainer.append(selectHtml);
	}

	// 为第一个select填充数据
	var firstSelect = selectContainer.find('select[name="level1"]');
	data.forEach(function(item){
	firstSelect.append('<option value="'+item.id+'">'+item.name+'</option>');
	});

	// 绑定change事件，动态填充后续select
	selectContainer.on('change', '.level-select', function(){
	var currentSelect = $(this);
	var currentIndex = currentSelect.attr('name').replace('level', '');
	var nextSelect = selectContainer.find('select[name="level'+(parseInt(currentIndex) + 1)+'"]');
	nextSelect.empty().append('<option value="">请选择第'+(parseInt(currentIndex) + 1)+'级分类</option>');
	var selectedId = currentSelect.val();
	if(selectedId){
	var childrenData = findChildrenById(data, selectedId);
	if(childrenData && childrenData.length > 0){
	childrenData.forEach(function(childItem){
	nextSelect.append('<option value="'+childItem.id+'">'+childItem.name+'</option>');
	});
	}
	}
	// 清空当前select之后的所有select的选项
	for(var i = parseInt(currentIndex) + 2; i <= maxDepth; i++){
	selectContainer.find('select[name="level'+i+'"]').empty().append('<option value="">请选择第'+i+'级分类</option>');
	}
	form.render(); // 重新渲染表单
	});

	// 根据id查找子数据的函数
	function findChildrenById(data, id){
	for(var i = 0; i < data.length; i++){
	if(data[i].id == id){
	return data[i].children;
	}else if(data[i].children && data[i].children.length > 0){
	var result = findChildrenById(data[i].children, id);
	if(result){
	return result;
	}
	}
	}
	return null;
	}
	}
	});
	</script>

豆包ai 生成动态tree 增、删、改以及上移下移 html jquery

人工Ai 编程

推荐一Kimi https://kimi.moonshot.cn/

推荐二 豆包https://www.doubao.com/

实现效果图

html 代码

学习Ai 大模型 第一步学会使用这些工具助手

微信扫一扫：分享

推荐二豆包https://www.doubao.com/

学习Ai 大模型第一步学会使用这些工具助手