layui_jxs.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>解析管理</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8. <link rel="stylesheet" href="/static/plugin/layui/ext/soulTable/soulTable.css" media="all"/>
  9. <script src="/static/js/jquery.min.js"></script>
  10. <script src="/static/js/grey.js"></script>
  11. </head>
  12. <body>
  13. <table id="myTable" lay-filter="myTable"></table>
  14. <script type="text/html" id="toolbar">
  15. <div class="layui-btn-container">
  16. <!-- <button class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</button>-->
  17. <!-- <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>-->
  18. <button class="layui-btn layui-btn-sm" lay-event="saveData">保存拖拽排序结果</button>
  19. <button class="layui-btn layui-btn-sm" lay-event="setTestVideo">设置解析测试视频</button>
  20. </div>
  21. </script>
  22. <script type="text/html" id="bar">
  23. <a class="layui-btn layui-btn-xs" lay-event="set_top">顶</a>
  24. <a class="layui-btn layui-btn-xs" lay-event="set_bottom">底</a>
  25. <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删</a>-->
  26. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="test">测</a>
  27. </script>
  28. <script src="/static/plugin/layui/layui.js"></script>
  29. <script>
  30. // 自定义模块
  31. layui.config({
  32. base: '/static/plugin/layui/ext/', // 模块目录
  33. version: 'v1.6.4'
  34. }).extend({
  35. soulTable: 'soulTable/soulTable',
  36. tableChild: 'soulTable/tableChild',
  37. tableMerge: 'soulTable/tableMerge',
  38. tableFilter: 'soulTable/tableFilter',
  39. excel: 'soulTable/excel',
  40. });
  41. layui.use(['form', 'table','soulTable'], function () {
  42. var table = layui.table, soulTable = layui.soulTable;
  43. var $ = layui.$;
  44. soulTable.config({
  45. rowDrag: true
  46. });
  47. // 后台分页
  48. table.render({
  49. elem: '#myTable'
  50. ,id: 'myTable'
  51. ,url: '/layui/api/jx_list'
  52. ,height: 1000
  53. ,toolbar: '#toolbar'
  54. ,page: true
  55. ,limit:100
  56. ,limits:[20,40,60,80,100,150,200,300,500]
  57. ,cols: [[
  58. {type: 'checkbox', fixed: 'left'},
  59. {field: 'id', title: '编号', width: 80, sort: true},
  60. {field: 'name', title: '名称', width: 200, sort: true, filter: true},
  61. {field: 'state', title: '状态', width: 60},
  62. {field: 'order', title: '顺序', width: 80,sort: true},
  63. {field: 'url', title: '接口', minWidth: 200, sort: true},
  64. {field: 'type', title: '类型', width: 80 , filter: true},
  65. // {field: 'header', title: '请求头', width: 112, filter: {split:','}, sort:true},
  66. {field: 'header', title: '请求头', width: 200, sort:true},
  67. {field: 'ext', title: '扩展信息', minWidth: 200, sort:true},
  68. {title: '操作', width: 156, fixed: 'right', templet: '#bar'}
  69. ]]
  70. ,done: function () {
  71. soulTable.render(this)
  72. }
  73. });
  74. function saveData(data){
  75. if(!Array.isArray(data) || data.length < 1){
  76. return layer.msg('待保存的数据有误');
  77. }
  78. let params = {"data":JSON.stringify(data)};
  79. // console.log(params);
  80. $.post("/admin/parse/save_data",params,function(res,status){
  81. console.log(res);
  82. if(res.code === 200){
  83. table.reload('myTable', {
  84. // page: {
  85. // curr: 3 //重新从第 1 页开始
  86. // }
  87. });
  88. }else{
  89. console.log('修改失败了...');
  90. return false
  91. }
  92. });
  93. }
  94. // 工具栏事件
  95. table.on('toolbar(myTable)', function(obj){
  96. var id = obj.config.id;
  97. // console.log(id);
  98. if (obj.event === 'clearFilter') {
  99. // 清除所有筛选条件并重载表格
  100. // 参数: tableId
  101. soulTable.clearFilter('myTable')
  102. }else if(obj.event === 'getData'){
  103. var getData = table.getData(id);
  104. // console.log(getData);
  105. layer.alert(layui.util.escape(JSON.stringify(getData)));
  106. }else if(obj.event === 'saveData'){
  107. layer.confirm('确定保存当前的排序结果?保存后将刷新数据库和当前页面', function(index){
  108. var getData = table.getData(id);
  109. // console.log(getData);
  110. saveData(getData);
  111. layer.close(index);
  112. });
  113. }else if(obj.event === 'setTestVideo'){
  114. let test_video = localStorage.test_video||'https://v.qq.com/x/cover/m441e3rjq9kwpsc/d00448tl6se.html';
  115. layer.prompt({
  116. formType: 2,
  117. value: test_video,
  118. title: '请输入待测试的视频地址',
  119. area: ['360px', '120px'] //自定义文本域宽高
  120. }, function(value, index, elem){
  121. console.log(value); //得到value
  122. localStorage.test_video = value;
  123. layer.close(index);
  124. });
  125. }
  126. });
  127. //触发单元格工具事件
  128. table.on('tool(myTable)', function(obj) { // 双击 toolDouble
  129. console.log(obj);
  130. if(obj.event === 'del'){
  131. layer.msg('未开发功能:删除...',{time:1000})
  132. }else if(obj.event === 'test'){
  133. let test_video = localStorage.test_video||'https://v.qq.com/x/cover/m441e3rjq9kwpsc/d00448tl6se.html';
  134. let url = obj.data.url+test_video;
  135. layer.msg('开始测试:'+url,{time:1000});
  136. window.open(url);
  137. }else if(obj.event === 'set_top'){
  138. layer.msg('未开发功能:置顶...',{time:1000})
  139. }else if(obj.event === 'set_bottom'){
  140. layer.msg('未开发功能:置底...',{time:1000})
  141. }
  142. });
  143. // }, null, 'define');
  144. });
  145. </script>
  146. </body>
  147. </html>