lst.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <!--加载公共头部文件-->
  2. {include file='Base/top'}
  3. <!--加载公共左侧文件-->
  4. {include file='Base/left'}
  5. <!--加载公共底部文件-->
  6. {include file='Base/fotter'}
  7. <!-- 内容显示部分 -->
  8. <div class="layui-body">
  9. <!--面包屑导航-->
  10. <blockquote class="layui-elem-quote">
  11. <span class="layui-breadcrumb" style="visibility: visible;">
  12. <a >友情管理</a>
  13. <span lay-separator="">/</span>
  14. <a href="{:url('Links/lst')}">
  15. <cite>链接列表</cite>
  16. </a>
  17. </span>
  18. </blockquote>
  19. <!--面包屑导航 结束-->
  20. <div class="layui-row layui-col-space10" style="margin:0 10px;">
  21. <div class="search" style="margin:10px 0px 5px -5px;"><!-- 搜索 -->
  22. <div class="layui-inline">
  23. <input type="text" class="layui-input" name="title" id="refund" autocomplete="off" placeholder="请输入标题">
  24. </div>
  25. <button class="layui-btn layui-btn-primary" data-type="reload">搜索</button>
  26. </div>
  27. <table class="layui-hide" id="list" lay-filter="list"></table><!-- 表格数据 -->
  28. </div>
  29. </div>
  30. <!-- 表格操作栏模块 -->
  31. <script type="text/html" id="barDemo"><!-- 表格自定义操作按钮 -->
  32. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  33. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  34. </script>
  35. <!-- 头部工具栏模块 -->
  36. <script type="text/html" id="toolbarDemo"><!-- 表格自定义操作按钮 -->
  37. <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
  38. <div class="layui-btn-group demoTable">
  39. <button class="layui-btn layui-btn-xs" data-type="pdel">批量删除</button>
  40. </div>
  41. </script>
  42. <script>
  43. layui.use(['table','layer','laypage','jquery'], function(){
  44. var table = layui.table,
  45. layer = layui.layer,
  46. laypage = layui.laypage,
  47. $ = layui.jquery;
  48. //数据表格
  49. table.render({
  50. elem: '#list'
  51. ,id:'idSystem'
  52. ,url:'{:url("lst_data")}'//数据接口(专门处理数据)
  53. ,height:'full'
  54. // ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
  55. ,toolbar: '#toolbarDemo'
  56. //分页
  57. ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
  58. layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
  59. ,curr: 1 //设定初始在第 5 页
  60. ,limit:10 //一页显示多少条
  61. ,limits:[10,20,30]//每页条数的选择项
  62. ,groups: 3 //只显示 2 个连续页码
  63. ,first: "首页" //不显示首页
  64. ,last: "尾页" //不显示尾页
  65. }
  66. ,cols: [[
  67. {type: 'checkbox', fixed: 'left'}
  68. ,{field: 'id', title: '链接ID',sort:true, align:'center',width: 80}
  69. ,{field: 'title', title: '链接标题',align:'center', width: 120}
  70. ,{field: 'url', title: '链接地址',align:'center', width: 200}
  71. ,{field: 'desc', title: '链接描述',align:'left', width: 400}
  72. ,{field:'actions',title: '操作',toolbar: '#barDemo',align:'left',width:300 ,fixed:'right'}
  73. ]]
  74. });
  75. // 执行搜索,表格重载
  76. $('.search .layui-btn-primary').on('click',function () {
  77. // 搜索条件
  78. var title = $('#refund').val();
  79. if(title==''){
  80. layer.msg('搜索条件不能为空');
  81. return false;
  82. }
  83. table.reload('idSystem', {
  84. page: {
  85. curr: 1
  86. }
  87. ,where: {
  88. title: title
  89. }
  90. });
  91. });
  92. //监听头工具栏事件
  93. table.on('toolbar(list)', function(obj){
  94. var checkStatus = table.checkStatus(obj.config.id)
  95. ,data = checkStatus.data; //获取选中的数据
  96. switch(obj.event){
  97. case 'add'://添加
  98. var index = layer.open({
  99. type:2,
  100. title:"添加链接",
  101. maxmin:true,
  102. width:'auto',
  103. offset : '100px',
  104. area :['1000px','600px'],
  105. content:"{:url('Links/add')}"
  106. });
  107. break;
  108. };
  109. });
  110. //监听行工具事件
  111. table.on('tool(list)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
  112. var data = obj.data; //获得当前行数据
  113. var layEvent = obj.event; //获得 lay-event 对应的值
  114. var tr = obj.tr; //获得当前行 tr 的DOM对象
  115. switch(layEvent){
  116. case 'edit'://编辑
  117. var index = layer.open({
  118. type:2,
  119. title:"编辑信息",
  120. maxmin:true,
  121. width:'auto',
  122. offset : '100px',
  123. area :['1000px','600px'],
  124. content:"{:url('Links/edit')}?id="+data.id
  125. });
  126. break;
  127. case 'del'://删除
  128. layer.confirm('确定要删除吗?',{icon: 5},function(index){
  129. $.post("{:url('Links/del')}?id="+data.id,function(res){
  130. if(res == 1){
  131. obj.del();
  132. layer.msg('删除成功!');
  133. }else{
  134. layer.msg('删除失败!');
  135. }
  136. })
  137. });
  138. break;
  139. };
  140. });
  141. //批量删除————————————————————————————————————————
  142. var $ = layui.$, active = {
  143. pdel: function(){ //获取选中数据
  144. var checkStatus = table.checkStatus('idSystem')
  145. ,data = checkStatus.data;
  146. if(data==""){
  147. layer.msg('请选择需要删除的数据',{icon:2});
  148. return;
  149. }
  150. var ids = [];
  151. if(data.length>0){
  152. for(var i=0;i<data.length;i++){
  153. ids+=data[i].id+",";
  154. }
  155. }
  156. layer.confirm('确定要删除id为'+ids+'的用户信息吗?',function(index){
  157. $.ajax({
  158. type:'POST',
  159. url:'{:url("Links/pdel")}',
  160. data:{"ids":ids},
  161. success:function(data){
  162. if(data==1){
  163. // layer.msg('删除成功',{icon:1});
  164. layer.msg('批量删除成功',{icon:1},function () {
  165. var index = parent.layer.getFrameIndex(window.name);// 获得frame索引
  166. parent.layer.close(index);//关闭当前frame
  167. parent.layui.table.reload('idSystem');//成功刷新父窗口的 table
  168. });
  169. }else{
  170. layer.msg('没有批量删除权限!',{icon:2});
  171. }
  172. }
  173. })
  174. })
  175. }
  176. }
  177. $('.demoTable .layui-btn-xs').on('click', function(){
  178. var type = $(this).data('type');
  179. active[type] ? active[type].call(this) : '';
  180. });
  181. //批量删除结束————————————————————————————————————————————————————
  182. });
  183. </script>