复制 list.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文章列表-WeAdmin 1.0</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  10. <link rel="stylesheet" href="../../static/css/font.css">
  11. <link rel="stylesheet" href="../../static/css/weadmin.css">
  12. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  13. <script src="../../lib/layui/layui.js" charset="utf-8"></script>
  14. <!--<script type="text/javascript" src="../../static/js/admin.js"></script>-->
  15. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  16. <!--[if lt IE 9]>
  17. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  18. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. <style type="text/css">
  21. .layui-form-switch {
  22. width: 55px;
  23. }
  24. .layui-form-switch em {
  25. width: 40px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="weadmin-nav">
  31. <span class="layui-breadcrumb">
  32. <a href="">首页</a>
  33. <a href="">文章管理</a>
  34. <a>
  35. <cite>文章列表</cite></a>
  36. </span>
  37. <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
  38. <i class="layui-icon" style="line-height:30px">ဂ</i></a>
  39. </div>
  40. <div class="weadmin-body">
  41. <div class="layui-row">
  42. <form class="layui-form layui-col-md12 we-search">
  43. 文章搜索:
  44. <div class="layui-input-inline">
  45. <select name="cateid">
  46. <option>请选择分类</option>
  47. <option>文章</option>
  48. <option>会员</option>
  49. <option>权限</option>
  50. </select>
  51. </div>
  52. <div class="layui-inline">
  53. <input class="layui-input" placeholder="开始日" name="start" id="start">
  54. </div>
  55. <div class="layui-inline">
  56. <input class="layui-input" placeholder="截止日" name="end" id="end">
  57. </div>
  58. <div class="layui-inline">
  59. <input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
  60. </div>
  61. <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
  62. </form>
  63. </div>
  64. <div class="weadmin-block">
  65. <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
  66. <button class="layui-btn" onclick="delAll()"><i class="layui-icon">&#xe6c6;</i>推荐</button>
  67. <button class="layui-btn" onclick="delAll()"><i class="layui-icon">&#xe619;</i>置顶</button>
  68. <button class="layui-btn" onclick="delAll()"><i class="layui-icon">&#xe6b2;</i>审核</button>
  69. <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html',600,400)"><i class="layui-icon">&#xe61f;</i>添加</button>
  70. <span class="fr" style="line-height:40px">共有数据:88 条</span>
  71. </div>
  72. <table class="layui-form layui-table" id="memberList">
  73. <thead>
  74. <tr>
  75. <th>
  76. <!--<input type="checkbox" class="header" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose">-->
  77. <div class="layui-unselect header layui-form-checkbox" name="layTableCheckbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
  78. </th>
  79. <th>ID</th>
  80. <th>标题</th>
  81. <th>发布时间</th>
  82. <th>分类</th>
  83. <th>排序</th>
  84. <th>推荐</th>
  85. <th>置顶</th>
  86. <th>审核</th>
  87. <th>操作</th>
  88. </tr>
  89. </thead>
  90. <tbody>
  91. <tr data-id="1">
  92. <td>
  93. <!--<input type="checkbox" name="layTableCheckbox" lay-skin="primary">-->
  94. <div class="layui-unselect layui-form-checkbox" name="layTableCheckbox" lay-skin="primary" data-id="1"><i class="layui-icon">&#xe605;</i></div>
  95. </td>
  96. <td>1</td>
  97. <td>WeAdmin的第一个版本在不断地抽空完善学习中</td>
  98. <td>2018-02-03 00:49:50</td>
  99. <td>官方动态</td>
  100. <td>1</td>
  101. <td>
  102. <input type="checkbox" name="zzz" lay-skin="switch" lay-text="已推荐|未推荐" checked>
  103. </td>
  104. <td>
  105. <input type="checkbox" name="show" lay-skin="switch" lay-text="已置顶|未置顶" checked>
  106. </td>
  107. <td>
  108. <input type="checkbox" name="lock" value="10002" title="审核" lay-filter="lockDemo">
  109. </td>
  110. <td class="td-manage">
  111. <a title="编辑" onclick="WeAdminEdit('编辑','./edit.html', 2, 600, 400)" href="javascript:;">
  112. <i class="layui-icon">&#xe642;</i>
  113. </a>
  114. <a title="查看" onclick="WeAdminShow('查看文章','./show.html',600,400)" href="javascript:;">
  115. <i class="layui-icon">&#xe63c;</i>
  116. </a>
  117. <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
  118. <i class="layui-icon">&#xe640;</i>
  119. </a>
  120. </td>
  121. </tr>
  122. <tr data-id="2">
  123. <td>
  124. <!--<input type="checkbox" name="layTableCheckbox" lay-skin="primary">-->
  125. <div class="layui-unselect layui-form-checkbox" name="layTableCheckbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
  126. </td>
  127. <td>2</td>
  128. <td>WeAdmin的第一个版本测试数据测试数据</td>
  129. <td>2018-02-03 00:49:50</td>
  130. <td>官方动态</td>
  131. <td>2</td>
  132. <td>
  133. <input type="checkbox" name="tuijian" lay-skin="switch" lay-filter="tuijian" lay-text="已推荐|未推荐" checked>
  134. </td>
  135. <td>
  136. <input type="checkbox" name="zhiding" lay-skin="switch" lay-filter="zhiding" lay-text="已置顶|未置顶" checked>
  137. </td>
  138. <td>
  139. <input type="checkbox" name="审核" value="10002" title="审核" lay-filter="lockDemo">
  140. </td>
  141. <td class="td-manage">
  142. <a title="编辑" onclick="WeAdminEdit('编辑','./edit.html', 2, 600, 400)" href="javascript:;">
  143. <i class="layui-icon">&#xe642;</i>
  144. </a>
  145. <a title="查看" onclick="WeAdminShow('查看文章','./show.html',600,400)" href="javascript:;">
  146. <i class="layui-icon">&#xe63c;</i>
  147. </a>
  148. <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
  149. <i class="layui-icon">&#xe640;</i>
  150. </a>
  151. </td>
  152. </tr>
  153. </tbody>
  154. </table>
  155. <div class="page">
  156. <div>
  157. <a class="prev" href="">&lt;&lt;</a>
  158. <a class="num" href="">1</a>
  159. <span class="current">2</span>
  160. <a class="num" href="">3</a>
  161. <a class="num" href="">489</a>
  162. <a class="next" href="">&gt;&gt;</a>
  163. </div>
  164. </div>
  165. </div>
  166. <script type="text/javascript">
  167. layui.extend({
  168. admin: '{/}../../static/js/admin'
  169. });
  170. layui.use(['laydate', 'table', 'form', 'layer', 'admin'], function() {
  171. var laydate = layui.laydate,
  172. table = layui.table,
  173. layer = layui.layer,
  174. admin = layui.admin,
  175. form = layui.form;
  176. //执行一个laydate实例
  177. laydate.render({
  178. elem: '#start' //指定元素
  179. });
  180. //执行一个laydate实例
  181. laydate.render({
  182. elem: '#end' //指定元素
  183. });
  184. form.render();
  185. //监听开关操作
  186. form.on('switch(tuijian)', function(obj) {
  187. layer.tips(this.value + ' ' + this.name + ':' + obj.elem.checked, obj.othis);
  188. });
  189. form.on('switch(zhiding)', function(obj) {
  190. layer.tips(this.value + ' ' + this.name + ':' + obj.elem.checked, obj.othis);
  191. });
  192. //监听锁定操作
  193. form.on('checkbox(lockDemo)', function(obj) {
  194. layer.tips(this.value + ' ' + this.name + ':' + obj.elem.checked, obj.othis);
  195. });
  196. });
  197. /*用户-停用*/
  198. function member_stop(obj, id) {
  199. var confirmTip;
  200. if($(obj).attr('title') == '启用') {
  201. confirmTip = '确认要停用吗?';
  202. } else {
  203. confirmTip = '确认要启用吗?';
  204. }
  205. layer.confirm(confirmTip, function(index) {
  206. if($(obj).attr('title') == '启用') {
  207. //发异步把用户状态进行更改
  208. $(obj).attr('title', '停用')
  209. $(obj).find('i').html('&#xe62f;');
  210. $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
  211. layer.msg('已停用!', {
  212. icon: 5,
  213. time: 1000
  214. });
  215. } else {
  216. $(obj).attr('title', '启用')
  217. $(obj).find('i').html('&#xe601;');
  218. $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
  219. layer.msg('已启用!', {
  220. icon: 6,
  221. time: 1000
  222. });
  223. }
  224. });
  225. }
  226. /*用户-删除*/
  227. function member_del(obj, id) {
  228. layer.confirm('确认要删除吗?', function(index) {
  229. //发异步删除数据
  230. $(obj).parents("tr").remove();
  231. layer.msg('已删除!', {
  232. icon: 1,
  233. time: 1000
  234. });
  235. });
  236. }
  237. function delAll(argument) {
  238. var data = tableCheck.getData();
  239. layer.confirm('确认要删除吗?' + data, function(index) {
  240. //捉到所有被选中的,发异步进行删除
  241. layer.msg('删除成功', {
  242. icon: 1
  243. });
  244. $(".layui-form-checked").not('.header').parents('tr').remove();
  245. });
  246. }
  247. </script>
  248. </body>
  249. </html>