<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <%@include file="/views/common.jsp"%>
 <script src="${pageContext.request.contextPath}/static/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<h2>权限列表</h2>
<hr>
<table id="permissionTable" lay-filter="permissionTable"></table>

<script type="text/javascript">
    layui.config({
        base: '${path}/static/js/'
    }).extend({
        treeGrid: 'treeGrid'
    });

    layui.use('treeGrid',function () {
        var treeGrid = layui.treeGrid;

        $.get("${path}/sysPermission/list",function (d) {
            $.each(d.data,function () {
               this.isOpen = false;
            });
            treeGrid.render({
                id : 'perTable',
                elem : '#permissionTable',//展示表格的lay-filter
                data : d.data,//数据
                idField : 'id',
                treeId : 'perId',//主键id
                treeUpId : 'parentId',//父ID
                treeShowName : 'perName',//展示的名字
                toolbar:'#toolbarDemo',
                cols : [[
                    {field:'perName', title:'权限名称'},
                    {field:'type', title:'权限类型'},
                    {field:'url', title:'连接地址'}
                ]]
            });
        })
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
    </div>
</script>
</html>