localrefresh.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <th:block th:include="include :: header('局部刷新')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="wrapper wrapper-content animated fadeInRight">
  8. <div class="row">
  9. <div class="col-sm-4">
  10. <div class="ibox">
  11. <div class="ibox-content">
  12. <h3>任务列表</h3>
  13. <p class="small">
  14. <i class="fa fa-hand-o-up"></i>
  15. 点击刷新按钮刷新数据到列表中
  16. </p>
  17. <div class="input-group">
  18. <input id="task-name" type="text" placeholder="任务名称" class="input input-sm form-control">
  19. <span class="input-group-btn">
  20. <button type="button" class="btn btn-sm btn-white" onclick="refresh()">
  21. <i class="fa fa-refresh"></i>
  22. 刷新
  23. </button>
  24. </span>
  25. </div>
  26. <div id="tasklist">
  27. <ul class="sortable-list connectList agile-list" th:fragment="fragment-tasklist">
  28. <li th:if="${tasks != null}" th:each="item : ${tasks}" class="warning-element">
  29. [[${item.name}]]
  30. <div class="agile-detail">
  31. <a href="#" class="pull-right btn btn-xs btn-white">[[${item.type}]]</a>
  32. <i class="fa fa-clock-o"></i>
  33. [[${item.date}]]
  34. </div>
  35. </li>
  36. </ul>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <th:block th:include="include :: footer" />
  44. <script>
  45. function refresh(){
  46. $.ajax({
  47. type: "post",
  48. url: ctx + "demo/form/localrefresh/task",
  49. data: {
  50. "taskName": $("#task-name").val(),
  51. "fragment":'fragment-tasklist'
  52. },
  53. success: function(data) {
  54. $("#tasklist").html(data);
  55. }
  56. });
  57. }
  58. </script>
  59. </body>
  60. </html>