jQuery實現ztree樹形結構數據

由於項目主管不讓引入ztree,只能自己做一個jQuery實現ztree樹形結構數據，實現了根據數據渲染列表，可展開和收起。


<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div模擬伸縮樹ztree樹形結構</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
 .table {
            margin-bottom: 0;
 }

        .menu_ul * {
            box-sizing: border-box;
 user-select: none;
 }

        .menu_ul {
            width: 100%;
 padding-left: 0;
 }

        .menu_ul li {
            width: 100%;
 transition: .3s;
 overflow: hidden;
 }

        .menu_ul li ul {
            padding-left: 0;
 }

        .menu_ul li div {
            float: left;
 line-height: 48px;
 height: 48px;
 border-bottom: 1px solid #ddd;
 }

        .menu_ul li div:first-child {
            width: 0;
 }

        .menu_ul li div:first-child + div {
            width: 22%;
 overflow: hidden;
 }

        .menu_ul li div:first-child + div i {
            line-height: 18px;
 padding: 0 4px 0 3px;
 border: 1px solid #ddd;
 color: #000;
 cursor: pointer;
 margin-right: 5px;
 }

        .menu_ul li div:first-child + div i.subtracti {
            padding: 0 5px;
 display: none;
 }

        .menu_ul li div:first-child + div + div {
            width: 36%;
 overflow: hidden;
 padding-left: 10px;
 }

        .menu_ul li div:first-child + div + div + div {
            width: 6%;
 }

        .menu_ul li div:first-child + div + div + div + div {
            width: 10%;
 font-size: 13px;
 text-align: center;
 }

        .menu_ul li div:first-child + div + div + div + div + div {
            width: 5%;
 padding: 3px 8px 3px 18px;
 }

        .menu_ul li div:first-child + div + div + div + div + div + div {
            width: 21%;
 padding: 0 8px;
 }

        .menu_ul > li > ul {
            display: none;
 }

        .menu_ul > li > ul > li > ul {
            display: none;
 }

        .menu_ul > li > ul > li > ul > li > ul {
            display: none;
 }

        .menu_ul > li > ul > li > ul > li > ul > li > ul {
            display: none;
 }

        .menu_ul > li > ul > li > ul > li > ul > li > ul > li > ul {
            display: none;
 }

        .menu_ul > li > ul > li > div:first-child + div {
            padding-left: 20px;
 }

        .menu_ul > li > ul > li > ul > li > div:first-child + div {
            padding-left: 40px;
 }

        .menu_ul > li > ul > li > ul > li > ul > li > div:first-child + div {
            padding-left: 60px;
 }

        .menu_ul > li > ul > li > ul > li > ul > li > ul > li > div:first-child + div {
            padding-left: 80px;
 }
    </style>
</head>
<body>
<div class="container ">
 <!--table-->
 <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th style="width:22%">權限名稱</th>
            <th style="width: 34%">節點</th>
            <th style="width: 8%">菜單狀態</th>
            <th style="width: 9%">添加時間</th>
            <th style="width: 12%">主站</th>
            <th style="width: 20%">操作</th>
        </tr>
        </thead>
    </table>
 <!--table end-->
 <ul class="menu_ul">
    </ul>
</div>
<!-- 添加菜單模態框（Modal） -->
<div id="modal" class="modal in" style="display: none; padding-right: 0px;" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">添加菜單</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label>菜單名稱</label>
                        <input type="text" class="form-control" id="" placeholder="請輸入菜單名稱">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success pull-right" data-dismiss="modal">確定</button>
                <button type="button" class="btn btn-link pull-right" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 移動模態框（Modal） -->
<div id="moveModal" class="modal in" style="display: none; padding-right: 0px;" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">移動菜單</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label>移動到</label>
                        <input type="text" class="form-control" id="" placeholder="請輸入">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success pull-right" data-dismiss="modal">確定</button>
                <button type="button" class="btn btn-link pull-right" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 編輯菜單模態框（Modal） -->
<div id="editModal" class="modal in" style="display: none; padding-right: 0px;" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">編輯菜單</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜單名稱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" placeholder="請輸入菜單名稱" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">節點</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" placeholder="請輸入菜單節點" value="">
                            <div class="help-block">如：admin/role/index</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">樣式名稱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" placeholder="請輸入樣式名稱" value="">
                            <div class="help-block">如：fa fs-user</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">狀態</label>
                        <div class="col-sm-10">
                            <input type="checkbox" id="" checked="checked" style="margin-right: 5px;">默認開啓
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success pull-right" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-link pull-right" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>

<script>
 $(function () {
        $(".menu_ul").on("click", ".addi", function () {
            $(this).hide().parent().siblings("ul").show();
 $(this).siblings(".subtracti").show();
 });
 $(".menu_ul").on("click", ".subtracti", function () {
            $(this).hide().parent().siblings("ul").hide();
 $(this).siblings(".addi").show()
        });
 function query() {
            var data = [
                {
                    "id": "1",
 "pId": "0",
 "name": "電海中學",
 "peopleNumber": "240",
 },
 {
                    "id": "2",
 "pId": "0",
 "name": "奮興中學",
 "peopleNumber": "180",
 },
 {
                    "id": "3",
 "pId": "0",
 "name": "越秀中學",
 "peopleNumber": "120",
 },
 {
                    "id": "4",
 "pId": "3",
 "name": "越秀中學高三強化班",
 "peopleNumber": "80",
 },
 {
                    "id": "14",
 "pId": "4",
 "name": "越秀中學高三強化班1班",
 "peopleNumber": "42",
 },
 {
                    "id": "16",
 "pId": "4",
 "name": "越秀中學高三強化班2班",
 "peopleNumber": "38",
 },

 {
                    "id": "5",
 "pId": "1",
 "name": "電海高二",
 "peopleNumber": "160",
 },
 {
                    "id": "6",
 "pId": "7",
 "name": "奮興高三1班",
 "peopleNumber": "180",
 },
 {
                    "id": "26",
 "pId": "7",
 "name": "奮興高三2班",
 "peopleNumber": "170",
 },
 {
                    "id": "7",
 "pId": "2",
 "name": "奮興高三",
 "peopleNumber": "180",
 },
 {
                    "id": "8",
 "pId": "3",
 "name": "越秀中學暑假訓練營",
 "peopleNumber": "40",
 },
 {
                    "id": "9",
 "pId": "1",
 "name": "電海高三",
 "peopleNumber": "80",
 },
 ];
 // 第一級
 var html = "";
 for (var i = 0; i < data.length; i++) {
                if (data[i].pId == 0) {
                    html += ` <li class="id1_${data[i].id}">
            <div></div>
            <div data-id="${data[i].id}"><i class="addi">+</i><i class="subtracti">-</i>${data[i].name}</div>
            <div>${data[i].peopleNumber}</div>
            <div><span class="btn btn-warning btn-sm ">開啓</span></div>
            <div>2018-10-25</div>
            <div><input type="checkbox" checked="checked"></div>
            <div>
                        <span class="btn btn-warning btn-sm" style="margin-right: 6px;" data-toggle="modal"
                              data-target="#moveModal">移動</span>
                <span class="btn btn-success btn-sm" style="margin-right: 6px;" data-toggle="modal"
                      data-target="#editModal">編輯</span>
                <span class="btn btn-danger btn-sm">刪除</span>
            </div>
        </li>`
 }
                ;
 }
            $(".menu_ul").html(html);

 // 第二級
 var html2 = '';
 for (var i = 0; i < data.length; i++) {
                html2 = `<ul>
                <li class="id2_${data[i].id}">
                    <div></div>
                    <div data-id="${data[i].id}"><i class="addi">+</i><i class="subtracti">-</i>${data[i].name}</div>
                    <div>${data[i].peopleNumber}</div>
                    <div><span class="btn btn-warning btn-sm ">開啓</span></div>
                    <div>2018-10-25</div>
                    <div><input type="checkbox" checked="checked"></div>
                    <div>
                        <span class="btn btn-warning btn-sm" style="margin-right: 6px;" data-toggle="modal"
                              data-target="#moveModal">移動</span>
                        <span class="btn btn-success btn-sm" style="margin-right: 6px;" data-toggle="modal"
                              data-target="#editModal">編輯</span>
                        <span class="btn btn-danger btn-sm">刪除</span>
                    </div>
                </li>
            </ul>`;
 if ($(".id1_" + data[i].pId + ">ul").length > 0) {
                    $(".id1_" + data[i].pId + ">ul").after(html2);
 } else {
                    $(".id1_" + data[i].pId + ">div:last-child").after(html2);
 }
            }
            ;
 // 第三級
 var html3 = '';
 for (var i = 0; i < data.length; i++) {
                html3 = `<ul>
                <li class="id3_${data[i].id}">
                    <div></div>
                    <div data-id="${data[i].id}"><i class="addi">+</i><i class="subtracti">-</i>${data[i].name}</div>
                    <div>${data[i].peopleNumber}</div>
                    <div><span class="btn btn-warning btn-sm ">開啓</span></div>
                    <div>2018-10-25</div>
                    <div><input type="checkbox" checked="checked"></div>
                    <div>
                        <span class="btn btn-warning btn-sm" style="margin-right: 6px;" data-toggle="modal"
                              data-target="#moveModal">移動</span>
                        <span class="btn btn-success btn-sm" style="margin-right: 6px;" data-toggle="modal"
                              data-target="#editModal">編輯</span>
                        <span class="btn btn-danger btn-sm">刪除</span>
                    </div>
                </li>
            </ul>`;
 if ($(".id2_" + data[i].pId + ">ul").length > 0) {
                    $(".id2_" + data[i].pId + ">ul").after(html3);
 } else {
                    $(".id2_" + data[i].pId + ">div:last-child").after(html3);
 }
            }
            ;
 //找到沒有子節點的id隱藏“+-”號
 var idlist = [];
 var pIdlist = [];
 for (var i = 0; i < data.length; i++) {
                idlist[i] = data[i].id;
 pIdlist[i] = data[i].pId;
 }
            Array.prototype.indexOf = function (val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) return i;
 }
                return -1;
 };
 Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
 if (index > -1) {
                    this.splice(index, 1);
 }
            };
 for (var i = 0; i < pIdlist.length; i++) {
                idlist.remove(pIdlist[i]);
 }
            ;
 for (var i = 0; i < idlist.length; i++) {
                $("div[data-id=" + idlist[i] + "]>i").css("display", "none");
 };
 };
 query();
 });
</script>
</body>
</html>
效果圖：
最後推薦給大家我的個人網址導航：前端網址導航，希望對大家前端學習有所幫助，提高工作效率和學習效率。
jQuery實現ztree樹形結構數據

《日本蠟燭圖》讀書筆記 & 技術分析回測

《期貨-市場技術分析》讀書筆記

Python多線程編程深度探索：從入門到實戰

mongodb處理json數據很好

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

js求數組標準差

頁面滾動到中間兩個div向中間靠攏動畫

jquery實現多選框全選全不選功能

jQuery實現ztree樹形結構數據

前端網址導航-小木前端導航網

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
