textSearch.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head>
  4. <th:block th:include="include :: header('全文搜索')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="container-div">
  8. <div class="row">
  9. <div class="col-sm-12 select-table table-striped">
  10. <table id="bootstrap-table" data-page-size="10" data-search-align="left"
  11. data-show-custom-view="true" data-custom-view="customViewFormatter"
  12. data-custom-view-default-view="true">
  13. </table>
  14. </div>
  15. </div>
  16. </div>
  17. <template id="textSearchTemplate">
  18. <div class="col-sm-12">
  19. <p style="margin-top:10px;line-height:1.5;">
  20. <span style="color:blue;font-size:medium">%title%</span><br>
  21. <span style="color:#000000;font-size:medium">%content%</span><br>
  22. <span style="color:#008000;font-size:medium">
  23. 档号:<a href="javascript:void(0)" onclick="handleView('%tableId%', '%archiveNo%')">%archiveNo%</a>
  24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%docNo%
  25. </span>
  26. </p>
  27. </div>
  28. </template>
  29. <div th:include="include :: footer"></div>
  30. <th:block th:include="include :: bootstrap-table-custom-view-js" />
  31. <script th:inline="javascript">
  32. var prefix = ctx + "demo/table";
  33. $(function() {
  34. var options = {
  35. url: prefix + "/text/list",
  36. search: true,
  37. showSearch: false,
  38. showRefresh: false,
  39. showToggle: false,
  40. showColumns: false,
  41. showExport: true,
  42. columns: [{
  43. checkbox: true
  44. },
  45. {
  46. field : 'tableId',
  47. title : '编号',
  48. visible: false
  49. },
  50. {
  51. field : 'archiveNo',
  52. title : '档号'
  53. },
  54. {
  55. field : 'docNo',
  56. title : '文件编号'
  57. },
  58. {
  59. field : 'title',
  60. title : '标题',
  61. formatter: function(value, row, index) {
  62. return $.table.tooltip(value, 20, "open");
  63. }
  64. },
  65. {
  66. field : 'content',
  67. title : '内容',
  68. formatter: function(value, row, index) {
  69. return $.table.tooltip(value, 30, "open");
  70. }
  71. }]
  72. };
  73. $.table.init(options);
  74. });
  75. function customViewFormatter (data) {
  76. var template = $('#textSearchTemplate').html()
  77. var view = ''
  78. if(data.length > 0) {
  79. $.each(data, function (i, row) {
  80. view += template.replace('%tableId%', row.tableId)
  81. .replaceAll('%archiveNo%', row.archiveNo)
  82. .replace('%title%', row.title)
  83. .replace('%docNo%', row.docNo)
  84. .replace('%content%', truncateString(row.content, 500))
  85. })
  86. return `<div class="row mx-0">${view}</div>`;
  87. } else {
  88. return `<div class="row mx-0"><div class="col-sm-12"><p style="margin-top:10px;line-height:1.5;"><span style="font-size:medium">没有找到记录。请检查过滤条件。</span></p></div></div>`
  89. }
  90. }
  91. function handleView(tableId, archiveNo) {
  92. alert("tableId:" + tableId + ",archiveNo:" + archiveNo);
  93. }
  94. function truncateString(str, maxLength) {
  95. if (str.length > maxLength) {
  96. return str.slice(0, maxLength) + '...';
  97. }
  98. return str;
  99. }
  100. $(document).ready(function() {
  101. $('.search-input').css('width', '320px');
  102. });
  103. </script>
  104. </body>
  105. </html>