基於JQuery的自定義樹形選單表格，實現展開、收起效果

最近的專案不允許使用框架，遇到自定義樹形表格的頁面功能。
為了趕時間，就想找現成的，百度找到“基於JQuery TreeTable實現的屬性表單”，結果進去一看，都是一毛一樣的，沒有實現方式的程式碼，深深懷疑是不是就抄個程式碼根本沒有自己測試過，也浪費了不少時間。

之後仔細一想，其實實現並不困了，不一定非要找現成的。按照自己的思路，做出結果如下，如有bug歡迎指正。

思路

我想的很簡單，

1. 一個箭頭顯示開啟、收起的樣式；
2. 在箭頭上加入toggle()方法控制一級選單下的所有子選單的樣式，通過display樣式控制子選單隱藏/顯示，從而實現樹型選單開啟、收起的效果；
3. 在子級上新增自定義屬性open來標識當前子級是隱藏還是展開，通過pid來關聯父級。

效果

引用

（可能還有需要引入的，如果有報錯根據提示新增）

<script th:src="@{/plugins/jquery/jquery.min.js}"></script>

HTML

<div class="card">
    <table id="treeTable" class="table">
        <thead>
        <tr role="row">
            <th>分類名稱</th>
            <th>分類級別</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="class-info">
        </tbody>
    </table>
</div>

JS

$(function () {
	loadTreeTable();
})

// 載入table資料
function loadTreeTable() {
    commonGet("/admin/serverClass/list", {}).then(res => {
        if (res.code === '200') {
            var list = res.data;
            if (list !== null) {
                var html = '';
                for (var i = 0; i < list.length; i++) {
                    var listChild = list[i].childrenServiceClasses;
                    // 如果有子元素，則設定toggle()
                    if (listChild !== null && listChild.length > 0) {
                        html += '<tr id="' + list[i].id + '" pid="0">\n' +
                            '    <td><span class="switch-close" οnclick="toggle(this)"></span><span class="folder">' + list[i].className + '</span></td>\n' +
                            '    <td>' + list[i].level + '</td>\n' +
                            '    <td>操作</td>\n' +
                            '</tr>';
                    } else {
                        html += '<tr id="' + list[i].id + '" pid="0">\n' +
                            '    <td>' + list[i].className + '</td>\n' +
                            '    <td>' + list[i].level + '</td>\n' +
                            '    <td>操作</td>\n' +
                            '</tr>';
                    }
                    // 所有子元素新增pid和自定義的open屬性
                    if (listChild !== null && listChild.length > 0) {
                        for (var j = 0; j < listChild.length; j++) {
                            html += '<tr open="true" id="' + listChild[j].id + '" pid="' + listChild[j].parentId + '">\n' +
                                '    <td style="padding-left: 50px;">' + listChild[j].className + '</td>\n' +
                                '    <td>' + listChild[j].level + '</td>\n' +
                                '    <td>操作</td>\n' +
                                '</tr>';
                        }
                    }
                }
                $("#class-info").append(html);
            }
        }
    })
}

//處理展開和收起
function toggle(eve) {
    var par = eve.parentNode.parentNode; // 當前的tr
    var parentId = par.getAttribute("id"); //父級id
    var bool = par.nextSibling.getAttribute("open"); //通過open屬性定義當前tr是否展開
    if(bool) {
        eve.className='switch-open';
        $("tr[pid$="+parentId+"]").css("display","none"); // 所有pid=parentId的tr元素隱藏
        $("tr[pid$="+parentId+"]").attr("open", false); // 標記這些tr元素open屬性，再次點選就會實現相反操作
    } else {
        eve.className='switch-close';
        $("tr[pid$="+parentId+"]").removeAttr("style");
        $("tr[pid$="+parentId+"]").attr("open", true);
    }
}

後端介面返回值示例

{
    "code": "200",
    "msg": "操作成功",
    "data": [
        {
            "id": "1",
            "level": 1,
            "className": "智慧財產權服務",
            "parentId": null,
            "childrenServiceClasses": [
                {
                    "id": "11",
                    "level": 2,
                    "className": "智慧財產權分析評議",
                    "parentId": "1"
                },
                {
                    "id": "12",
                    "level": 2,
                    "className": "專利維權",
                    "parentId": "1"
                },
                {
                    "id": "13",
                    "level": 2,
                    "className": "價值評估",
                    "parentId": "1"
                },
                {
                    "id": "34",
                    "level": 2,
                    "className": "專利質押保險",
                    "parentId": "1"
                }
            ]
        },
        {
            "id": "5",
            "level": 1,
            "className": "創新創業服務",
            "parentId": null,
            "childrenServiceClasses": [
                {
                    "id": "25",
                    "level": 2,
                    "className": "企業創新能力診斷",
                    "parentId": "5"
                },
                {
                    "id": "31",
                    "level": 2,
                    "className": "創業導師服務",
                    "parentId": "5"
                }
            ]
        },
        {
            "id": "6",
            "level": 1,
            "className": "科技金融服務",
            "parentId": null,
            "childrenServiceClasses": [
                {
                    "id": "28",
                    "level": 2,
                    "className": "科創板培育",
                    "parentId": "6"
                },
                {
                    "id": "33",
                    "level": 2,
                    "className": "高企財稅規劃",
                    "parentId": "6"
                }
            ]
        }
    ]
}