https://github.com/maxazan/jquery-treegrid

代码

<{extends file="app/admin/view/layout/main.tpl" }>



<{block name="main_css"}>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css">
<{/block}>


<{block name="right_cnt"}>
    <div class="card">

        <div class="card-header">

            <a href="<{url('node.create')}>" class="btn btn-primary">添加节点</a>

        </div>

        <div class="card-body">

            <div class="mb-4">
                <form class="row row-cols-lg-auto g-3 align-items-center">
                    <div class="col-12">
                        <input type="text" class="form-control" placeholder="请输入要搜索的节点名称" name="name">
                    </div>

                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">搜索</button>
                    </div>
                </form>
            </div>


            <div class="table-responsive">
                <table class="table align-middle tree">
                    <thead class="table-light">
                    <tr>

                        <th>节点名称</th>
                        <th>路由别名</th>
                        <th>是否菜单</th>
                        <th>加入时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <{foreach $nodes as $node}>
                        <tr class="treegrid-<{$node['id']}> <{if $node['pid'] !=0 }>treegrid-parent-<{$node['pid']}><{/if}> ">
                            <td>
                                <input class="form-check-input node-check-input" type="checkbox"
                                       value="<{$node['id']}>"
                                       data-pid="<{$node['pid']}>"
                                       name="id[]">
                                <{$node['name']}>
                            </td>

                            <td><{$node['route_name']}></td>
                            <td><{$node['is_menu']}></td>
                            <td><{$node['create_time']}></td>
                            <td>
                                <a href="<{url('node.edit',['id'=>$node['id']])}>"
                                   class="btn btn-primary btn-sm">编辑</a>
                                <a href="<{url('node.delete',['id'=>$node['id']])}>"
                                   class="ms-3 btn btn-danger btn-sm delBtn">删除</a>
                            </td>
                        </tr>
                    <{/foreach}>
                    </tbody>
                </table>
            </div>

        </div>

    </div>
<{/block}>

<{block name='main_js'}>
    <{*    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>*}>
    <script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
    <script>

        $('.tree').treegrid({
            'initialState': 'collapsed',
            'saveState': true,
            treeColumn: 0
        });

        $(".node-check-input").change(function () {
            var id = $(this).attr('value');
            var pid = $(this).attr('data-pid');
            if ($(this).prop('checked')) {//选中
                selectChilds(id);
            } else {//取消勾选
                selectChilds(id, false);
            }
            selectParent(pid);
        });

        function selectParent(pid) {
            var $dom = $('input[value=' + pid + ']');
            var id = $dom.attr('data-pid');
            if(id !== undefined){
                $dom.prop('checked', true);
                selectParent(id);
            }
        }
        function selectChilds(pid, checked = true) {
            $(".node-check-input").map(function (index, dom) {
                var pida = $(dom).attr('data-pid');
                var value = $(dom).attr('value');
                if (pida == pid) {
                    $(dom).prop('checked', checked);
                    selectChilds(value, checked);
                }
            });
        }


        $('.delBtn').on('click', function (e) {
            e.preventDefault();
            let url = $(this).attr('href');

            Swal.fire({
                title: '确定删除吗？',
                // text: "是否确定要批量添加选中文章？",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d93444',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {

                    //发起ajax
                    $.ajax({
                        url,
                        type: 'DELETE'
                    }).then(function (res) {
                        if (res.code === 200) {
                            Swal.fire({
                                icon: "success",
                                title: 'ok',
                                timer: 1500,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            }).then((result) => {
                                //确定 取消 背景都会触发
                                if (result.isConfirmed || result.dismiss === Swal.DismissReason.timer || result.dismiss === Swal.DismissReason.backdrop) {
                                    location.reload();
                                }
                            });
                        } else {
                            Toast_error(res.msg);
                        }
                    })
                }
            })


        })

    </script>
<{/block}>