/** 树形表格3.x Created by wangfan on 2020-05-12 https://gitee.com/whvse/treetable-lay */
layui.define(['laytpl', 'form', 'util'], function (exports) {
var $ = layui.jquery;
var laytpl = layui.laytpl;
var form = layui.form;
var util = layui.util;
var device = layui.device();
var MOD_NAME = 'treeTable'; // 模块名
var _instances = {}; // 记录所有实例
/* 表格默认参数 */
var defaultOption = {
elem: undefined, // 容器
cols: undefined, // 列参数
url: undefined, // url模式请求
method: undefined, // url模式请求方式
where: undefined, // url模式请求条件
contentType: undefined, // url模式请求类型
headers: undefined, // url模式请求headers
parseData: undefined, // url模式处理请求数据
request: {pidName: 'pid'}, // url模式请求字段自定义
toolbar: undefined, // 表头工具栏
defaultToolbar: undefined, // 表头工具栏右侧按钮
width: undefined, // 容器宽度
height: undefined, // 容器高度
cellMinWidth: 90, // 单元格最小宽度
done: undefined, // 数据处理完回调
data: undefined, // 直接赋值数据
title: undefined, // 定义table大标题，文件导出会用到
skin: undefined, // 表格风格
even: undefined, // 是否开启隔行变色
size: undefined, // 表格尺寸
text: {
none: '无数据' // 空数据提示
},
reqData: undefined, // 自定义加载数据方法
useAdmin: false, // 是否使用admin.ajax
tree: {
idName: 'id', // id的字段名
pidName: 'pid', // pid的字段名
childName: 'children', // children的字段名
haveChildName: 'haveChild', // 是否有children标识的字段名
openName: 'open', // 是否默认展开的字段名
iconIndex: 0, // 图标列的索引
arrowType: undefined, // 折叠箭头类型
onlyIconControl: undefined, // 仅点击图标控制展开折叠
getIcon: function (d) { // 自定义图标
var haveChild = d[this.haveChildName];
if (haveChild !== undefined) haveChild = haveChild === true || haveChild === 'true';
else if (d[this.childName]) haveChild = d[this.childName].length > 0;
if (haveChild) return '',
'
',
'
',
'
',
'
',
'
',
'
',
'
' + html + '
');
});
}
var tbRights = ['');
}
// 固定宽度
if (options.width) {
components.$view.css('width', options.width);
components.$tHeadGroup.css('width', options.width);
components.$tBodyGroup.css('width', options.width);
}
// 表格尺寸设置
var colgroupHtml = this.resize(true);
// 生成thead
var headHtml = '' + this.renderBodyTh() + ' ';
// 渲染表头及空的表主体的结构
components.$tBodyGroup.children('style').remove();
if (options.height) { // 固定表头
components.$tHead.html(colgroupHtml + headHtml);
components.$tBody.html(colgroupHtml + '');
var index = 0;
this.eachCols(function (i, col) {
if (col.colGroup) return;
html += that.renderBodyTd(d, indent, index, $tr ? $tr.children('td').eq(index) : undefined, col);
index++;
});
html += '';
return html;
};
/**
* 渲染每一个单元格数据
* @param d 行数据
* @param indent 缩进大小
* @param index 第几列
* @param $td
* @param col
* @returns {string}
*/
TreeTable.prototype.renderBodyTd = function (d, indent, index, $td, col) {
if (col.colGroup) return '';
var options = this.options;
var components = this.getComponents();
if (!indent) indent = 0;
// 内容填充
var content = '', cell = '', icon = '';
if (col.type === 'numbers') { // 序号列
content = '';
// 加箭头
var haveChild = d[options.tree.haveChildName];
if (haveChild === undefined) haveChild = d[options.tree.childName] && d[options.tree.childName].length > 0;
icon += ('' + content + ' ';
if (options.tree.onlyIconControl) content = icon + ' ' + content;
else content = icon + content + '';
}
cell = [
'',
'
', content, '
',
'
',
'
',
'
' + cell + '');
return html;
};
/**
* 渲染表头
* @returns {string}
*/
TreeTable.prototype.renderBodyTh = function () {
var options = this.options;
var components = this.getComponents();
var html = [];
$.each(options.cols, function (i1, item1) {
html.push('');
$.each(item1, function (i2, item2) {
html.push('');
html.push('');
html.push('
');
// 标题
var ca = '
');
html.push('
');
});
return html.join('');
};
/** 重置表格尺寸 */
TreeTable.prototype.resize = function (returnColgroup) {
// 计算表格宽度、最小宽度、百分比宽度
var options = this.options;
var components = this.getComponents();
var minWidth = 1, width = 1, needSetWidth = true, mwPercent = 0;
this.eachCols(function (i, item) {
if (item.colGroup || item.hide) return;
if (item.width) {
width += (item.width + 1);
if (item.minWidth) {
if (item.width < item.minWidth) item.width = item.minWidth;
} else if (item.width < options.cellMinWidth) item.width = options.cellMinWidth;
} else needSetWidth = false;
if (item.width) minWidth += (item.width + 1);
else if (item.minWidth) {
minWidth += (item.minWidth + 1);
mwPercent += item.minWidth;
} else {
minWidth += (options.cellMinWidth + 1);
mwPercent += options.cellMinWidth;
}
});
if (minWidth) {
components.$tHead.css('min-width', minWidth);
components.$tBody.css('min-width', minWidth);
} else {
components.$tHead.css('min-width', 'auto');
components.$tBody.css('min-width', 'auto');
}
if (needSetWidth) {
components.$tHead.css('width', width);
components.$tBody.css('width', width);
} else {
components.$tHead.css('width', '100%');
components.$tBody.css('width', '100%');
}
// 生成colgroup
var colgroupHtml = [];
this.eachCols(function (i, item) {
if (item.colGroup || item.hide) return;
colgroupHtml.push('' + colgroupHtml + ' ';
components.$table.children('colgroup').html(colgroupHtml);
};
/** 获取行对应数据 */
TreeTable.prototype.getDataByTr = function ($tr) {
var data, index;
if (typeof $tr !== 'string' && typeof $tr !== 'number') {
if ($tr) index = $tr.data('index');
} else index = $tr;
if (index === undefined) return;
if (typeof index === 'number') index = [index];
else index = index.split('-');
for (var i = 0; i < index.length; i++) {
if (data) data = data[this.options.tree.childName][index[i]];
else data = this.options.data[index[i]];
}
return data;
};
/**
* 联动子级复选框状态
* @param $tr 当前tr的dom
* @param checked
*/
TreeTable.prototype.checkSubCB = function ($tr, checked) {
var that = this;
var components = this.getComponents();
var indent = -1, $trList;
if ($tr.is('tbody')) {
$trList = $tr.children('tr');
} else {
indent = parseInt($tr.data('indent'));
$trList = $tr.nextAll('tr');
}
$trList.each(function () {
if (parseInt($(this).data('indent')) <= indent) return false;
var $cb = $(this).children('td').find('input[lay-filter="' + components.checkboxFilter + '"]');
$cb.prop('checked', checked);
$cb.removeClass('ew-form-indeterminate');
if (checked) $cb.next('.layui-form-checkbox').addClass('layui-form-checked');
else $cb.next('.layui-form-checkbox').removeClass('layui-form-checked');
var d = that.getDataByTr($(this));
d.LAY_CHECKED = checked; // 同步更新数据
d.LAY_INDETERMINATE = false;
});
};
/**
* 联动父级复选框状态
* @param $tr 父级的dom
*/
TreeTable.prototype.checkParentCB = function ($tr) {
var options = this.options;
var components = this.getComponents();
var d = this.getDataByTr($tr);
var ckNum = 0, unCkNum = 0;
if (d[options.tree.childName]) {
function checkNum(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].LAY_CHECKED) ckNum++;
else unCkNum++;
if (data[i][options.tree.childName]) checkNum(data[i][options.tree.childName]);
}
}
checkNum(d[options.tree.childName]);
}
var $cb = $tr.children('td').find('input[lay-filter="' + components.checkboxFilter + '"]');
if (ckNum > 0 && unCkNum === 0) { // 全选
$cb.prop('checked', true);
$cb.removeClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').addClass('layui-form-checked');
d.LAY_CHECKED = true; // 同步更新数据
d.LAY_INDETERMINATE = false;
} else if (ckNum === 0 && unCkNum > 0) { // 全不选
$cb.prop('checked', false);
$cb.removeClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').removeClass('layui-form-checked');
d.LAY_CHECKED = false; // 同步更新数据
d.LAY_INDETERMINATE = false;
} else if (ckNum > 0 && unCkNum > 0) { // 半选
$cb.prop('checked', true);
$cb.data('indeterminate', 'true');
$cb.addClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').addClass('layui-form-checked');
d.LAY_CHECKED = true; // 同步更新数据
d.LAY_INDETERMINATE = true;
}
};
/** 联动全选复选框 */
TreeTable.prototype.checkChooseAllCB = function () {
var options = this.options;
var components = this.getComponents();
var ckNum = 0, unCkNum = 0;
function checkNum(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].LAY_CHECKED) ckNum++;
else unCkNum++;
if (data[i][options.tree.childName]) checkNum(data[i][options.tree.childName]);
}
}
checkNum(options.data);
var $cb = components.$view.find('input[lay-filter="' + components.chooseAllFilter + '"]');
if (ckNum > 0 && unCkNum === 0) { // 全选
$cb.prop('checked', true);
$cb.removeClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').addClass('layui-form-checked');
} else if ((ckNum === 0 && unCkNum > 0) || (ckNum === 0 && unCkNum === 0)) { // 全不选
$cb.prop('checked', false);
$cb.removeClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').removeClass('layui-form-checked');
} else if (ckNum > 0 && unCkNum > 0) { // 半选
$cb.prop('checked', true);
$cb.addClass('ew-form-indeterminate');
$cb.next('.layui-form-checkbox').addClass('layui-form-checked');
}
};
/** 填充序号列 */
TreeTable.prototype.renderNumberCol = function () {
this.getComponents().$tBody.children('tbody').children('tr').each(function (i) {
$(this).children('td').find('.ew-tree-table-numbers').text(i + 1);
});
};
/** 根据id获取tr的index */
TreeTable.prototype.getIndexById = function (id) {
var options = this.options;
function each(data, pi) {
for (var i = 0; i < data.length; i++) {
if (data[i][options.tree.idName] == id) return pi !== undefined ? pi + '-' + i : i;
if (data[i][options.tree.childName])
return each(data[i][options.tree.childName], pi !== undefined ? pi + '-' + i : i);
}
}
return each(options.data);
};
/** 展开指定行 */
TreeTable.prototype.expand = function (id, cascade) {
var components = this.getComponents();
var $tr = components.$table.children('tbody').children('tr[data-index="' + this.getIndexById(id) + '"]');
if (!$tr.hasClass('ew-tree-table-open')) $tr.children('td').find('.ew-tree-pack').trigger('click');
if (cascade === false) return;
// 联动父级
var indent = parseInt($tr.data('indent'));
$tr.prevAll('tr').each(function () {
var tInd = parseInt($(this).data('indent'));
if (tInd < indent) {
if (!$(this).hasClass('ew-tree-table-open')) {
$(this).children('td').find('.ew-tree-pack').trigger('click');
}
indent = tInd;
}
});
};
/** 折叠指定行 */
TreeTable.prototype.fold = function (id) {
var components = this.getComponents();
var $tr = components.$table.children('tbody').children('tr[data-index="' + this.getIndexById(id) + '"]');
if ($tr.hasClass('ew-tree-table-open')) $tr.children('td').find('.ew-tree-pack').trigger('click');
};
/** 全部展开 */
TreeTable.prototype.expandAll = function () {
this.getComponents().$table.children('tbody').children('tr').each(function () {
if (!$(this).hasClass('ew-tree-table-open')) $(this).children('td').find('.ew-tree-pack').trigger('click');
});
};
/** 全部折叠 */
TreeTable.prototype.foldAll = function () {
this.getComponents().$table.children('tbody').children('tr').each(function () {
if ($(this).hasClass('ew-tree-table-open')) $(this).children('td').find('.ew-tree-pack').trigger('click');
});
};
/** 获取当前数据 */
TreeTable.prototype.getData = function () {
return this.options.data;
};
/** 重载表格 */
TreeTable.prototype.reload = function (opt) {
this.initOptions(this.options ? $.extend(true, this.options, opt) : opt);
this.init(); // 初始化表格
this.bindEvents(); // 绑定事件
};
/** 获取当前选中行 */
TreeTable.prototype.checkStatus = function (needIndeterminate) {
if (needIndeterminate === undefined) needIndeterminate = true;
var list = [];
this.eachData(function (i, item) {
if ((needIndeterminate || !item.LAY_INDETERMINATE) && item.LAY_CHECKED)
list.push($.extend({isIndeterminate: item.LAY_INDETERMINATE}, item));
});
return list;
};
/** 设置复/单选框选中 */
TreeTable.prototype.setChecked = function (ids) {
var that = this;
var components = this.getComponents();
var $radio = components.$table.find('input[lay-filter="' + components.radioFilter + '"]');
if ($radio.length > 0) { // 开启了单选框
$radio.each(function () {
var d = that.getDataByTr($(this).parentsUntil('tr').parent());
if (d && ids[ids.length - 1] == d[that.options.tree.idName]) {
$(this).next('.layui-form-radio').trigger('click');
return false;
}
});
} else { // 开启了复选框
components.$table.find('input[lay-filter="' + components.checkboxFilter + '"]').each(function () {
var $cb = $(this);
var $layCb = $cb.next('.layui-form-checkbox');
var checked = $cb.prop('checked');
var indeterminate = $cb.hasClass('ew-form-indeterminate');
var d = that.getDataByTr($cb.parentsUntil('tr').parent());
for (var i = 0; i < ids.length; i++) {
if (d && ids[i] == d[that.options.tree.idName]) {
if (d[that.options.tree.childName] && d[that.options.tree.childName].length > 0) continue;
if (!checked || indeterminate) $layCb.trigger('click');
}
}
});
}
};
/** 移除全部选中 */
TreeTable.prototype.removeAllChecked = function () {
this.checkSubCB(this.getComponents().$table.children('tbody'), false);
};
/** 导出 */
TreeTable.prototype.exportData = function (type) {
var components = this.getComponents();
if ('show' === type) {
components.$toolbar.find('.layui-table-tool-panel').remove();
components.$toolbar.find('[lay-event="LAYTABLE_EXPORT"]').append([
''
].join(''));
} else {
if (device.ie) return layer.msg('不支持ie导出');
if (!type) type = 'xls';
var head = [], body = [];
this.eachCols(function (i, item) {
if (item.type !== 'normal' || item.hide) return;
head.push(item.title || '');
});
components.$tBody.children('tbody').children('tr').each(function () {
var items = [];
$(this).children('td').each(function () {
var $this = $(this);
if ($this.data('type') !== 'normal' || $this.hasClass('layui-hide')) return true;
items.push($this.text().trim().replace(/,/g, '，'));
});
body.push(items.join(','));
});
// 创建下载文件的a标签
var alink = document.createElement('a');
var content = encodeURIComponent(head.join(',') + '\r\n' + body.join('\r\n'));
var contentType = ({csv: 'text/csv', xls: 'application/vnd.ms-excel'})[type];
alink.href = 'data:' + contentType + ';charset=utf-8,\ufeff' + content;
alink.download = (this.options.title || 'table') + '.' + type;
document.body.appendChild(alink);
alink.click();
document.body.removeChild(alink);
}
};
/** 打印 */
TreeTable.prototype.printTable = function () {
var components = this.getComponents();
var head = components.$tHead.children('thead').html();
if (!head) head = components.$tBody.children('thead').html();
var body = components.$tBody.children('tbody').html();
var colgroup = components.$tBody.children('colgroup').html();
var $html = $([
'',
' ', colgroup, ' ',
' ', head, ' ',
' ', body, ' ',
'
'
].join(''));
// 隐藏特殊列
$html.find('col[data-type="checkbox"],col[data-type="radio"],col[data-type="tool"]').remove();
$html.find('td[data-type="checkbox"],td[data-type="radio"],td[data-type="tool"],.layui-hide').remove();
function hideCol($temp) {
var parentKey = $temp.data('parent'), pCol;
if (!parentKey) return;
var $parent = $html.children('thead').children('tr').children('[data-key="' + parentKey + '"]');
var colspan = parseInt($parent.attr('colspan')) - 1;
$parent.attr('colspan', colspan);
if (colspan === 0) $parent.remove();
hideCol($parent);
}
$html.find('th[data-type="checkbox"],th[data-type="radio"],th[data-type="tool"]').each(function () {
hideCol($(this));
}).remove();
// 打印内容样式
var style = [
''
].join('');
var pWindow = window.open('', '_blank');
pWindow.focus();
var pDocument = pWindow.document;
pDocument.open();
pDocument.write($html[0].outerHTML + style);
pDocument.close();
pWindow.print();
pWindow.close();
};
/** 筛选列 */
TreeTable.prototype.toggleCol = function (show, field, key) {
var components = this.getComponents();
if (show === undefined) {
components.$toolbar.find('.layui-table-tool-panel').remove();
var cols = ['');
form.render('checkbox', components.filter);
} else {
if (key) {
var $td = components.$table.children('tbody').children('tr').children('[data-key="' + key + '"]');
var $th = components.$table.children('thead').children('tr').children('[data-key="' + key + '"]');
if (show) {
$td.removeClass('layui-hide');
$th.removeClass('layui-hide');
} else {
$td.addClass('layui-hide');
$th.addClass('layui-hide');
}
// 同步更新数据
var ks = key.split('-');
var col = this.options.cols[ks[0]][ks[1]];
col.hide = !show;
// 更新colspan数据
function changeParent($temp) {
var parentKey = $temp.data('parent'), pCol;
if (!parentKey) return;
var $parent = components.$table.children('thead').children('tr').children('[data-key="' + parentKey + '"]');
var colspan = $parent.attr('colspan');
show ? colspan++ : colspan--;
$parent.attr('colspan', colspan);
if (colspan === 0) $parent.addClass('layui-hide');
else $parent.removeClass('layui-hide');
changeParent($parent);
}
changeParent($th);
// 同步eachCols数据
this.eachCols(function (i, item) {
if (item.key === key) item.hide = col.hide;
});
this.resize(); // 更新表格尺寸
}
}
};
/**
* 搜索数据
* @param ids 关键字或数据id集合
*/
TreeTable.prototype.filterData = function (ids) {
var components = this.getComponents();
components.$loading.show();
if (this.options.data.length > 0) components.$loading.addClass('ew-loading-float');
var $trList = components.$table.children('tbody').children('tr');
var indexList = [];
if (typeof ids === 'string') { // 关键字
$trList.each(function () {
var index = $(this).data('index');
$(this).children('td').each(function () {
if ($(this).text().indexOf(ids) !== -1) {
indexList.push(index);
return false;
}
});
});
} else {
for (var i = 0; i < ids.length; i++) {
indexList.push(this.getIndexById(ids[i]));
}
}
$trList.addClass('ew-tree-table-filter-hide');
for (var j = 0; j < indexList.length; j++) {
var $tr = $trList.filter('[data-index="' + indexList[j] + '"]');
$tr.removeClass('ew-tree-table-filter-hide');
var indent = parseInt($tr.data('indent'));
// 联动子级
$tr.nextAll('tr').each(function () {
if (parseInt($(this).data('indent')) <= indent) return false;
$(this).removeClass('ew-tree-table-filter-hide');
});
if ($tr.hasClass('ew-tree-table-open')) toggleRow($tr);
// 联动父级
$tr.prevAll('tr').each(function () {
var tInd = parseInt($(this).data('indent'));
if (tInd < indent) {
$(this).removeClass('ew-tree-table-filter-hide');
if (!$(this).hasClass('ew-tree-table-open')) toggleRow($(this));
indent = tInd;
}
});
}
// 最后再检查一遍
/*$trList.not('.ew-tree-table-filter-hide').not('.ew-tree-tb-hide').each(function () {
var index = $(this).data('index'), hide = true;
for (var k = 0; k < indexList.length; k++) {
if (indexList[k] === index) hide = false;
}
if (hide) $(this).addClass('ew-tree-table-filter-hide');
});*/
components.$loading.hide();
components.$loading.removeClass('ew-loading-float');
if (indexList.length === 0) components.$empty.show();
updateFixedTbHead(components.$view); // 更新滚动条补丁
};
/** 重置搜索 */
TreeTable.prototype.clearFilter = function () {
var components = this.getComponents();
components.$table.children('tbody').children('tr').removeClass('ew-tree-table-filter-hide');
if (this.options.data.length > 0) components.$empty.hide();
updateFixedTbHead(components.$view); // 更新滚动条补丁
};
/**
* 刷新指定父级下的节点
* @param id 父级id,空则全部刷新
* @param data 非异步模式替换的数据
*/
TreeTable.prototype.refresh = function (id, data) {
if (isClass(id) === 'Array') {
data = id;
id = undefined;
}
var components = this.getComponents();
var d, $tr;
if (id !== undefined) {
$tr = components.$table.children('tbody').children('tr[data-index="' + this.getIndexById(id) + '"]');
d = this.getDataByTr($tr);
}
if (data) { // 数据模式
if (this.data.length > 0) components.$loading.addClass('ew-loading-float');
components.$loading.show();
if (data.length > 0 && this.options.tree.isPidData) { // pid形式数据
this.renderBodyData(tt.pidToChildren(data, this.options.tree.idName, this.options.tree.pidName, this.options.tree.childName), d, $tr);
} else {
this.renderBodyData(data, d, $tr);
}
} else { // 异步模式
this.renderBodyAsync(d, $tr);
}
};
/** 删除数据 */
TreeTable.prototype.del = function (id, index) {
if (index === undefined) index = this.getIndexById(id);
var indexList = (typeof index === 'number' ? [index] : index.split('-'));
var d = this.options.data;
if (indexList.length > 1) {
for (var i = 0; i < indexList.length - 1; i++) {
d = d[parseInt(indexList[i])][this.options.tree.childName];
}
}
d.splice(indexList[indexList.length - 1], 1);
};
/** 更新数据 */
TreeTable.prototype.update = function (id, fields) {
$.extend(true, this.getDataByTr(this.getIndexById(id)), fields);
};
/** 折叠/展开行 */
function toggleRow($tr) {
var indent = parseInt($tr.data('indent'));
var open = $tr.hasClass('ew-tree-table-open');
if (open) { // 折叠
$tr.removeClass('ew-tree-table-open');
$tr.nextAll('tr').each(function () {
if (parseInt($(this).data('indent')) <= indent) return false;
$(this).addClass('ew-tree-tb-hide');
});
} else { // 展开
$tr.addClass('ew-tree-table-open');
var hideInd;
$tr.nextAll('tr').each(function () {
var ind = parseInt($(this).data('indent'));
if (ind <= indent) return false;
if (hideInd !== undefined && ind > hideInd) return true;
$(this).removeClass('ew-tree-tb-hide');
if (!$(this).hasClass('ew-tree-table-open')) hideInd = parseInt($(this).data('indent'));
else hideInd = undefined;
});
}
updateFixedTbHead($tr.parentsUntil('.ew-tree-table').last().parent());
return open;
}
/** 固定表头滚动条补丁 */
function updateFixedTbHead($view) {
var $headBox = $view.children('.ew-tree-table-head');
var $tbBox = $view.children('.ew-tree-table-box');
var sWidth = $tbBox.width() - $tbBox.prop('clientWidth');
$headBox.css('border-right', (sWidth > 0 ? sWidth : 0) + 'px solid #f2f2f2');
}
// 监听窗口大小改变
$(window).resize(function () {
$('.ew-tree-table').each(function () {
updateFixedTbHead($(this));
var $tbBox = $(this).children('.ew-tree-table-box');
var full = $tbBox.data('full');
if (full && device.ie && device.ie < 10) {
$tbBox.css('height', getPageHeight() - full);
}
});
});
/** 表格溢出点击展开功能 */
$(document).on('mouseenter', '.ew-tree-table-cell.single-line', function () {
var $content = $(this).children('.ew-tree-table-cell-content');
if ($content.prop('scrollWidth') > $content.outerWidth()) $(this).children('.layui-table-grid-down').show();
}).on('mouseleave', '.ew-tree-table-cell.single-line', function () {
$(this).children('.layui-table-grid-down').hide();
});
// 点击箭头展开
$(document).on('click', '.ew-tree-table-cell>.layui-table-grid-down', function (e) {
e.stopPropagation();
hideAllTdTips();
var $cell = $(this).parent();
$cell.addClass('ew-tree-tips-open');
$cell.children('.layui-table-grid-down').hide();
var tw = $cell.parent().outerWidth() + 4;
if ($cell.outerWidth() < tw) $cell.children('.ew-tree-table-cell-content').css({'width': tw, 'max-width': tw});
var $box = $cell.parents().filter('.ew-tree-table-box');
if ($box.length === 0) $box = $cell.parents().filter('.ew-tree-table-head');
if ($box.length === 0) return;
if (($cell.outerWidth() + $cell.offset().left) + 20 > $box.offset().left + $box.outerWidth()) {
$cell.addClass('ew-show-left');
}
if (($cell.outerHeight() + $cell.offset().top + 10) > $box.offset().top + $box.outerHeight()) {
$cell.addClass('ew-show-bottom');
}
});
// 点击关闭按钮关闭
$(document).on('click', '.ew-tree-table-cell>.ew-tree-tips-c', function () {
hideAllTdTips();
});
// 点击空白部分关闭
$(document).on('click', function () {
hideAllTdTips();
$('.ew-tree-table .layui-table-tool-panel').remove();
});
$(document).on('click', '.ew-tree-table-cell.ew-tree-tips-open', function (e) {
e.stopPropagation();
});
/* 关闭所有单元格溢出提示框 */
function hideAllTdTips() {
$('.ew-tree-table-cell').removeClass('ew-tree-tips-open ew-show-left ew-show-bottom');
$('.ew-tree-table-cell>.ew-tree-table-cell-content').css({'width': '', 'max-width': ''});
}
/** 拖拽调整列宽 */
$(document).on('mousedown', '.ew-tb-resize', function (e) {
layui.stope(e);
var $this = $(this);
$this.attr('move', 'true');
var key = $this.parent().data('key');
$this.data('x', e.clientX);
var w = $this.parent().parent().parent().parent().children('colgroup').children('col[data-key="' + key + '"]').attr('width');
if (!w || w.toString().indexOf('%') !== -1) w = $this.parent().outerWidth();
$this.data('width', w);
$('body').addClass('ew-tree-table-resizing');
}).on('mousemove', function (e) {
var $rs = $('.ew-tree-table .ew-tb-resize[move="true"]');
if ($rs.length === 0) return;
layui.stope(e);
var x = $rs.data('x');
var w = $rs.data('width');
var nw = parseFloat(w) + e.clientX - parseFloat(x);
if (nw <= 0) nw = 1;
// 更新实例options中的宽度
var ins = _instances[$rs.parentsUntil('.ew-tree-table').last().parent().attr('lay-filter')];
var key = $rs.parent().data('key');
var ks = key.split('-');
ins.options.cols[ks[0]][ks[1]].width = nw;
ins.eachCols(function (i, item) {
if (item.key === key) item.width = nw;
});
ins.resize();
}).on('mouseup', function (e) {
$('.ew-tree-table .ew-tb-resize[move="true"]').attr('move', 'false');
$('body').removeClass('ew-tree-table-resizing');
}).on('mouseleave', function (e) {
$('.ew-tree-table .ew-tb-resize[move="true"]').attr('move', 'false');
$('body').removeClass('ew-tree-table-resizing');
});
/** 获取顶级的pId */
function getPids(data, idName, pidName) {
var pids = [];
for (var i = 0; i < data.length; i++) {
var hasPid = false;
for (var j = 0; j < data.length; j++) {
if (data[i][pidName] == data[j][idName]) {
hasPid = true;
break;
}
}
if (!hasPid) pids.push(data[i][pidName]);
}
return pids;
}
/** 判断pId是否相等 */
function pidEquals(pId, pIds) {
if (isClass(pIds) === 'Array') {
for (var i = 0; i < pIds.length; i++)
if (pId == pIds[i]) return true;
}
return pId == pIds;
}
/** 获取变量类型 */
function isClass(o) {
if (o === null) return 'Null';
if (o === undefined) return 'Undefined';
return Object.prototype.toString.call(o).slice(8, -1);
}
/** 获取浏览器高度 */
function getPageHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
/** 对外提供的方法 */
var tt = {
/* 渲染 */
render: function (options) {
return new TreeTable(options);
},
/* 重载 */
reload: function (id, opt) {
_instances[id].reload(opt);
},
/* 事件监听 */
on: function (events, callback) {
return layui.onevent.call(this, MOD_NAME, events, callback);
},
/* pid转children形式 */
pidToChildren: function (data, idName, pidName, childName, pId) {
if (!childName) childName = 'children';
var newList = [];
for (var i = 0; i < data.length; i++) {
if (data[i][idName] == data[i][pidName])
return console.error('第' + i + '条数据的' + idName + '与' + pidName + '相同', data[i]);
if (pId === undefined) pId = getPids(data, idName, pidName);
if (pidEquals(data[i][pidName], pId)) {
var children = this.pidToChildren(data, idName, pidName, childName, data[i][idName]);
if (children.length > 0) data[i][childName] = children;
newList.push(data[i]);
}
}
return newList;
}
};
/** 添加样式 */
$('head').append([
''
].join(''));
exports('treeTable', tt);
});
