blog_tp6/view/sys/sys_menu/index.html

<article class="cl pd-20">
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            <!-- <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
                    <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> -->
            <a class="btn btn-primary radius" href="javascript:save(0);">
                <i class="Hui-iconfont">&#xe600;</i> 添加目录</a>
        </span>
        <span class="r">共有数据：<strong>54</strong> 条</span> 
    </div>
    <div class="mt-10" style="min-width:800px;">
        <table class="table table-border table-bordered table-hover table-bg">
            <thead>
                <tr class="text-c">
                    <!-- <th width="25px">
                        <input type="checkbox" value="" name="">
                    </th> -->
                    <th width="40px">ID</th>
                    <th>名称</th>
                    <th width="120px">上级菜单</th>
                    <th width="60px">图标</th>
                    <th width="60px">类型</th>
                    <th width="160px">url</th>
                    <th width="120px">状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $list as $value}
                <tr class="text-c">
                    <!-- <td>
                        <input type="checkbox" value="{//$value.id}" name="checkbox[]">
                    </td> -->
                    <td>{$value.id}</td>
                    <td class="text-l">{notempty name="value.child"}
                        <a href="javascript:void(0);" title="展开" data-status="1"
                            onClick="loadchild(this,'{$value.id}')">
                            <i class="Hui-iconfont">&#xe6d7;</i></a>{/notempty}
                        {$value.name}
                    </td>
                    <td></td>
                    <td><i class="Hui-iconfont">{$value.icon|raw}</i></td>
                    <td><span class="label label-default">{$type[$value.type]}</span></td>
                    <td>{$value.url}</td>
                    <td>{$value.perms}</td>
                    <td class="f-14">
                        <a title="编辑" href="javascript:save({$value.id});" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$value.id}')" class="ml-5"
                            style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {notempty name="value.child"} {foreach $value.child as $val}
                <tr class="text-c parent_{$value.id}">
                    <!-- <td>
                        <input type="checkbox" value="{$val.id}" name="checkbox[]">
                    </td> -->
                    <td>{$val.id}</td>
                    <td class="text-l">{notempty name="val.child"}
                        <a class="child ml-20" href="javascript:void(0);" title="展开" data-status="0"
                            onClick="loadchild(this,'{$val.id}')">
                            <i class="Hui-iconfont">&#xe6d7;</i>
                            {else/}
                            <a class="child ml-20" href="javascript:void(0);">
                            {/notempty}
                        {$val.name}</a>
                    </td>
                    <td>{$value.name}</td>
                    <td><i class="Hui-iconfont">{$val.icon|raw}</i></td>
                    <td><span class="label label-success">{$type[$val.type]}</span></td>
                    <td>{$val.url}</td>
                    <td>{$value.perms}</td>
                    <td class="f-14">
                        <a title="编辑" href="javascript:save({$val.id});" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$val.id}')" class="ml-5"
                            style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {notempty name="val.child"} {foreach $val.child as $vo}
                <tr class="text-c grandparent_{$value.id} parent_{$val.id}" style="display: none;">
                    <!-- <td>
                        <input type="checkbox" value="{$vo.id}" name="checkbox[]">
                    </td> -->
                    <td>{$vo.id}</td>
                    <td class="text-l"><span style="margin-left: 80px;">{$vo.name}</span></td>
                    <td>{$val.name}</td>
                    <td></td>
                    <td><span class="label label-default">{$type[$vo.type]}</span></td>
                    <td>{$vo.url}</td>
                    <td>{$vo.perms}</td>
                    <td class="f-14">
                        <a title="编辑" href="javascript:save({$vo.id});" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$vo.id}')" class="ml-5"
                            style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {/foreach} {/notempty}{/foreach} {/notempty} {/foreach}
            </tbody>
        </table>
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    function save(id) {
        var title = id==0 ? '添加菜单' : '修改菜单'
        var url = "{:url('save')}" + "?_layer=true&id=" + id
        layer_show(title, url, 800, 400);
    }

    function loadchild(obj, id) {
        var status = $(obj).data('status');
        // console.log(obj);
        // console.log(id);
        // console.log(status);

        if (status == 1) {
            $(".parent_" + id).css("display", "none");
            $(".parent_" + id).find("td a.child").children('i').html('&#xe6d7;');
            $(".parent_" + id).find("td a.child").data('status', 0);
            $(".grandparent_" + id).css("display", "none");
            $(obj).children('i').html('&#xe6d7;');
            $(obj).data('status', 0);
            return false;
        }
        $(".parent_" + id).css('display', '');
        $(obj).children('i').html('&#xe6d5;');
        $(obj).data('status', 1);
    }

    function del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('delete', {
                'id': id
            }, function (data) {
                if (data.code == 1) {
                    console.log($(obj));
                    $(obj).parents("tr").remove();
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
            }, 'json');
        });
    }
</script>
<!--请在上方写此页面业务相关的脚本-->