index.php 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <div class="row content-nav">
  2. <div class="col-xs-12">
  3. <ul>
  4. <li><a href="javascript:;"><i></i>&nbsp;导航管理</a></li>
  5. <li><a href="javascript:;">导航列表</a></li>
  6. </ul>
  7. </div>
  8. </div>
  9. <section class="content clearfix">
  10. <div class="layui-list-box">
  11. <table class="layui-hide" id="list-box" lay-filter="list-box"></table>
  12. </div>
  13. </section>
  14. <script type="text/html" id="list-toolbar">
  15. <div class="layui-btn-container">
  16. <button lay-event="url" type="button" class="layui-btn layui-btn-sm layui-bg-light-blue"><i class="layui-icon">&#xe61f;</i> 添加</button>
  17. <button lay-event="refresh" type="button" class="layui-btn layui-btn-sm layui-bg-red"><i class="layui-icon">&#xe9aa;</i> 刷新</button>
  18. </div>
  19. </script>
  20. <script type="text/html" id="list-bar">
  21. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  22. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  23. </script>
  24. <script type="text/html" id="checkboxTpl">
  25. <input type="checkbox" name="status" value="{{d.id}}" title="开启" lay-filter="status-filter" {{ d.status == 0 ? 'checked' : '' }}>
  26. </script>
  27. <script>
  28. layui.use(['table','form'], function () {
  29. var table = layui.table;
  30. var form = layui.form;
  31. table.render({
  32. elem: '#list-box'
  33. , url: '{:createUrl("index")}'
  34. , toolbar: '#list-toolbar'
  35. , defaultToolbar: []
  36. , title: '数据表'
  37. , cols: [[
  38. {type: 'checkbox'}
  39. , {field: 'id', title: 'ID', width: 80, unresize: true, sort: true,align:"center"}
  40. , {field: 'name', title: '名称'}
  41. , {field: 'url', title: '地址',align:'center'}
  42. , {field: 'sort', title: '排序',width:160,align:'center',edit:true,}
  43. , {field: 'status', title: '状态', width: 110,templet: '#checkboxTpl'}
  44. , {fixed: 'right', align: 'center', title: '操作', toolbar: '#list-bar', width: 120}
  45. ]]
  46. , text: {
  47. none: '<div><i class="layui-icon">&#xe702;</i>暂无相关数据</div>'
  48. }
  49. , page: true
  50. , height: 'full-200'
  51. // ,limit:30
  52. });
  53. //头工具栏事件
  54. table.on('toolbar(list-box)', function (obj) {
  55. switch (obj.event) {
  56. case 'url':
  57. window.location.href = "{:createUrl('editor')}";
  58. break;
  59. case 'refresh':
  60. window.location.reload();
  61. break;
  62. }
  63. });
  64. //监听行工具事件
  65. table.on('tool(list-box)', function (obj) {
  66. var data = obj.data;
  67. if (obj.event === 'del') {
  68. layer.confirm('你确定要删除吗?', function (index) {
  69. $.get('{:createUrl("delete")}',{
  70. id : data.id
  71. },function(result){
  72. layer.close(index);
  73. if(result.code){
  74. obj.del();
  75. }else{
  76. layer.msg(result.msg,{ icon : 2 });
  77. }
  78. },"json");
  79. });
  80. } else if (obj.event === 'edit') {
  81. window.location.href = '{:createUrl("editor")}?id='+data.id;
  82. }
  83. });
  84. //监听锁定操作
  85. form.on('checkbox(status-filter)', function(obj){
  86. var that = this;
  87. $.get('{:createUrl("field")}',{
  88. name : that.name,
  89. value : (obj.elem.checked ? 0 : 1),
  90. id : that.value
  91. },function (result){
  92. if(!result.code){
  93. layer.msg(result.msg,{ icon : 2 });
  94. }
  95. },"json");
  96. });
  97. //监听单元格编辑
  98. table.on('edit(list-box)', function(obj){
  99. $.get('{:createUrl("field")}',{
  100. name : obj.field,
  101. value : obj.value,
  102. id : obj.data.id
  103. },function (result){
  104. if(!result.code){
  105. layer.msg(result.msg,{ icon : 2 });
  106. }
  107. },"json");
  108. });
  109. });
  110. </script>