<#include "/incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<@header></@header>
<link rel="stylesheet" href="/adminlte/plugins/treeTable/css/jquery.treetable.css"/>
<style>
    .leaf.collapsed {
        background-color: #f9f9f9;
    }

    table.treetable tr.collapsed span.indenter a {
        background-image: url("/adminlte/plugins/treeTable/images/toggle-expand-dark.png");
    }

    table.treetable tr.expanded.selected span.indenter a {
        background-image: url("/adminlte/plugins/treeTable/images/toggle-collapse-dark.png");
    }

    table.treetable tr.expanded span.indenter a {
        background-image: url("/adminlte/plugins/treeTable/images/toggle-collapse-dark.png");
    }

    .content-wrapper {
        min-height: 100%;
        background-color: #fff;
        z-index: 800;
    }
</style>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <@top></@top>
    <@left></@left>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                分类管理
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content container-fluid">
            <div class="box-body">
                <table id="example-basic-static" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>pid</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="type : ${types}" th:attr="data-tt-id =${type.id},data-tt-parent-id =${type.pid}">
                        <td th:text="${type.id}"></td>
                        <td th:text="${type.pid}"></td>
                        <td th:text="${type.name}"></td>
                        <td><a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-search"></i>查看</a>
                            <a href="#" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i>编辑</a>
                            <a href="#" type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i>删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<!--<script src="/adminlte/bower_components/jquery/dist/jquery.js"></script>
<script src="/adminlte/bower_components/jquery-ui/ui/core.js"></script>
<script src="/adminlte/bower_components/jquery-ui/ui/widget.js"></script>
<script src="/adminlte/bower_components/jquery-ui/ui/mouse.js"></script>
<script src="/adminlte/bower_components/jquery-ui/ui/draggable.js"></script>
<script src="/adminlte/bower_components/jquery-ui/ui/droppable.js"></script>-->
<script src="/adminlte/plugins/treeTable/jquery.treetable.3.2.0.js"></script>
<script>
    $(function () {
        $("#example-basic-static").treetable({
            expandable: true,
            column:2
        });
    })
</script>
</html>