daytoutiao.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. layui.use(['laypage', 'layer', 'table', 'form'], function () {
  2. var laypage = layui.laypage //分页
  3. , $ = layui.jquery
  4. , layer = layui.layer //弹层
  5. , table = layui.table //表格
  6. , form = layui.form;
  7. var tableIds = 'toutiaolist'; //表格ID
  8. //第一个实例
  9. table.render({
  10. elem: '#' + tableIds
  11. , url: '/listclassnev/daytoutiaoform' //数据接口
  12. , where: {token: csrfToken}
  13. , method: 'post'
  14. , page: true //开启分页
  15. , text: '数据加载中'
  16. , id: 'tablerReload'
  17. , cols: [[ //表头
  18. // {type: "checkbox", width:50},
  19. {type: 'numbers', title: '序号', width: 50},
  20. {field: 'day_title', title: '栏目', align: 'center'},
  21. {field: 'day_email', width: 200, title: '邮箱', align: 'center'},
  22. {
  23. field: 'state', title: '审核状态', width: 100, align: 'center', templet: function (d) {
  24. switch (d.state) {
  25. case '2':
  26. return '<input type="checkbox" value="' + d.id + '" res="1" lay-skin="switch" lay-filter="switchTest" lay-text="通过|禁用">'
  27. break;
  28. case '1':
  29. return '<input type="checkbox" checked value="' + d.id + '" res="2" lay-skin="switch" lay-filter="switchTest" lay-text="通过|禁用">'
  30. break;
  31. }
  32. }
  33. },
  34. {field: 'create_time', title: '添加时间', align: 'center'},
  35. {
  36. field: 'sort',
  37. title: '排序',
  38. width: 100,
  39. event: 'sortData',
  40. edit: 'text',
  41. align: 'center',
  42. sort: true,
  43. templet: "#sortBox"
  44. },
  45. {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#toutiaofunc'}
  46. ]]
  47. });
  48. table.reload('tablerReload'); //重新加载
  49. //列表操作
  50. table.on('tool(' + tableIds + ')', function (obj) {
  51. var layEvent = obj.event,
  52. data = obj.data;
  53. if (layEvent === 'edit') {
  54. var index = layer.open({
  55. type: 2,
  56. title: '修改直播信息',
  57. area: ['50%', '35%'],
  58. content: '/listclassnev/daytoutiaoedit?id='+data.id,
  59. end: function () {
  60. table.reload('tablerReload'); //重新加载
  61. }
  62. });
  63. } else if (layEvent === 'del') {
  64. layer.confirm('您确定要删除吗?', {btn: ['确定', '取消']}, function () {
  65. setDaytoutiao('del',data.id);
  66. })
  67. } else if (layEvent === 'sortData') { //修改排序
  68. table.on('edit(' + tableIds + ')', function (obj) {
  69. var data = obj.data;
  70. setDaytoutiao('sort',data.id,data.sort);
  71. })
  72. }
  73. });
  74. //监听指定开关
  75. form.on('switch(switchTest)', function (data) {
  76. let id = $(data.elem).val();
  77. let state = $(data.elem).attr('res');
  78. layer.confirm('您确定要修改当前状态吗?', {btn: ['确认', '取消']}, function (index) {
  79. setDaytoutiao('state',id,state);
  80. }, function (index) {
  81. table.reload('tablerReload');
  82. layer.close(index)
  83. })
  84. return false;
  85. });
  86. // 新增
  87. var $ = layui.$, active = {
  88. addData: function () { //获取选中数据
  89. var index = layui.layer.open({
  90. type: 2,
  91. title: '添加栏目信息',
  92. closeBtn: 1, //不显示关闭按钮
  93. area: ['50%', '35%'],
  94. content: '/listclassnev/daytoutiaoadd' //iframe的url,no代表不显示滚动条
  95. , success: function (layero, index) {
  96. },
  97. end: function () {
  98. table.reload('tablerReload');
  99. }
  100. });
  101. }
  102. };
  103. $('.demoTable .layui-btn').on('click', function () {
  104. var type = $(this).data('type');
  105. active[type] ? active[type].call(this) : '';
  106. });
  107. //添加页面提交数据
  108. form.on('submit(adds)', function (data) {
  109. var formData = new FormData($('form')[0]);
  110. var index = layer.msg('数据提交中,请稍候', {icon: 16, time: false, shade: 0.8}); //数据提交提示
  111. $.ajax({
  112. cache: false,
  113. type: "post",
  114. url: "/listclassnev/daytoutiaoaddform",
  115. data: formData, // 你的formid
  116. contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
  117. processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  118. error: function (request) {
  119. layer.close(index);
  120. layer.msg("请联系管理员");
  121. },
  122. success: function (data) {
  123. layer.msg(data.msg);
  124. if(data.code == 200){
  125. parent.layer.close(index); //再执行关闭
  126. }
  127. }
  128. });
  129. return false;
  130. });
  131. form.on('submit(edits)', function (data) {
  132. var index = layer.msg('数据提交中,请稍候', {icon: 16, time: false, shade: 0.8}); //数据提交提示
  133. var formData = new FormData($('form')[0]);
  134. $.ajax({
  135. type: "post",
  136. url: "/listclassnev/daytoutiaoeditform",
  137. data: formData,
  138. contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
  139. processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  140. error: function (request) {
  141. layer.close(index);
  142. layer.msg("请联系管理员");
  143. },
  144. success: function (data) {
  145. layer.msg(data.msg);
  146. if(data.code == 200){
  147. parent.layer.close(index); //再执行关闭
  148. }
  149. }
  150. });
  151. return false;
  152. });
  153. //列表状态(审核,排序,删除)
  154. function setDaytoutiao(code,id,val = null) {
  155. $.post('/listclassnev/daytoutiaoset', {id: id,code:code,val:val}, function (data) {
  156. layer.msg(data.msg);
  157. if(data.code == 200){
  158. table.reload('tablerReload');
  159. }
  160. })
  161. }
  162. })