treetable.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. layui.define(['layer', 'table'], function (exports) {
  2. var $ = layui.jquery;
  3. var layer = layui.layer;
  4. var table = layui.table;
  5. var treetable = {
  6. // 渲染树形表格
  7. render: function (param) {
  8. param.homdPid = param.homdPid || -1;
  9. // 检查参数
  10. if (!treetable.checkParam(param)) {
  11. return;
  12. }
  13. // 获取数据
  14. if (param.data) {
  15. treetable.init(param, param.data);
  16. } else {
  17. $.getJSON(param.url, param.where, function (res) {
  18. treetable.init(param, res.data);
  19. });
  20. }
  21. },
  22. // 渲染表格
  23. init: function (param, data) {
  24. var mData = [];
  25. var doneCallback = param.done;
  26. var tNodes = data;
  27. // 补上id和pid字段
  28. for (var i = 0; i < tNodes.length; i++) {
  29. var tt = tNodes[i];
  30. if (!tt.id) {
  31. if (!param.treeIdName) {
  32. layer.msg('参数treeIdName不能为空', {icon: 5});
  33. return;
  34. }
  35. tt.id = tt[param.treeIdName];
  36. }
  37. if (!tt.pid) {
  38. if (!param.treePidName) {
  39. layer.msg('参数treePidName不能为空', {icon: 5});
  40. return;
  41. }
  42. tt.pid = tt[param.treePidName];
  43. }
  44. if(tt.pid == param.homdPid){
  45. mData.push(tt);
  46. }
  47. }
  48. // 对数据进行排序
  49. var sort = function (s_pid, data) {
  50. for (var i = 0; i < data.length; i++) {
  51. if (data[i].pid == s_pid) {
  52. var len = mData.length;
  53. if (len > 0 && mData[len - 1].id == s_pid) {
  54. mData[len - 1].isParent = true;
  55. }
  56. mData.push(data[i]);
  57. sort(data[i].id, data);
  58. }
  59. }
  60. };
  61. sort(param.treeSpid, tNodes);
  62. // 重写参数
  63. param.url = undefined;
  64. param.data = mData;
  65. param.page = {
  66. count: param.data.length,
  67. limit: param.data.length
  68. };
  69. param.cols[0][param.treeColIndex].templet = function (d) {
  70. var mId = d.id;
  71. var mPid = d.pid;
  72. var isDir = d.isParent;
  73. var emptyNum = treetable.getEmptyNum(mPid, mData, param.indent);
  74. var iconHtml = '';
  75. for (var i = 0; i < emptyNum; i++) {
  76. iconHtml += '<span class="treeTable-empty"></span>';
  77. }
  78. if (isDir) {
  79. iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
  80. } else {
  81. iconHtml += '<i class="layui-icon layui-icon-file"></i>';
  82. }
  83. iconHtml += '&nbsp;&nbsp;';
  84. var ttype = isDir ? 'dir' : 'file';
  85. var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
  86. return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
  87. };
  88. param.done = function (res, curr, count) {
  89. $(param.elem).next().addClass('treeTable');
  90. $('.treeTable .layui-table-page').css('display', 'none');
  91. $(param.elem).next().attr('treeLinkage', param.treeLinkage);
  92. // 绑定事件换成对body绑定
  93. /*$('.treeTable .treeTable-icon').click(function () {
  94. treetable.toggleRows($(this), param.treeLinkage);
  95. });*/
  96. if (param.treeDefaultClose) {
  97. treetable.foldAll(param.elem);
  98. }
  99. if (doneCallback) {
  100. doneCallback(res, curr, count);
  101. }
  102. };
  103. // 渲染表格
  104. table.render(param);
  105. },
  106. // 计算缩进的数量
  107. getEmptyNum: function (pid, data, indent) {
  108. var num = 0;
  109. if (!pid) {
  110. return num;
  111. }
  112. var tPid;
  113. for (var i = 0; i < data.length; i++) {
  114. if (pid == data[i].id) {
  115. num += indent || 1;
  116. tPid = data[i].pid;
  117. break;
  118. }
  119. }
  120. return num + treetable.getEmptyNum(tPid, data, indent);
  121. },
  122. // 展开/折叠行
  123. toggleRows: function ($dom, linkage) {
  124. var type = $dom.attr('lay-ttype');
  125. if ('file' == type) {
  126. return;
  127. }
  128. var mId = $dom.attr('lay-tid');
  129. var isOpen = $dom.hasClass('open');
  130. if (isOpen) {
  131. $dom.removeClass('open');
  132. } else {
  133. $dom.addClass('open');
  134. }
  135. $dom.closest('tbody').find('tr').each(function () {
  136. var $ti = $(this).find('.treeTable-icon');
  137. var pid = $ti.attr('lay-tpid');
  138. var ttype = $ti.attr('lay-ttype');
  139. var tOpen = $ti.hasClass('open');
  140. if (mId == pid) {
  141. if (isOpen) {
  142. $(this).hide();
  143. if ('dir' == ttype && tOpen == isOpen) {
  144. $ti.trigger('click');
  145. }
  146. } else {
  147. $(this).show();
  148. if (linkage && 'dir' == ttype && tOpen == isOpen) {
  149. $ti.trigger('click');
  150. }
  151. }
  152. }
  153. });
  154. },
  155. // 检查参数
  156. checkParam: function (param) {
  157. if (!param.treeSpid && param.treeSpid != 0) {
  158. layer.msg('参数treeSpid不能为空', {icon: 5});
  159. return false;
  160. }
  161. if (!param.treeColIndex && param.treeColIndex != 0) {
  162. layer.msg('参数treeColIndex不能为空', {icon: 5});
  163. return false;
  164. }
  165. return true;
  166. },
  167. // 展开所有
  168. expandAll: function (dom) {
  169. $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
  170. var $ti = $(this).find('.treeTable-icon');
  171. var ttype = $ti.attr('lay-ttype');
  172. var tOpen = $ti.hasClass('open');
  173. if ('dir' == ttype && !tOpen) {
  174. $ti.trigger('click');
  175. }
  176. });
  177. },
  178. // 折叠所有
  179. foldAll: function (dom) {
  180. $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
  181. var $ti = $(this).find('.treeTable-icon');
  182. var ttype = $ti.attr('lay-ttype');
  183. var tOpen = $ti.hasClass('open');
  184. if ('dir' == ttype && tOpen) {
  185. $ti.trigger('click');
  186. }
  187. });
  188. }
  189. };
  190. // layui.link(layui.cache.base + '/treetable-lay/treetable.css');
  191. // 给图标列绑定事件
  192. $('body').on('click', '.treeTable .treeTable-icon', function () {
  193. var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
  194. if ('true' == treeLinkage) {
  195. treetable.toggleRows($(this), true);
  196. } else {
  197. treetable.toggleRows($(this), false);
  198. }
  199. });
  200. exports('treetable', treetable);
  201. });