message.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /**
  2. @Name:layuiAdmin(iframe版) 消息中心
  3. @Author:贤心
  4. @Site:http://www.layui.com/admin/
  5. @License:LPPL
  6. */
  7. layui.define(['admin', 'table', 'util'], function(exports){
  8. var $ = layui.$
  9. ,admin = layui.admin
  10. ,table = layui.table
  11. ,element = layui.element;
  12. var DISABLED = 'layui-btn-disabled'
  13. //区分各选项卡中的表格
  14. ,tabs = {
  15. all: {
  16. text: '全部消息'
  17. ,id: 'LAY-app-message-all'
  18. }
  19. ,notice: {
  20. text: '通知'
  21. ,id: 'LAY-app-message-notice'
  22. }
  23. ,direct: {
  24. text: '私信'
  25. ,id: 'LAY-app-message-direct'
  26. }
  27. };
  28. //标题内容模板
  29. var tplTitle = function(d){
  30. return '<a href="detail.html?id='+ d.id +'">'+ d.title;
  31. };
  32. //全部消息
  33. table.render({
  34. elem: '#LAY-app-message-all'
  35. ,url: layui.setter.base + 'json/message/all.js' //模拟接口
  36. ,page: true
  37. ,cols: [[
  38. {type: 'checkbox', fixed: 'left'}
  39. ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
  40. ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
  41. ]]
  42. ,skin: 'line'
  43. });
  44. //通知
  45. table.render({
  46. elem: '#LAY-app-message-notice'
  47. ,url: layui.setter.base + 'json/message/notice.js' //模拟接口
  48. ,page: true
  49. ,cols: [[
  50. {type: 'checkbox', fixed: 'left'}
  51. ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
  52. ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
  53. ]]
  54. ,skin: 'line'
  55. });
  56. //私信
  57. table.render({
  58. elem: '#LAY-app-message-direct'
  59. ,url: layui.setter.base + 'json/message/direct.js' //模拟接口
  60. ,page: true
  61. ,cols: [[
  62. {type: 'checkbox', fixed: 'left'}
  63. ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
  64. ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
  65. ]]
  66. ,skin: 'line'
  67. });
  68. //事件处理
  69. var events = {
  70. del: function(othis, type){
  71. var thisTabs = tabs[type]
  72. ,checkStatus = table.checkStatus(thisTabs.id)
  73. ,data = checkStatus.data; //获得选中的数据
  74. if(data.length === 0) return layer.msg('未选中行');
  75. layer.confirm('确定删除选中的数据吗?', function(){
  76. /*
  77. admin.req('url', {}, function(){ //请求接口
  78. //do somethin
  79. });
  80. */
  81. //此处只是演示,实际应用需把下述代码放入上述Ajax回调中
  82. layer.msg('删除成功', {
  83. icon: 1
  84. });
  85. table.reload(thisTabs.id); //刷新表格
  86. });
  87. }
  88. ,ready: function(othis, type){
  89. var thisTabs = tabs[type]
  90. ,checkStatus = table.checkStatus(thisTabs.id)
  91. ,data = checkStatus.data; //获得选中的数据
  92. if(data.length === 0) return layer.msg('未选中行');
  93. //此处只是演示
  94. layer.msg('标记已读成功', {
  95. icon: 1
  96. });
  97. table.reload(thisTabs.id); //刷新表格
  98. }
  99. ,readyAll: function(othis, type){
  100. var thisTabs = tabs[type];
  101. //do somethin
  102. layer.msg(thisTabs.text + ':全部已读', {
  103. icon: 1
  104. });
  105. }
  106. };
  107. $('.LAY-app-message-btns .layui-btn').on('click', function(){
  108. var othis = $(this)
  109. ,thisEvent = othis.data('events')
  110. ,type = othis.data('type');
  111. events[thisEvent] && events[thisEvent].call(this, othis, type);
  112. });
  113. exports('message', {});
  114. });