list.html

张创琦

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>userList</title>
  6.     <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
  7.     <script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}"></script>
  8.     <script type="text/javascript" src="/js/My97DatePicker/lang/zh-cn.js"></script>
  9.     <script type="text/javascript" th:src="@{/js/jquery/jquery-1.10.2.min.js}"></script>
  10. </head>
  11. <body class="container">
  12. <br/>
  13. <h1>账单列表</h1>
  14. <br/><br/>
  16. <div class="with:80%">
  17.     <!-- TODO 回显查询数据 -->
  18.     <form class="form-inline" id="qf" th:action="@{/bill/list}" method="post">
  19.         <div class="form-group">
  20.             <label for="typeId" class="control-label">类型</label>
  21.             <select name="typeId" id="typeId" class="form-control">
  22.                 <option value="">全部</option>
  23.                 <option th:each="t:${types}" th:value="${t.id}" th:text="${t.name}" th:selected="(${bill.typeId} == ${t.id})"></option>
  24.             </select>
  25.         </div>
  26.         <div class="form-group">
  27.             <label for="date1" class="control-label" >开始时间</label>
  28.             <input type="text" class="form-control" name="date1" id="date1" placeholder="开始时间" th:value="${bill.date1} ? ${#dates.format(bill, date1, 'yyyy-MM-dd')}" onclick="WdatePicker()"/>
  29.         </div>
  30.         <div class="form-group">
  31.             <label for="date2" class="control-label">结束时间</label>
  32.             <input type="text" class="form-control" name="date2"  id="date2" placeholder="结束时间" th:value="${bill.date2} ? ${#dates.format(bill, date2, 'yyyy-MM-dd')}" onclick="WdatePicker()"/>
  33.         </div>
  34.         <div class="form-group">
  35.             <input type="submit" value="查询" class="btn btn-info" />
  36.             &nbsp; &nbsp;
  37.             <input type="reset" value="重置" class="btn btn-info" />
  38.             &nbsp; &nbsp;
  39.             <a href="/bill/toAdd" th:href="@{/bill/toAdd}" class="btn btn-info">添加</a>
  40.         </div>
  41.     </form>
  42. </div>
  43. <br/>
  46. <div class="with:80%">
  47.     <table class="table table-striped table-bordered">
  48.         <thead>
  49.         <tr>
  50.             <th>#</th>
  51.             <th>标题</th>
  52.             <th>时间</th>
  53.             <th>金额</th>
  54.             <th>类别</th>
  55.             <th>说明</th>
  56.             <th>操作</th>
  57.         </tr>
  58.         </thead>
  59.         <tbody>
  60.         <!-- TODO 回显查询结果 -->
  61.         <tr th:each="b, bstatus : ${list}" th:style="${bstatus.odd} ? 'background-color: #A3C6C8' ">
  62.             <th scope="row" th:text="${b.id}">id</th>
  63.             <td th:text="${b.title}">name</td>
  64.             <td th:text="${b.billTime} ? ${#dates.format(b.billTime, 'yyyy-MM-dd')}">time</td>
  65.             <td th:text="${b.price}">price</td>
  66.             <td th:text="${b.typeName}">typeName</td>
  67.             <td th:text="${b.explain}">explain</td>
  68.             <td>
  69.                 <!-- 处于报错状态 -->
  70.                 <a th:href="|/bill/delete/${b.id}|">删除</a> &nbsp; &nbsp; &nbsp;
  71.                 <a th:href="|/bill/toUpdate/${b.id}|">修改</a>
  72.             </td>
  73.         </tr>
  74.         </tbody>
  75.     </table>
  76. </div>
  78. </body>
  79. </html>