showSkillContent.jsp 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8" %>
  3. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>产品知识列表</title>
  9. <%@include file="/views/common.jsp" %>
  10. <style type="text/css">
  11. .layui-table-cell {
  12. height: 32px;
  13. line-height: 32px;
  14. }
  15. .layui-table td, .layui-table th, .layui-table-header, .layui-table-page, .layui-table-tool, .layui-table-total, .layui-table-view {
  16. border-color: #6666;
  17. font-size: 16px;
  18. }
  19. .ztree * {
  20. font-size: 20px;
  21. }
  22. .edge .layui-edge {
  23. right: 35px;
  24. }
  25. </style>
  26. </head>
  27. <script type="text/html" id="toolbarDemo">
  28. <div class="layui-btn-container demoTable">
  29. <button class="layui-btn layui-btn-sm" lay-event="add">
  30. <i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增内容
  31. </button>
  32. </div>
  33. </script>
  34. <script type="text/html" id="barDemo">
  35. <a class="layui-btn layui-btn-xs" lay-event="view">
  36. <i class="layui-icon layui-icon-view" style="color:white;font-size:20px"></i>复制
  37. </a>
  38. <a class="layui-btn layui-btn-xs" lay-event="edit">
  39. <i class="layui-icon layui-icon-edit" style="color:white;font-size:20px"></i>修改
  40. </a>
  41. </script>
  42. <body>
  43. <br>
  44. <form class="layui-form" action="">
  45. <div class="layui-inline">
  46. <label class="layui-form-label">内容</label>
  47. <div class="layui-input-inline">
  48. <input type="text" id="content" name="content" placeholder="请输入内容" autocomplete="off" class="layui-input">
  49. </div>
  50. </div>
  51. <div class="layui-inline">
  52. <div class="layui-input-inline">
  53. <button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
  54. <i class="layui-icon layui-icon-search"></i> 查询
  55. </button>
  56. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  57. </div>
  58. </div>
  59. </form>
  60. <table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
  61. <script type="text/javascript">
  62. layui.use(['element', 'table', 'laydate', 'form'], function () {
  63. var $ = layui.jquery;
  64. var table = layui.table;
  65. var laydate = layui.laydate;
  66. var element = layui.element;
  67. var form = layui.form;
  68. // 生成表格
  69. table.render({
  70. elem: '#informationTable',
  71. url: '../../../../getStandard',
  72. toolbar: '#toolbarDemo',
  73. title: '用户表',// 导出文件名
  74. id: 'informationTableAll',
  75. // 开启分页
  76. // page : true,
  77. page: {
  78. layout: ['count', 'prev', 'page', 'next', 'skip', 'limit']
  79. },
  80. limits: [10, 30, 50, 80, 100, 999],
  81. /*request : {
  82. 'limitName' : 'pageSize' // 分页每页条数默认字段改为pageSize
  83. },*/
  84. where: {
  85. content: '', type: 1
  86. },
  87. cellMinWidth: 80, // 全局定义常规单元格的最小宽度,layui 2.2.1 新增
  88. cols: [[{
  89. field: 'title',
  90. title: '产品',
  91. }, {
  92. field: 'content',
  93. title: '内容',
  94. }, {
  95. field: 'memo',
  96. title: '备注',
  97. }, {
  98. fixed: 'right',
  99. title: '操作',
  100. align: 'center',
  101. width: 150,
  102. toolbar: '#barDemo'
  103. }]],
  104. parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
  105. return {
  106. "code": 0, //解析接口状态
  107. "msg": "", //解析提示文本
  108. "count": res.data.list.total,//解析数据长度
  109. "data": res.data.list.list//解析数据列表
  110. };
  111. }
  112. });
  113. //点击查询按钮,重载表格
  114. $('#searchBtn').on('click', function () {
  115. table.reload('informationTableAll', {
  116. method: 'get',
  117. where: {
  118. content: $("#content").val()
  119. },
  120. page: {
  121. curr: 1
  122. }
  123. });
  124. return false;
  125. });
  126. table.on('toolbar(informationTable)', function (obj) {
  127. switch (obj.event) {
  128. case 'add':
  129. layer.open({
  130. type: 2,
  131. title: "添加文件名",
  132. fix: false, //不固定
  133. maxmin: true,
  134. skin: 'layui-layer-molv',
  135. area: ['45%', '70%'],
  136. content: './addMemo.jsp',
  137. });
  138. break;
  139. }
  140. ;
  141. });
  142. table.on('tool(informationTable)', function (obj) {
  143. let data1 = obj.data;
  144. if (obj.event === 'edit') {
  145. layer.open({
  146. type: 2,
  147. title: "修改文件名",
  148. area: ['45%', '70%'],
  149. skin: 'layui-layer-molv',
  150. content: './addMemo.jsp',
  151. success: function (layero, index) {
  152. var body = layer.getChildFrame('body', index);
  153. body.find('#id').val(data1.id);
  154. body.find('input[name="title"]').val(data1.title);
  155. body.find('input[name="memo"]').val(data1.memo);
  156. body.find('textarea[name="content"]').val(data1.content);
  157. layui.form.render();
  158. }
  159. });
  160. } else if (obj.event === 'view') {
  161. // 在此处输入 layer 的任意代码
  162. navigator.clipboard.writeText(data1.content);
  163. layer.msg('复制成功!', {icon: 6, offset: 'auto', time: 1000});
  164. }
  165. })
  166. });
  167. </script>
  168. </body>
  169. </html>