@section header
{
    <link rel="stylesheet" href="/css/treetable.css" />
}

<div style="display: flex;">
    <ul id="tree" class="ztree" style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></ul>
    <!--菜单列表-->
    <table class="layui-table"
           lay-data="{height: 'full-80', id:'menuList'}"
           lay-filter="menulist" lay-size="sm">
        <thead>
        <tr>
            <th lay-data="{field:'Name', width:120, sort: true, fixed: true}">名称</th>
            <th lay-data="{field:'DomId', width:80}">DomId</th>
            <th lay-data="{field:'Class', width:80}">样式</th>
            <th lay-data="{field:'Icon', width:60,templet: '#miconTpl'}">图标</th>
            <th lay-data="{field:'SortNo', width:80}">排序号</th>
            <th lay-data="{fixed: 'right', width:80, align:'center', toolbar: '#menuBar'}"></th>
        </tr>
        </thead>
    </table>
    <!--列表右边的按钮-->
    <script type="text/html" id="menuBar">
        <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="miconTpl">
        {{#  if( d.Icon != null && d.Icon != ''){ }}
        <i class="layui-icon">{{ d.Icon }}</i>
        {{#  } else { }}
        {{ d.Icon }}
        {{#  } }}
    </script>
</div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/assign.js"></script>