@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,263 lines • 128 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: data-table.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, NgZone, Output, QueryList, Renderer2, TemplateRef, ViewChild } from '@angular/core';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
import { DataTableFootTmplComponent } from './tmpl/data-table-foot-tmpl.component';
import { DataTableHeadTmplComponent } from './tmpl/data-table-head-tmpl.component';
import { DataTablePagerTmplComponent } from './tmpl/data-table-pager-tmpl.component';
var DataTableComponent = /** @class */ (function () {
function DataTableComponent(windowRef, elementRef, changeDetectorRef, ngZone, renderer) {
var _this = this;
this.windowRef = windowRef;
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.ngZone = ngZone;
this.renderer = renderer;
/**
* 【可选】默认表格使用的表格类型，可选值为'cell'
*/
this.editModel = 'cell';
/**
* 表格类型,striped表现为条纹间隔
*/
this.type = '';
/**
* 表格是否开启鼠标hover行高亮效果
*/
this.hover = true;
/**
* 表格宽度
*/
this.tableWidth = '100%';
/**
* 【可选】多列选择数组，用来指导那几列会被排序
*/
this.multiSort = [];
/**
* 【可选】用来自定义不可拖拽的前几列
*/
this.colDropFreezeTo = 0;
/**
* 【可选】同时绑定单击、双击事件时，用于区分点击的时间间隔,默认300ms，两个事件不同时使用可以指定为0
*/
this.timeout = 300;
/**
* 【可选】是否显示排序未激活图标，默认显示,
*/
this.showSortIcon = true;
/**
* 多列选择Change事件，用来更新多列选择数组
*
*/
this.multiSortChange = new EventEmitter();
/**
* 表格单元格点击事件
*/
this.cellClick = new EventEmitter();
/**
* 表格单元格双击事件
*/
this.cellDBClick = new EventEmitter();
/**
* 表格行点击事件
*/
this.rowClick = new EventEmitter();
/**
* 表格行双击事件
*/
this.rowDBClick = new EventEmitter();
/**
* 行detail toggle事件
*/
this.detialToggle = new EventEmitter();
/**
* 表格单元格开始编辑事件
*/
this.cellEditStart = new EventEmitter();
/**
* 表格单元格结束编辑事件
*/
this.cellEditEnd = new EventEmitter();
/**
* 某行的勾选状态变化事件
*/
this.rowCheckChange = new EventEmitter();
/**
* 当前页码全勾选状态变化事件
*/
this.checkAllChange = new EventEmitter();
/**
* 页码变化事件
*/
this.pageIndexChange = new EventEmitter();
/**
* 延迟懒加载完成事件
*/
this.loadMore = new EventEmitter();
/**
* 列宽变化事件
*/
this.resize = new EventEmitter();
/**
* 当前表格层级，默认为0，在树形表格场景下自增长
*/
this.tableLevel = 0;
/**
* 配置树形表格的父子选中是否互相关联
* upward：选中子关联父
* downward： 选中父关联子
*/
this.checkableRelation = { upward: true, downward: true };
/**
* 子列表关闭事件
*/
this.childrenTableClose = new EventEmitter();
/**
* 全部子列表关闭事件
*/
this.allChildrenTableClose = new EventEmitter();
this._dataSource = [];
this._pageAllChecked = false;
this.selectable = true;
this.allChecked = [];
this.documentClickEvent = new EventEmitter();
this.cellEditorClickEvent = new EventEmitter();
this._hideColumn = [];
this._lazy = false;
this.scrollStream = new EventEmitter();
this.searchQueryChange = new EventEmitter();
this.halfChecked = false;
this.tableStatusEnum = {
open: true,
close: false
};
this.scrollY = 0;
// 判断数据是否存在选中状态
this.hasChecked = (/**
* @param {?} data
* @return {?}
*/
function (data) {
if (data.$checked) {
return true;
}
if (data.children) {
return data.children.some(_this.hasChecked);
}
});
// 判断数据是否存在未选中状态
this.hasUnChecked = (/**
* @param {?} data
* @return {?}
*/
function (data) {
if (!data.$checked) {
return true;
}
if (data.children) {
return data.children.some(_this.hasUnChecked);
}
});
}
Object.defineProperty(DataTableComponent.prototype, "resizeBar", {
set: /**
* @param {?} content
* @return {?}
*/
function (content) {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
_this.resizeBarRefElement = content;
if (!_this.changeDetectorRef['destroyed']) {
_this.changeDetectorRef.detectChanges();
}
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableComponent.prototype, "dataSource", {
get: /**
* @return {?}
*/
function () {
return this._dataSource;
},
set: /**
* @param {?} dataSource
* @return {?}
*/
function (dataSource) {
if (null === dataSource || !dataSource) {
dataSource = [];
}
this._dataSource = dataSource;
/** @type {?} */
var hasChecked = this.dataSource.some(this.hasChecked);
/** @type {?} */
var hasUnChecked = this.dataSource.some(this.hasUnChecked);
this._pageAllChecked = dataSource && dataSource.length > 0 && !hasUnChecked;
this.halfChecked = hasChecked && hasUnChecked;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableComponent.prototype, "hideColumn", {
get: /**
* @return {?}
*/
function () {
return this._hideColumn;
},
set: /**
* @param {?} hideColume
* @return {?}
*/
function (hideColume) {
this._hideColumn = hideColume;
if (this._columns) {
this.updateColumns();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableComponent.prototype, "pager", {
get: /**
* @return {?}
*/
function () {
return this._pager;
},
set: /**
* @param {?} pager
* @return {?}
*/
function (pager) {
if (pager === undefined || pager === null) {
return;
}
else {
this._pager = {
total: pager.total,
pageIndex: pager.pageIndex || 1,
pageSize: pager.pageSize || 10,
maxItems: pager.maxItems || 8,
selectDirection: pager.selectDirection || 'auto'
};
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableComponent.prototype, "pageAllChecked", {
get: /**
* @return {?}
*/
function () {
return this._pageAllChecked;
},
set: /**
* @param {?} pageAllChecked
* @return {?}
*/
function (pageAllChecked) {
if (this.dataSource) {
this._dataSource = this.setCheckedStatus(this.dataSource, pageAllChecked);
}
this._pageAllChecked = pageAllChecked;
this.halfChecked = this.dataSource.some(this.hasChecked) && this.dataSource.some(this.hasUnChecked);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableComponent.prototype, "lazy", {
get: /**
* @return {?}
*/
function () {
return this._lazy;
},
set: /**
* @param {?} lazy
* @return {?}
*/
function (lazy) {
this._lazy = lazy;
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
DataTableComponent.prototype.getColumns = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var cols = this.columns
.filter((/**
* @param {?} column
* @return {?}
*/
function (column) {
return !_this.hideColumn.some((/**
* @param {?} field
* @return {?}
*/
function (field) { return column.field === field; }));
}));
cols.sort((/**
* @param {?} first
* @param {?} second
* @return {?}
*/
function (first, second) { return first.order - second.order; }));
return cols;
};
// life hook start
// life hook start
/**
* @return {?}
*/
DataTableComponent.prototype.ngOnInit =
// life hook start
/**
* @return {?}
*/
function () {
var _this = this;
if (this.lazy) {
this.pager = null;
}
this.setupScrollEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
document.addEventListener('click', _this.onDocumentClick.bind(_this));
window.addEventListener('wheel', _this.onWinScroll.bind(_this));
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onDocumentClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.documentClickEvent.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onWinScroll = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.scrollStream.emit($event);
}));
};
/**
* @return {?}
*/
DataTableComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.updateColumns();
this.columns.forEach((/**
* @param {?} col
* @return {?}
*/
function (col) {
col.orderChange.subscribe((/**
* @param {?} order
* @return {?}
*/
function (order) {
_this.updateColumns();
}));
}));
this.columns.changes.subscribe((/**
* @return {?}
*/
function () {
_this.updateColumns();
}));
};
/**
* @private
* @return {?}
*/
DataTableComponent.prototype.updateColumns = /**
* @private
* @return {?}
*/
function () {
this._columns = this.getColumns();
};
/**
* @private
* @return {?}
*/
DataTableComponent.prototype.getScrollbarWidth = /**
* @private
* @return {?}
*/
function () {
if (this.tableBodyEl) {
/** @type {?} */
var inner = this.tableBodyEl.nativeElement.parentNode;
/** @type {?} */
var outer = inner.parentNode;
// Calculating difference between container's full width and the child width
return (outer.offsetWidth - inner.offsetWidth);
}
};
/**
* @return {?}
*/
DataTableComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.unSubscription();
};
/**
* @param {?} column
* @return {?}
*/
DataTableComponent.prototype.onHandleSort = /**
* @param {?} column
* @return {?}
*/
function (column) {
// set column direction
for (var i = 0; i < this.multiSort.length; i++) {
if (this.multiSort[i].field === column.field) {
this.multiSort[i].direction = column.direction;
break;
}
}
if (this.multiSort) {
/** @type {?} */
var multiSortIndex = this.multiSort.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.field === column.field; }));
if (multiSortIndex !== -1) {
this.multiSort.splice(multiSortIndex, 1);
}
if (column.direction === '') {
this.multiSortChange.emit(this.multiSort);
return;
}
if (!this.onlyOneColumnSort) {
this.multiSort.push(column);
}
else {
this.multiSort = [column];
}
}
else {
this.multiSort = [column];
}
this.multiSortChange.emit(this.multiSort);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onCellClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
this.selectedRowItem = $event.rowItem;
this.selectedColumnItem = $event.column;
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.cellClick.emit($event);
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onCellEditStart = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.isCellEdit = true;
this.cellEditStart.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onCellEditEnd = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.isCellEdit = false;
this.cellEditEnd.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onCellDBClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.cellDBClick.emit($event);
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onRowClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
this.selectedRowItem = $event.rowItem;
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.rowClick.emit($event);
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onRowDBClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.rowDBClick.emit($event);
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onDetailToggle = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.detialToggle.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onRowCheckChange = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
// 处理children的选中
if ($event.rowItem.children && this.checkableRelation.downward) {
this.setCheckedStatus($event.rowItem.children, $event.checked);
}
// 处理parents的选中
if (this.checkableRelation.upward) {
/** @type {?} */
var nestedIndexArray = $event.nestedIndex.split(',');
nestedIndexArray.shift();
/** @type {?} */
var nestedIndexArrayToInt = nestedIndexArray.map((/**
* @param {?} value
* @return {?}
*/
function (value) {
// tslint:disable-next-line:radix
return parseInt(value);
}));
// 通过选中行的父级索引设置父的选中状态
this.setParentCheckStatus(nestedIndexArrayToInt);
}
// 处理整个table header的选中
/** @type {?} */
var hasChecked = this.dataSource.some(this.hasChecked);
if ($event) {
/** @type {?} */
var hasUnChecked = this.dataSource.some(this.hasUnChecked);
this._pageAllChecked = !hasUnChecked;
this.halfChecked = hasChecked && hasUnChecked;
}
else {
this._pageAllChecked = false;
this.halfChecked = hasChecked;
}
this.rowCheckChange.emit($event);
};
/**
* @private
* @param {?} nestedIndex
* @return {?}
*/
DataTableComponent.prototype.setParentCheckStatus = /**
* @private
* @param {?} nestedIndex
* @return {?}
*/
function (nestedIndex) {
if (nestedIndex.length > 0) {
/** @type {?} */
var topIndex = nestedIndex[0];
/** @type {?} */
var topParent = this.dataSource[topIndex];
/** @type {?} */
var argNestedIndex = tslib_1.__spread(nestedIndex);
argNestedIndex.shift();
/** @type {?} */
var lastParent = this.findLastParent(topParent, argNestedIndex);
this.setSelfCheckStatus(lastParent);
nestedIndex.pop();
if (nestedIndex.length > 0) {
this.setParentCheckStatus(nestedIndex);
}
}
};
/**
* @private
* @param {?} source
* @param {?} indexArray
* @return {?}
*/
DataTableComponent.prototype.findLastParent = /**
* @private
* @param {?} source
* @param {?} indexArray
* @return {?}
*/
function (source, indexArray) {
if (source && indexArray.length > 0) {
/** @type {?} */
var topIndex = indexArray[0];
/** @type {?} */
var topParent = source.children[topIndex];
indexArray.shift();
return this.findLastParent(topParent, indexArray);
}
else {
return source;
}
};
/**
* @private
* @param {?} data
* @return {?}
*/
DataTableComponent.prototype.setSelfCheckStatus = /**
* @private
* @param {?} data
* @return {?}
*/
function (data) {
if (data && data.children) {
/** @type {?} */
var hasUnChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
function (child) {
return !child.$checked;
}));
/** @type {?} */
var hasChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
function (child) {
return child.$checked || child.$halfChecked;
}));
data.$checked = !hasUnChecked;
data.$halfChecked = hasUnChecked && hasChecked;
}
};
/**
* @private
* @param {?} data
* @param {?} checked
* @return {?}
*/
DataTableComponent.prototype.setCheckedStatus = /**
* @private
* @param {?} data
* @param {?} checked
* @return {?}
*/
function (data, checked) {
var _this = this;
return data.map((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (!item.$disabled) {
item.$checked = checked;
item.$halfChecked = false;
}
if (item.children) {
item.children = _this.setCheckedStatus(item.children, checked);
}
return item;
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onCheckAllChange = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.pageAllChecked = $event;
this.checkAllChange.emit($event);
// this.changeDetectorRef.markForCheck();
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onSearchQueryChange = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.searchQueryChange.emit($event);
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onPageChange = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.pageIndexChange.emit({ pageIndex: $event, pageSize: this.pager.pageSize });
};
/**
* @return {?}
*/
DataTableComponent.prototype.getSelectedRowItem = /**
* @return {?}
*/
function () {
return this.selectedRowItem;
};
/**
* @param {?} complete
* @return {?}
*/
DataTableComponent.prototype.loadFinish = /**
* @param {?} complete
* @return {?}
*/
function (complete) {
var _this = this;
if (complete) {
return this.unSubscription();
}
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) { return _this.onWinScroll(null); }), 300);
};
/**
* @return {?}
*/
DataTableComponent.prototype.onScrollChange = /**
* @return {?}
*/
function () {
/** @type {?} */
var winHeight = this.windowRef.innerHeight;
/** @type {?} */
var clientRect = this.windowRef.getBoundingClientRect(this.elementRef);
if (clientRect && winHeight - clientRect.bottom >= 40) {
this.loadMore.emit(this);
}
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.beginResizeHandlerEvent = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.onDocumentClick($event);
};
/**
* @param {?} __0
* @return {?}
*/
DataTableComponent.prototype.onResizingFixedHandler = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _this = this;
var column = _a.column, width = _a.width, nextElementWidth = _a.nextElementWidth;
this._columns = this._columns.map((/**
* @param {?} _column
* @param {?} index
* @return {?}
*/
function (_column, index) {
if (_column.field === column.field) {
_this.ngZone.run((/**
* @return {?}
*/
function () {
if (index + 1 < _this._columns.length && _this._columns[index + 1].width && _column.width) {
_this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
}
_column.width = width + 'px';
}));
return _column;
}
return _column;
}));
};
/**
* @param {?} __0
* @return {?}
*/
DataTableComponent.prototype.handleDragTable = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _this = this;
var from = _a.from, to = _a.to;
/** @type {?} */
var sortArray = (/**
* @param {?} array
* @param {?} fromE
* @param {?} toE
* @return {?}
*/
function (array, fromE, toE) {
if (fromE < toE) {
/** @type {?} */
var fromEData_1 = array[fromE];
var _loop_1 = function (i) {
if (i >= fromE && i < toE) {
_this.ngZone.run((/**
* @return {?}
*/
function () {
array[i] = array[i + 1];
}));
}
};
for (var i = 0; i < array.length; i++) {
_loop_1(i);
}
_this.ngZone.run((/**
* @return {?}
*/
function () {
array[toE] = fromEData_1;
}));
}
if (fromE > toE) {
/** @type {?} */
var fromEData = array[fromE];
for (var i = array.length; i > 0; i--) {
if (i <= fromE && i > toE) {
array[i] = array[i - 1];
}
}
array[toE] = fromEData;
}
});
sortArray(this._columns, from, to);
this._columns.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
function (item, index) {
item.order = index;
}));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableComponent.prototype.onResizeHandler = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
var width = $event.width, field = $event.field, isUserDefined = $event.isUserDefined, nextElementWidth = $event.nextElementWidth;
this._columns = this._columns.map((/**
* @param {?} column
* @param {?} index
* @return {?}
*/
function (column, index) {
if (column.field === field) {
_this.ngZone.run((/**
* @return {?}
*/
function () {
if (index + 1 < _this._columns.length && _this._columns[index + 1].width && column.width) {
_this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
}
column.width = parseInt(width, 10) + 'px';
/** @type {?} */
var columnResizeEventArg = { currentColumn: column, nextColumn: _this._columns[index + 1] };
_this.resize.emit(columnResizeEventArg);
}));
return column;
}
return column;
}));
this.changeDetectorRef.markForCheck();
};
/**
* @param {?} event
* @return {?}
*/
DataTableComponent.prototype.onBodyScroll = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var target = (/** @type {?} */ (event.target));
if (this.isCellEdit) {
// Y轴滚动距离超过tr高度时取消目前编辑状态
if (this.scrollY === 0) {
this.scrollY = target.scrollTop;
}
/** @type {?} */
var offset = target.scrollTop - this.scrollY;
if (offset > 40 || offset < -40) {
this.cancelEditingStatus();
this.scrollY = 0;
}
}
/** @type {?} */
var scrollLeft = target.scrollLeft;
if (scrollLeft === 0) {
if (target.clientWidth === target.scrollWidth) {
this.setScrollViewClass('none');
}
else {
this.setScrollViewClass('left');
}
}
else if (scrollLeft + target.clientWidth === target.scrollWidth) {
this.setScrollViewClass('right');
}
else {
this.setScrollViewClass('middle');
}
if (this.fixHeader) {
((/** @type {?} */ (this.fixHeaderContainerRefElement.nativeElement))).scrollLeft = scrollLeft;
}
};
/**
* @private
* @param {?} position
* @return {?}
*/
DataTableComponent.prototype.setScrollViewClass = /**
* @private
* @param {?} position
* @return {?}
*/
function (position) {
/** @type {?} */
var element = this.tableViewRefElement.nativeElement;
/** @type {?} */
var className = 'devui-talbe-scorll-' + position;
/** @type {?} */
var elClassList = element.classList;
if (!elClassList.contains(className)) {
for (var index = 0; index < elClassList.length; index++) {
/** @type {?} */
var clName = elClassList[index];
if (clName.startsWith('devui-talbe-scorll-')) {
this.renderer.removeClass(element, clName);
}
}
this.renderer.addClass(element, className);
}
};
/**
* @private
* @return {?}
*/
DataTableComponent.prototype.unSubscription = /**
* @private
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
if (this.colSubscription) {
this.colSubscription.unsubscribe();
this.colSubscription = null;
}
};
/**
* @private
* @return {?}
*/
DataTableComponent.prototype.setupScrollEvent = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.subscription) {
this.subscription = this.registerOnScrollStream(this.scrollStream)
.subscribe((/**
* @param {?} _
* @return {?}
*/
function (_) { return _this.onScrollChange(); }));
}
};
/**
* @private
* @param {?} scrollStream
* @return {?}
*/
DataTableComponent.prototype.registerOnScrollStream = /**
* @private
* @param {?} scrollStream
* @return {?}
*/
function (scrollStream) {
return scrollStream
.pipe(debounceTime(300), distinctUntilChanged());
};
/**
* @param {?} rowItem
* @param {?} status
* @return {?}
*/
DataTableComponent.prototype.onToggleChildrenTable = /**
* @param {?} rowItem
* @param {?} status
* @return {?}
*/
function (rowItem, status) {
var _this = this;
if (status === this.tableStatusEnum.open) {
/** @type {?} */
var loadChildrenResult = Promise.resolve(true);
if (this.loadChildrenTable) {
loadChildrenResult = this.loadChildrenTable(rowItem);
}
loadChildrenResult.then((/**
* @return {?}
*/
function () {
// 异步加载子表格是检查选中状态
if (rowItem.$checked && _this.checkableRelation.downward) {
_this.setCheckedStatus(rowItem.children, rowItem.$checked);
}
}));
}
else {
this.childrenTableClose.emit(rowItem);
}
};
/**
* @private
* @param {?} data
* @param {?} open
* @return {?}
*/
DataTableComponent.prototype.setChildrenToogleStatus = /**
* @private
* @param {?} data
* @param {?} open
* @return {?}
*/
function (data, open) {
var _this = this;
return data.map((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.children) {
item.$isChildTableOpen = open;
item.children = _this.setChildrenToogleStatus(item.children, open);
}
return item;
}));
};
// 切换表头的子表格展开收起
// 切换表头的子表格展开收起
/**
* @param {?} status
* @return {?}
*/
DataTableComponent.prototype.onToggleAllChildrenTable =
// 切换表头的子表格展开收起
/**
* @param {?} status
* @return {?}
*/
function (status) {
var _this = this;
if (status === this.tableStatusEnum.open) {
/** @type {?} */
var loadAllChildrenResult = Promise.resolve(true);
if (this.loadAllChildrenTable) {
loadAllChildrenResult = this.loadAllChildrenTable();
}
loadAllChildrenResult.then((/**
* @return {?}
*/
function () {
_this.dataSource.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.$checked && item.children) {
_this.setCheckedStatus(item.children, true);
}
}));
_this.setChildrenToogleStatus(_this.dataSource, status);
}));
}
else {
this.setChildrenToogleStatus(this.dataSource, status);
this.allChildrenTableClose.emit();
}
};
/**
* @return {?}
*/
DataTableComponent.prototype.cancelEditingStatus = /**
* @return {?}
*/
function () {
this.documentClickEvent.emit('cancel');
};
/**
* @private
* @param {?} dist
* @param {?} source
* @return {?}
*/
DataTableComponent.prototype.collectCheckedRows = /**
* @private
* @param {?} dist
* @param {?} source
* @return {?}
*/
function (dist, source) {
var _this = this;
source.forEach((/**
* @param {?} row
* @return {?}
*/
function (row) {
if (row.$checked) {
dist.push(row);
}
if (row.children) {
_this.collectCheckedRows(dist, row.children);
}
}));
};
/**
* @return {?}
*/
DataTableComponent.prototype.getCheckedRows = /**
* @return {?}
*/
function () {
if (this.checkableRelation.upward) {
// 如果children的选中状态关联parent的选中状态,只需返回最外层的数据
return this.dataSource ? this.dataSource.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.$checked || item.$halfChecked; })) : [];
}
else {
// 如果children的选中状态不关联parent的选中状态,遍历dataSource,将所有的选中行平级返回
/** @type {?} */
var checkedRows = [];
this.collectCheckedRows(checkedRows, this.dataSource);
return checkedRows;
}
};
DataTableComponent.decorators = [
{ type: Component, args: [{
selector: 'd-data-table',
template: "<div class=\"devui-data-table {{ cssClass }}\">\r\n <div class=\"devui-table-view\" #tableView>\r\n <div\r\n *ngIf=\"fixHeader\"\r\n #fixHeaderContainerRef\r\n class=\"table-wrap\"\r\n [style.overflow]=\"'hidden'\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n >\r\n <table\r\n #fixHeaderTableRef\r\n class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }} {{ fixHeader ? 'table-fix-header' : '' }}\"\r\n [style.table-layout]=\"'fixed'\"\r\n >\r\n <ng-template [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n </table>\r\n </div>\r\n\r\n <div\r\n cdkScrollable\r\n *ngIf=\"!virtualScroll || dataSource.length === 0; else scrollViewTpl\"\r\n class=\"devui-scrollbar\"\r\n [ngClass]=\"{ 'scroll-view': scrollable }\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n <div [ngClass]=\"{ 'table-wrap': !fixHeader }\">\r\n <ng-template [ngTemplateOutlet]=\"tableviewTpl\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-view-footer text-right\" *ngIf=\"pager\">\r\n <d-data-table-pager [pager]=\"pager\" [pagerTemplate]=\"pagerTemplate\"></d-data-table-pager>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!dataSource?.length && noResultTemplate != null\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\r\n</ng-container>\r\n\r\n<ng-template #scrollViewTpl>\r\n <cdk-virtual-scroll-viewport\r\n [ngStyle]=\"{ height: maxHeight }\"\r\n [itemSize]=\"40\"\r\n class=\"devui-scrollbar table-wrap viewport-wrapper\"\r\n [ngClass]=\"{ 'scroll-view': scrollable }\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n <table #tableBody class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }}\" [style.table-layout]=\"'fixed'\">\r\n <ng-template *ngIf=\"!fixHeader\" [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n <tbody\r\n dDataTableBody\r\n [dataSource]=\"dataSource\"\r\n [resizeable]=\"resizeable\"\r\n [columns]=\"_columns\"\r\n [checkable]=\"checkable\"\r\n [allChecked]=\"_pageAllChecked\"\r\n [selectable]=\"selectable\"\r\n [editModel]=\"editModel\"\r\n [editRowItem]=\"editRowItem\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [detailTemplateRef]=\"detailTemplateRef\"\r\n [timeout]=\"timeout\"\r\n [type]=\"type\"\r\n [hover]=\"hover\"\r\n [tableLevel]=\"tableLevel\"\r\n [virtualScroll]=\"virtualScroll\"\r\n ></tbody>\r\n <tfoot *ngIf=\"footTemplate\" dDataTableFoot [footTemplate]=\"footTemplate\"></tfoot>\r\n <div #resizeBar class=\"resize-bar\"></div>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #headerTpl>\r\n <thead\r\n dDataTableHead\r\n [resizeable]=\"resizeable\"\r\n [resizeBarRefElement]=\"resizeBarRefElement\"\r\n [tableViewRefElement]=\"tableViewRefElement\"\r\n [multiSort]=\"multiSort\"\r\n [columns]=\"_columns\"\r\n [headTemplate]=\"headTemplate\"\r\n [pager]=\"pager\"\r\n [pageAllChecked]=\"_pageAllChecked\"\r\n [checkable]=\"checkable\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [showSortIcon]=\"showSortIcon\"\r\n (resizeHandlerEvent)=\"onResizeHandler($event)\"\r\n (headClickSortEvent)=\"onHandleSort($event)\"\r\n [halfChecked]=\"halfChecked\"\r\n [tableBodyEl]=\"tableBodyEl\"\r\n [maxHeight]=\"maxHeight\"\r\n (beginResizeHandlerEvent)=\"beginResizeHandlerEvent($event)\"\r\n (resizingHandlerEvent)=\"onResizingFixedHandler($event)\"\r\n [fixHeader]=\"fixHeader\"\r\n (dragTableEndEvent)=\"handleDragTable($event)\"\r\n [dataSource]=\"dataSource\"\r\n [colDropFreezeTo]=\"colDropFreezeTo\"\r\n [colDraggable]=\"colDraggable\"\r\n ></thead>\r\n <tbody *ngIf=\"headerExpandConfig?.expand\">\r\n <tr>\r\n <td *ngIf=\"checkable\"></td>\r\n <td *ngIf=\"showExpandToggle\"></td>\r\n <td [attr.colspan]=\"columns.length\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"headerExpandConfig?.expandTemplateRef || default\"\r\n [ngTemplateOutletContext]=\"{$implicit: this, columns: columns}\"\r\n >\r\n </ng-template>\r\n <ng-template #default>\r\n <div>{{ headerExpandConfig?.description }}</div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n</ng-template>\r\n\r\n<ng-template #tableviewTpl>\r\n <table #tableBody class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }}\" [style.table-layout]=\"'fixed'\">\r\n <ng-template *ngIf=\"!fixHeader\" [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n <tbody\r\n dDataTableBody\r\n [dataSource]=\"dataSource\"\r\n [resizeable]=\"resizeable\"\r\n [columns]=\"_columns\"\r\n [checkable]=\"checkable\"\r\n [allChecked]=\"_pageAllChecked\"\r\n [selectable]=\"selectable\"\r\n [editModel]=\"editModel\"\r\n [editRowItem]=\"editRowItem\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [detailTemplateRef]=\"detailTemplateRef\"\r\n [timeout]=\"timeout\"\r\n [type]=\"type\"\r\n [hover]=\"hover\"\r\n [tableLevel]=\"tableLevel\"\r\n [virtualScroll]=\"false\"\r\n ></tbody>\r\n <tfoot *ngIf=\"footTemplate\" dDataTableFoot [footTemplate]=\"footTemplate\"></tfoot>\r\n <div #resizeBar class=\"resize-bar\"></div>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template #fixColumnHeaderTemplate>\r\n <thead\r\n dDataTableHead\r\n [resizeBarRefElement]=\"resizeBarRefElement\"\r\n [tableViewRefElement]=\"tableViewRefElement\"\r\n [multiSort]=\"multiSort\"\r\n [columns]=\"_columns\"\r\n [headTemplate]=\"headTemplate\"\r\n [pager]=\"pager\"\r\n [pageAllChecked]=\"_pageAllChecked\"\r\n [checkable]=\"checkable\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [showSortIcon]=\"showSortIcon\"\r\n (onResizeHandler)=\"onResizeHandler($event)\"\r\n (onHeadClickSort)=\"onHandleSort($event)\"\r\n [halfChecked]=\"halfChecked\"\r\n [tableBodyEl]=\"tableBodyEl\"\r\n [maxHeight]=\"maxHeight\"\r\n (beginResizeHandlerEvent)=\"beginResizeHandlerEvent($event)\"\r\n (resizingHandlerEvent)=\"onResizingFixedHandler($event)\"\r\n [fixHeader]=\"fixHeader\"\r\n (dragTableEndEvent)=\"handleDragTable($event)\"\r\n [dataSource]=\"dataSource\"\r\n ></thead>\r\n</ng-template>\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'dataTable',
styles: [":host{display:block}.devui-data-table ::ng-deep{border:none}.devui-data-table ::ng-deep .devui-table-view{padding:0;border:none;position:relative}.devui-data-table ::ng-deep .devui-table-view .scroll-view{overflow-y:auto;overflow-x:auto}.devui-data-table ::ng-deep .devui-table-view .devui-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;max-width:100%;position:relative;margin:0}.devui-data-table ::ng-deep .devui-table-view .devui-table>tbody+tbody{border-top:none}.devui-data-table ::ng-deep .devui-table-view .resize-bar{top:0;bottom:0;position:absolute;cursor:col-resize;background:#575d6c;width:2px;z-index:9999;display:none}.devui-data-table ::ng-deep .devui-table-view .resize-overlay{position:absolute;display:block;top:0;left:0;bottom:0;right:0;z-index:1000}.devui-data-table ::ng-deep .devui-table-view-footer{border:none;margin:0}.devui-data-table ::ng-deep .table-wrap{padding-top:8px}.devui-table ::ng-deep thead span{font-weight:700;color:#252b3a;font-size:14px}.devui-table ::ng-deep thead tr{background-color:#fff}.devui-table ::ng-deep thead tr th{text-align:left;position:relative;background-clip:padding-box!important;vertical-align:middle;border-bottom:1px solid #adb0b8;display:table-cell;padding:0 8px 0 2px;font-size:0;background-color:inherit}.devui-table ::ng-deep thead tr th .drag-icon{display:inline-block;vertical-align:middle;margin-right:2px;visibility:hidden}.devui-table ::ng-deep thead tr th .drag-icon+.childtable-toggler{padding-right:4px;vertical-align:middle}.devui-table ::ng-deep thead tr th .drag-icon+.childtable-toggler>.customized-icon{font-size:14px}.devui-table ::ng-deep thead tr th>*{display:inline-block}.devui-table ::ng-deep thead tr th .parent-title,.devui-table ::ng-deep thead tr th .title{display:inline-block;width:calc(100% - 16px - 2px);line-height:36px;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px}.devui-table ::ng-deep thead tr th .title.can-filter{width:calc(100% - 16px - 2px - 16px)}.devui-table ::ng-deep thead tr th .childtable-toggler+.title{width:calc(100% - 16px - 2px - 20px)}.devui-table ::ng-deep thead tr th .childtable-toggler+.title.can-filter{width:calc(100% - 16px - 2px - 16px - 20px)}.devui-table ::ng-deep thead tr th .sort-clickable{position:absolute;top:-16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding:8px}.devui-table ::ng-deep thead tr th.hover,.devui-table ::ng-deep thead tr th:hover{border-radius:2px 0 0 2px}.devui-table ::ng-deep thead tr th.hover .filter-icon,.devui-table ::ng-deep thead tr th:hover .filter-icon{visibility:visible}.devui-table ::ng-deep thead tr th.hover .sort-icon-default,.devui-table ::ng-deep thead tr th:hover .sort-icon-default{visibility:visible}.devui-table ::ng-deep thead tr th.operable:hover{background-color:#f2f5fc}.devui-table ::ng-deep thead tr th.sindu_handle.hover,.devui-table ::ng-deep thead tr th.sindu_handle:hover{border-radius:2px 0 0 2px}.devui-table ::ng-deep thead tr th.sindu_handle.hover .drag-icon,.devui-table ::ng-deep thead tr th.sindu_handle:hover .drag-icon{visibility:visible}.devui-table ::ng-deep thead tr th.sindu_handle.hover .hidden-icon.drag-icon,.devui-table ::ng-deep thead tr th.sindu_handle:hover .hidden-icon.drag-icon{visibility:hidden}.devui-table ::ng-deep thead tr th.gutter{margin:0;padding:0}.devui-table ::ng-deep thead tr th.gutter:hover{background:0 0}.devui-table ::ng-deep thead tr th.devui-checkable-cell{width:36px;padding:10px}.devui-table ::ng-deep thead tr th.devui-detail-cell{width:36px;text-align:center;padding:0;cursor:pointer}.devui-table ::ng-deep thead tr th.devui-sticky-left-cell,.devui-table ::ng-deep thead tr th.devui-sticky-right-cell{position:-webkit-sticky;position:sticky;z-index:1}.devui-table ::ng-deep thead tr .sort-active{background:#f2f5fc;border-radius:2px 0 0 2px}.devui-table ::ng-deep tbody>tr{background:#fff}.devui-table ::ng-deep tbody>tr.table-row-selected{background:#f2f5fc}.devui-table ::ng-deep tbody>tr>td{position:relative;background-clip:padding-box;vertical-align:middle;padding:7px 8px 8px 20px;border-top:none;word-wrap:break-word;word-break:normal;line-height:24px;font-size:14px;color:#252b3a;background-color:inherit;border-bottom:1px solid #dfe1e6}.devui-table ::ng-deep tbody>tr>td.devui-checkable-cell{width:36px;padding:10px}.devui-table ::ng-deep tbody>tr>td.devui-detail-cell{width:36px;text-align:center;padding:0;cursor:pointer}.devui-table ::ng-deep tbody>tr>td.devui-sticky-left-cell,.devui-table ::ng-deep tbody>tr>td.devui-sticky-right-cell{position:-webkit-sticky;position:sticky;z-index:1}.devui-table ::ng-deep tbody>tr>td a{color:#252b3a}.devui-table ::ng-deep td,.devui-table ::ng-deep th{position:relative}.devui-table ::ng-deep td:first-child,.devui-table ::ng-deep th:first-child{margin:0 5px}.devui-table ::ng-deep .clickable{cursor:pointer;vertical-align:middle}.devui-table ::ng-deep .devui-checkbox-material{margin-right:0}.devui-table ::ng-deep .d-checkbox>label{margin:auto}.devui-table ::ng-deep .resize-handle{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize}.devui-table ::ng-deep th.resizeable.last-resize-header .resize-handle{border-right:1px solid transparent}.devui-table ::ng-deep .resizeable.last-resize-header:hover .resize-handle,.devui-table ::ng-deep .resizeable:hover .resize-handle{border-right:3px solid #adb0b8}.devui-table.table-striped ::ng-deep tbody>tr:nth-of-type(odd){background:#f8f8f8}.devui-table.table-hover ::ng-deep tbody>tr:hover{background:#f2f5fc}:host ::ng-deep .devui-toggle-childtable{cursor:pointer;margin-right:5px}:host ::ng-deep .devui-toggle-childtable>svg{vertical-align:middle}:host ::ng-deep .devui-toggle-childtable>svg>g>path{fill:#8a8e99}:host ::ng-deep .full-width{width:100%}:host ::ng-deep .hover-bg{background:#f2f5fc;pointer-events:none}:host ::ng-deep .hover-bg+th{pointer-events:none}:host ::ng-deep .table-view-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:col-resize}:host ::ng-deep .edit-padding-fix{margin-top:-6px;margin-bottom:-6px}:host ::ng-deep .childtable-toggler{cursor:pointer}:host ::ng-deep .childtable-toggler>svg{vertical-align:middle}: