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树形结构数据

使用c#强大的表达式树实现对象的深克隆之解决循环引用的问题

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12.A）- uSDHC eMMC启动时间(RT1170)

GPT-4o 引领人机交互新风向，向量数据库赛道沸腾了

企业大模型如何成为自己数据的“百科全书”？

本地SSL证书过期输入命令在IIS自动生成

基于Ubuntu-22.04安装K8s-v1.28.2实验（二）使用kube-vip实现集群VIP访问

.NET周刊【5月第2期 2024-05-12】

js求數組標準差

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

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

jQuery實現ztree樹形結構數據

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

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

linux以太網驅動總結
