index_cat.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>知识库</title>
  8. <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
  10. <link rel="stylesheet" href="../../../assets/module/dtree/dtree.css"/>
  11. <link rel="stylesheet" href="../../../assets/module/dtree/font/dtreefont.css"/>
  12. <style>
  13. .layui-table-cell {
  14. height: auto;
  15. }
  16. ::-webkit-scrollbar {
  17. display: none
  18. }
  19. /*公共样式*/
  20. a,
  21. a:hover,
  22. a:link,
  23. a:visited,
  24. a:active {
  25. text-decoration: none;
  26. }
  27. /*列表展示*/
  28. .left-menu ul {
  29. border-right: 1px solid #ddd;
  30. padding-right: 20px;
  31. }
  32. .left-menu ul > li > a {
  33. display: block;
  34. padding: 10px 15px;
  35. }
  36. .menu-active > a {
  37. background: #25afe5;
  38. border-radius: 6px;
  39. color: #fff;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <!-- 页面加载loading -->
  45. <div class="page-loading">
  46. <div class="ball-loader">
  47. <span></span><span></span><span></span><span></span>
  48. </div>
  49. </div>
  50. <!-- 正文开始 -->
  51. <div class="layui-fluid">
  52. <div class="layui-row layui-col-space15">
  53. <div class="text-center" id="noMsg" style="display: none">暂无版块,请先添加版本</div>
  54. <!-- 左栏 -->
  55. <div class="layui-col-sm3 layui-col-md1 layui-col-lg3">
  56. <div class="layui-card">
  57. <div class="layui-card-body mini-bar zTree" id="menuDiv">
  58. <div class="left-menu">
  59. <ul id="catMenuList"></ul>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- 右栏 -->
  65. <div class="layui-col-sm9 layui-col-md11 layui-col-lg9">
  66. <div class="layui-card">
  67. <div class="layui-card-body">
  68. <!--<div class="layui-form toolbar">-->
  69. <!--<div class="layui-form-item text-right">-->
  70. <!--<div class="layui-inline pull-left">-->
  71. <!--<button id="btnAddTop" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加一级菜单</button>-->
  72. <!--</div>-->
  73. <!--<div class="layui-inline">-->
  74. <!--<button id="btnExpandMenu" class="layui-btn icon-btn">全部展开</button>-->
  75. <!--</div>-->
  76. <!--<div class="layui-inline">-->
  77. <!--<button id="btnFoldMenu" class="layui-btn icon-btn">全部折叠</button>-->
  78. <!--</div>-->
  79. <!--</div>-->
  80. <!--</div>-->
  81. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  82. <input type="hidden" class="layui-input" id="curCatId" name="catId"/>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- 表格照片列 -->
  89. <script type="text/html" id="imgTpl">
  90. {{# if(d.postPicUrl != null && d.postPicUrl != ''){ }}
  91. <img class="media-object" width="50px" height="50px" src="{{d.postPicUrl}}">
  92. {{# } else { }}
  93. <!--<img class="media-object" width="50px" height="50px" src="/assets/images/error.jpg">-->
  94. {{# } }}
  95. </script>
  96. <!-- js部分 -->
  97. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  98. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  99. <script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
  100. <script>
  101. layui.use(['iconPicker', 'layer', 'element', 'form', 'table', 'admin', 'treetable', 'uParas', 'util', 'zTree'], function () {
  102. var $ = layui.jquery;
  103. var layer = layui.layer;
  104. var form = layui.form;
  105. var table = layui.table;
  106. var admin = layui.admin;
  107. var uParas = layui.uParas;
  108. var catId = "";
  109. //左边板块设置
  110. admin.req(uParas.baseUrl + '/ent/myCategories/findList', {}, function (resp) {
  111. //debugger
  112. if (resp.code == 1) {
  113. var categories = resp.data;
  114. var html = '';
  115. if (categories.length > 0) {
  116. for (var i = 0; i < categories.length; i++) {
  117. var cate = categories[i];
  118. if (i == 0) {
  119. $("#curCatId").val(cate.catId);
  120. html += '<li class="menu-active" data-id="' + cate.catId + '">'
  121. //+'<a onclick="initTableData(\''+ cate.catId +'\')">'+cate.catName+'</a>'
  122. + '<a>' + cate.catName + '</a>'
  123. + '</li>'
  124. } else {
  125. html += '<li data-id="' + cate.catId + '">'
  126. //+'<a onclick="initTableData(\''+ cate.catId +'\')">'+cate.catName+'</a>'
  127. + '<a>' + cate.catName + '</a>'
  128. + '</li>'
  129. }
  130. }
  131. $("#catMenuList").html(html);
  132. //初始化表格
  133. renderTable();
  134. } else {
  135. //html += '<div class="text-center">暂无版块,请先添加版本</div>';
  136. //$("#catMenuList").html(html);
  137. $("#noMsg").show();
  138. }
  139. } else {
  140. layer.msg(resp.msg);
  141. }
  142. }, 'POST');
  143. //li点击
  144. // function initTableData(catId){
  145. // $("#curCatId").val(catId);
  146. // renderTable();
  147. // }
  148. $('#catMenuList').on('click', 'li', function () {
  149. //debugger
  150. //console.log("--------------------------")
  151. $(".left-menu>ul>li").removeClass('menu-active');
  152. $(this).addClass('menu-active');
  153. var catId = $(this).attr("data-id");
  154. $("#curCatId").val(catId);
  155. renderTable();
  156. });
  157. // 渲染表格
  158. function renderTable() {
  159. var catId = $("#curCatId").val();
  160. var url = uParas.baseUrl + '/ent/post/pageList/' + catId;
  161. var insTb = table.render({
  162. elem: '#datatable',
  163. url: url,
  164. page: true,
  165. cellMinWidth: 100,
  166. cols: [[
  167. {type: 'numbers', title: '序号'},
  168. {field: 'postPicUrl', sort: false, event: 'view', title: '图片', width: 100, templet: '#imgTpl'},
  169. {field: 'postTitle', sort: false, title: '标题', width: 200},
  170. /*{field: 'postDesc' , sort:false , title:'描述' ,width:200},*/
  171. {field: 'postAuthor', sort: false, title: '作者'},
  172. {field: 'createdTime', sort: false, title: '创建时间'},
  173. ]]
  174. });
  175. //layer.load();
  176. }
  177. //renderTable();
  178. // 工具条点击事件
  179. table.on('tool(datatable)', function (obj) {
  180. //debugger
  181. var data = obj.data;
  182. var layEvent = obj.event;
  183. if (layEvent == 'view') { // 查看
  184. goViewPage(data);
  185. }
  186. });
  187. //详情页面
  188. function goViewPage(data) {
  189. location.href = "./viewPost.html?postId=" + data.postId + "&type=catPage";
  190. }
  191. });
  192. </script>
  193. </body>
  194. </html>