layui.define(['layer', 'table','soulTable'], function (exports) { var $ = layui.jquery; var layer = layui.layer; var soulTable = layui.soulTable; var table = layui.table; var _instances = {}; // 记录所有实例 var tabletree = { // 渲染树形表格 render: function (param) { var id = param.elem.substring(1); var isclick = true; if (!!_instances[id]) { isclick = false; } else { _instances[id] = param; } // 检查参数 if (!tabletree.checkParam(param)) { return; } // 获取数据 if (param.data) { tabletree.init(param, param.data); } else { $.getJSON(param.url, param.where, function (res) { tabletree.init(param, res.data); }); } if (isclick) { // 给图标列绑定事件 $('body').on('click', '.treeTable .treeTable-icon', function () { var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage'); if ('true' == treeLinkage) { tabletree.toggleRows($(this), true, id); } else { tabletree.toggleRows($(this), false, id); } $('div[lay-id=' + id + ']').find('.layui-table-main tbody tr').each(function () { }); }); } }, // 渲染表格 init: function (param, data) { var mData = []; var doneCallback = param.done; var tNodes = data; // 补上id和pid字段 for (var i = 0; i < tNodes.length; i++) { var tt = tNodes[i]; if (!tt.id) { if (!param.treeIdName) { layer.msg('参数treeIdName不能为空', {icon: 5}); return; } tt.id = tt[param.treeIdName]; } if (!tt.pid) { if (!param.treePidName) { layer.msg('参数treePidName不能为空', {icon: 5}); return; } tt.pid = tt[param.treePidName]; } } // 对数据进行排序 var sort = function (s_pid, data) { for (var i = 0; i < data.length; i++) { if (data[i].pid == s_pid) { var len = mData.length; if (len > 0 && mData[len - 1].id == s_pid) { mData[len - 1].isParent = true; } mData.push(data[i]); sort(data[i].id, data); } } }; sort(param.treeSpid, tNodes); // 重写参数 param.url = undefined; param.data = mData; param.cols[0][param.treeColIndex].templet = function (d) { var mId = d.id; var mPid = d.pid; var isDir = d.isParent; var emptyNum = tabletree.getEmptyNum(mPid, mData); var iconHtml = ''; for (var i = 0; i < emptyNum; i++) { iconHtml += ''; } if (isDir) { iconHtml += ''; } else { iconHtml += ''; } iconHtml += '  '; var ttype = isDir ? 'dir' : 'file'; var vg = ''; return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '' }; param.done = function (res, curr, count) { $(param.elem).next().addClass('treeTable'); $(param.elem).next().attr('treeLinkage', param.treeLinkage); // 绑定事件换成对body绑定 /*$('.tabletree .treeTable-icon').click(function () { tabletree.toggleRows($(this), param.treeLinkage); });*/ if (param.treeDefaultClose) { tabletree.foldAll(param.elem); } if (doneCallback) { doneCallback(res, curr, count); } if (!!param.filter) { soulTable.render(this); } table.resize(); }; // 渲染表格 table.render(param); }, // 计算缩进的数量 getEmptyNum: function (pid, data) { var num = 0; if (!pid) { return num; } var tPid; for (var i = 0; i < data.length; i++) { if (pid == data[i].id) { num += 1; tPid = data[i].pid; break; } } return num + tabletree.getEmptyNum(tPid, data); }, // 展开/折叠行 toggleRows: function ($dom, linkage,id) { var type = $dom.attr('lay-ttype'); if ('file' == type) { return; } var mId = $dom.attr('lay-tid'); var isOpen = $dom.hasClass('open'); if (isOpen) { $dom.removeClass('open'); } else { $dom.addClass('open'); } $dom.closest('tbody').find('tr').each(function () { var $ti = $(this).find('.treeTable-icon'); var pid = $ti.attr('lay-tpid'); var ttype = $ti.attr('lay-ttype'); var tOpen = $ti.hasClass('open'); if (mId == pid) { if (isOpen) { $(this).hide(); var index = $(this).attr('data-index'); $('div[lay-table-id=' + id + ']').find('.layui-table-fixed tbody tr[data-index= ' + index + ']').hide(); if ('dir' == ttype && tOpen == isOpen) { $ti.trigger('click'); } } else { $(this).show(); var index = $(this).attr('data-index'); $('div[lay-table-id=' + id + ']').find('.layui-table-fixed tbody tr[data-index= ' + index + ']').show(); if (linkage && 'dir' == ttype && tOpen == isOpen) { $ti.trigger('click'); } } } }); }, // 检查参数 checkParam: function (param) { if (!param.treeSpid && param.treeSpid != 0) { layer.msg('参数treeSpid不能为空', {icon: 5}); return false; } if (!param.treeColIndex && param.treeColIndex != 0) { layer.msg('参数treeColIndex不能为空', {icon: 5}); return false; } return true; }, // 展开所有 expandAll: function (dom) { $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { var $ti = $(this).find('.treeTable-icon'); var ttype = $ti.attr('lay-ttype'); var tOpen = $ti.hasClass('open'); if ('dir' == ttype && !tOpen) { $ti.trigger('click'); } }); }, // 折叠所有 foldAll: function (dom) { $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { var $ti = $(this).find('.treeTable-icon'); var ttype = $ti.attr('lay-ttype'); var tOpen = $ti.hasClass('open'); if ('dir' == ttype && tOpen) { $ti.trigger('click'); } }); } }; layui.link(layui.cache.base + 'tabletree/tabletree.css'); exports('tabletree', tabletree); });