{extend name="layout/content" /} {block name="header"}
<title>菜单列表</title>
<link rel="stylesheet" href="/static/js/treeTable/treeTable.css">
<style>
    .x-body>.toolWrap {
        float: right;
        margin-bottom: 10px;
    }

    form>.toolWrap {
        float: left;
        margin-bottom: 10px;
    }


    .layui-table th {
        text-align: center !important;
    }

    .layui-table td:nth-of-type(1),
    .layui-table td:nth-of-type(3) {
        text-align: left !important;
    }
</style>
{/block} {block name="content"}
<div class="x-body">
    <div class="toolWrap">
        {if(authUI('admin/menu/add'))}
        <a href="{:url('add')}" class="layui-btn layui-btn-radius">
            <i class="layui-icon">&#xe654;</i>添加菜单</a>
        {/if}
    </div>
    <form action="{:url('index')}" method="post">
        <div class="toolWrap">
            <button class="layui-btn" lay-submit lay-filter="formDemo">排序</button>
        </div>
        <table class="layui-table" id="menus-table">
            <thead>
                <tr>
                    <th>排序</th>
                    <th>ID</th>
                    <th>名称</th>
                    <th>规则</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {$category}
            </tbody>
        </table>
    </form>
</div>

{/block} {block name="footer"}
<script src="/static/js/treeTable/treeTable.js"></script>
<script>
    $(document).ready(function () {
        $("#menus-table").treeTable({
            indent: 20
        });

        // 为操作里的a标签添加样式
        $('td a').each(function (index, item) {
            if (item.innerHTML == '添加子菜单') {
                $(item).addClass("layui-btn layui-btn-normal")
            }
            if (item.innerHTML == '编辑') {
                $(item).addClass("layui-btn")
            }
            if (item.innerHTML == ' 删除 ') {
                $(item).addClass("layui-btn layui-btn-danger")
            }
        })


    });
</script>
{/block}