@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,184 lines (1,183 loc) • 120 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: data-table.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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';
export class DataTableComponent {
/**
* @param {?} windowRef
* @param {?} elementRef
* @param {?} changeDetectorRef
* @param {?} ngZone
* @param {?} renderer
*/
constructor(windowRef, elementRef, changeDetectorRef, ngZone, renderer) {
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 {?}
*/
(data) => {
if (data.$checked) {
return true;
}
if (data.children) {
return data.children.some(this.hasChecked);
}
});
// 判断数据是否存在未选中状态
this.hasUnChecked = (/**
* @param {?} data
* @return {?}
*/
(data) => {
if (!data.$checked) {
return true;
}
if (data.children) {
return data.children.some(this.hasUnChecked);
}
});
}
/**
* @param {?} content
* @return {?}
*/
set resizeBar(content) {
setTimeout((/**
* @return {?}
*/
() => {
this.resizeBarRefElement = content;
if (!this.changeDetectorRef['destroyed']) {
this.changeDetectorRef.detectChanges();
}
}));
}
/**
* @param {?} dataSource
* @return {?}
*/
set dataSource(dataSource) {
if (null === dataSource || !dataSource) {
dataSource = [];
}
this._dataSource = dataSource;
/** @type {?} */
const hasChecked = this.dataSource.some(this.hasChecked);
/** @type {?} */
const hasUnChecked = this.dataSource.some(this.hasUnChecked);
this._pageAllChecked = dataSource && dataSource.length > 0 && !hasUnChecked;
this.halfChecked = hasChecked && hasUnChecked;
}
/**
* @return {?}
*/
get dataSource() {
return this._dataSource;
}
/**
* @param {?} hideColume
* @return {?}
*/
set hideColumn(hideColume) {
this._hideColumn = hideColume;
if (this._columns) {
this.updateColumns();
}
}
/**
* @return {?}
*/
get hideColumn() {
return this._hideColumn;
}
/**
* @param {?} pager
* @return {?}
*/
set pager(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'
};
}
}
/**
* @return {?}
*/
get pager() {
return this._pager;
}
/**
* @param {?} pageAllChecked
* @return {?}
*/
set pageAllChecked(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);
}
/**
* @return {?}
*/
get pageAllChecked() {
return this._pageAllChecked;
}
/**
* @param {?} lazy
* @return {?}
*/
set lazy(lazy) {
this._lazy = lazy;
}
/**
* @return {?}
*/
get lazy() {
return this._lazy;
}
/**
* @private
* @return {?}
*/
getColumns() {
/** @type {?} */
const cols = this.columns
.filter((/**
* @param {?} column
* @return {?}
*/
column => {
return !this.hideColumn.some((/**
* @param {?} field
* @return {?}
*/
field => column.field === field));
}));
cols.sort((/**
* @param {?} first
* @param {?} second
* @return {?}
*/
(first, second) => first.order - second.order));
return cols;
}
// life hook start
/**
* @return {?}
*/
ngOnInit() {
if (this.lazy) {
this.pager = null;
}
this.setupScrollEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
document.addEventListener('click', this.onDocumentClick.bind(this));
window.addEventListener('wheel', this.onWinScroll.bind(this));
}));
}
/**
* @param {?} $event
* @return {?}
*/
onDocumentClick($event) {
this.documentClickEvent.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onWinScroll($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.scrollStream.emit($event);
}));
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.updateColumns();
this.columns.forEach((/**
* @param {?} col
* @return {?}
*/
(col) => {
col.orderChange.subscribe((/**
* @param {?} order
* @return {?}
*/
(order) => {
this.updateColumns();
}));
}));
this.columns.changes.subscribe((/**
* @return {?}
*/
() => {
this.updateColumns();
}));
}
/**
* @private
* @return {?}
*/
updateColumns() {
this._columns = this.getColumns();
}
/**
* @private
* @return {?}
*/
getScrollbarWidth() {
if (this.tableBodyEl) {
/** @type {?} */
const inner = this.tableBodyEl.nativeElement.parentNode;
/** @type {?} */
const outer = inner.parentNode;
// Calculating difference between container's full width and the child width
return (outer.offsetWidth - inner.offsetWidth);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.unSubscription();
}
/**
* @param {?} column
* @return {?}
*/
onHandleSort(column) {
// set column direction
for (let 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 {?} */
const multiSortIndex = this.multiSort.findIndex((/**
* @param {?} item
* @return {?}
*/
item => 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 {?}
*/
onCellClick($event) {
this.selectedRowItem = $event.rowItem;
this.selectedColumnItem = $event.column;
this.ngZone.run((/**
* @return {?}
*/
() => {
this.cellClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onCellEditStart($event) {
this.isCellEdit = true;
this.cellEditStart.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onCellEditEnd($event) {
this.isCellEdit = false;
this.cellEditEnd.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onCellDBClick($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.cellDBClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onRowClick($event) {
this.selectedRowItem = $event.rowItem;
this.ngZone.run((/**
* @return {?}
*/
() => {
this.rowClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onRowDBClick($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.rowDBClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onDetailToggle($event) {
this.detialToggle.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onRowCheckChange($event) {
// 处理children的选中
if ($event.rowItem.children && this.checkableRelation.downward) {
this.setCheckedStatus($event.rowItem.children, $event.checked);
}
// 处理parents的选中
if (this.checkableRelation.upward) {
/** @type {?} */
const nestedIndexArray = $event.nestedIndex.split(',');
nestedIndexArray.shift();
/** @type {?} */
const nestedIndexArrayToInt = nestedIndexArray.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
// tslint:disable-next-line:radix
return parseInt(value);
}));
// 通过选中行的父级索引设置父的选中状态
this.setParentCheckStatus(nestedIndexArrayToInt);
}
// 处理整个table header的选中
/** @type {?} */
const hasChecked = this.dataSource.some(this.hasChecked);
if ($event) {
/** @type {?} */
const 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 {?}
*/
setParentCheckStatus(nestedIndex) {
if (nestedIndex.length > 0) {
/** @type {?} */
const topIndex = nestedIndex[0];
/** @type {?} */
const topParent = this.dataSource[topIndex];
/** @type {?} */
const argNestedIndex = [...nestedIndex];
argNestedIndex.shift();
/** @type {?} */
const lastParent = this.findLastParent(topParent, argNestedIndex);
this.setSelfCheckStatus(lastParent);
nestedIndex.pop();
if (nestedIndex.length > 0) {
this.setParentCheckStatus(nestedIndex);
}
}
}
/**
* @private
* @param {?} source
* @param {?} indexArray
* @return {?}
*/
findLastParent(source, indexArray) {
if (source && indexArray.length > 0) {
/** @type {?} */
const topIndex = indexArray[0];
/** @type {?} */
const topParent = source.children[topIndex];
indexArray.shift();
return this.findLastParent(topParent, indexArray);
}
else {
return source;
}
}
/**
* @private
* @param {?} data
* @return {?}
*/
setSelfCheckStatus(data) {
if (data && data.children) {
/** @type {?} */
const hasUnChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
(child) => {
return !child.$checked;
}));
/** @type {?} */
const hasChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
(child) => {
return child.$checked || child.$halfChecked;
}));
data.$checked = !hasUnChecked;
data.$halfChecked = hasUnChecked && hasChecked;
}
}
/**
* @private
* @param {?} data
* @param {?} checked
* @return {?}
*/
setCheckedStatus(data, checked) {
return data.map((/**
* @param {?} item
* @return {?}
*/
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 {?}
*/
onCheckAllChange($event) {
this.pageAllChecked = $event;
this.checkAllChange.emit($event);
// this.changeDetectorRef.markForCheck();
}
/**
* @param {?} $event
* @return {?}
*/
onSearchQueryChange($event) {
this.searchQueryChange.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onPageChange($event) {
this.pageIndexChange.emit({ pageIndex: $event, pageSize: this.pager.pageSize });
}
/**
* @return {?}
*/
getSelectedRowItem() {
return this.selectedRowItem;
}
/**
* @param {?} complete
* @return {?}
*/
loadFinish(complete) {
if (complete) {
return this.unSubscription();
}
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => this.onWinScroll(null)), 300);
}
/**
* @return {?}
*/
onScrollChange() {
/** @type {?} */
const winHeight = this.windowRef.innerHeight;
/** @type {?} */
const clientRect = this.windowRef.getBoundingClientRect(this.elementRef);
if (clientRect && winHeight - clientRect.bottom >= 40) {
this.loadMore.emit(this);
}
}
/**
* @param {?} $event
* @return {?}
*/
beginResizeHandlerEvent($event) {
this.onDocumentClick($event);
}
/**
* @param {?} __0
* @return {?}
*/
onResizingFixedHandler({ column, width, nextElementWidth }) {
this._columns = this._columns.map((/**
* @param {?} _column
* @param {?} index
* @return {?}
*/
(_column, index) => {
if (_column.field === column.field) {
this.ngZone.run((/**
* @return {?}
*/
() => {
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 {?}
*/
handleDragTable({ from, to }) {
/** @type {?} */
const sortArray = (/**
* @param {?} array
* @param {?} fromE
* @param {?} toE
* @return {?}
*/
(array, fromE, toE) => {
if (fromE < toE) {
/** @type {?} */
const fromEData = array[fromE];
for (let i = 0; i < array.length; i++) {
if (i >= fromE && i < toE) {
this.ngZone.run((/**
* @return {?}
*/
() => {
array[i] = array[i + 1];
}));
}
}
this.ngZone.run((/**
* @return {?}
*/
() => {
array[toE] = fromEData;
}));
}
if (fromE > toE) {
/** @type {?} */
const fromEData = array[fromE];
for (let 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 {?}
*/
(item, index) => {
item.order = index;
}));
}
/**
* @param {?} $event
* @return {?}
*/
onResizeHandler($event) {
const { width, field, isUserDefined, nextElementWidth } = $event;
this._columns = this._columns.map((/**
* @param {?} column
* @param {?} index
* @return {?}
*/
(column, index) => {
if (column.field === field) {
this.ngZone.run((/**
* @return {?}
*/
() => {
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 {?} */
const columnResizeEventArg = { currentColumn: column, nextColumn: this._columns[index + 1] };
this.resize.emit(columnResizeEventArg);
}));
return column;
}
return column;
}));
this.changeDetectorRef.markForCheck();
}
/**
* @param {?} event
* @return {?}
*/
onBodyScroll(event) {
/** @type {?} */
const target = (/** @type {?} */ (event.target));
if (this.isCellEdit) {
// Y轴滚动距离超过tr高度时取消目前编辑状态
if (this.scrollY === 0) {
this.scrollY = target.scrollTop;
}
/** @type {?} */
const offset = target.scrollTop - this.scrollY;
if (offset > 40 || offset < -40) {
this.cancelEditingStatus();
this.scrollY = 0;
}
}
/** @type {?} */
const 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 {?}
*/
setScrollViewClass(position) {
/** @type {?} */
const element = this.tableViewRefElement.nativeElement;
/** @type {?} */
const className = 'devui-talbe-scorll-' + position;
/** @type {?} */
const elClassList = element.classList;
if (!elClassList.contains(className)) {
for (let index = 0; index < elClassList.length; index++) {
/** @type {?} */
const clName = elClassList[index];
if (clName.startsWith('devui-talbe-scorll-')) {
this.renderer.removeClass(element, clName);
}
}
this.renderer.addClass(element, className);
}
}
/**
* @private
* @return {?}
*/
unSubscription() {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
if (this.colSubscription) {
this.colSubscription.unsubscribe();
this.colSubscription = null;
}
}
/**
* @private
* @return {?}
*/
setupScrollEvent() {
if (!this.subscription) {
this.subscription = this.registerOnScrollStream(this.scrollStream)
.subscribe((/**
* @param {?} _
* @return {?}
*/
_ => this.onScrollChange()));
}
}
/**
* @private
* @param {?} scrollStream
* @return {?}
*/
registerOnScrollStream(scrollStream) {
return scrollStream
.pipe(debounceTime(300), distinctUntilChanged());
}
/**
* @param {?} rowItem
* @param {?} status
* @return {?}
*/
onToggleChildrenTable(rowItem, status) {
if (status === this.tableStatusEnum.open) {
/** @type {?} */
let loadChildrenResult = Promise.resolve(true);
if (this.loadChildrenTable) {
loadChildrenResult = this.loadChildrenTable(rowItem);
}
loadChildrenResult.then((/**
* @return {?}
*/
() => {
// 异步加载子表格是检查选中状态
if (rowItem.$checked && this.checkableRelation.downward) {
this.setCheckedStatus(rowItem.children, rowItem.$checked);
}
}));
}
else {
this.childrenTableClose.emit(rowItem);
}
}
/**
* @private
* @param {?} data
* @param {?} open
* @return {?}
*/
setChildrenToogleStatus(data, open) {
return data.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.children) {
item.$isChildTableOpen = open;
item.children = this.setChildrenToogleStatus(item.children, open);
}
return item;
}));
}
// 切换表头的子表格展开收起
/**
* @param {?} status
* @return {?}
*/
onToggleAllChildrenTable(status) {
if (status === this.tableStatusEnum.open) {
/** @type {?} */
let loadAllChildrenResult = Promise.resolve(true);
if (this.loadAllChildrenTable) {
loadAllChildrenResult = this.loadAllChildrenTable();
}
loadAllChildrenResult.then((/**
* @return {?}
*/
() => {
this.dataSource.forEach((/**
* @param {?} item
* @return {?}
*/
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 {?}
*/
cancelEditingStatus() {
this.documentClickEvent.emit('cancel');
}
/**
* @private
* @param {?} dist
* @param {?} source
* @return {?}
*/
collectCheckedRows(dist, source) {
source.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
if (row.$checked) {
dist.push(row);
}
if (row.children) {
this.collectCheckedRows(dist, row.children);
}
}));
}
/**
* @return {?}
*/
getCheckedRows() {
if (this.checkableRelation.upward) {
// 如果children的选中状态关联parent的选中状态,只需返回最外层的数据
return this.dataSource ? this.dataSource.filter((/**
* @param {?} item
* @return {?}
*/
item => item.$checked || item.$halfChecked)) : [];
}
else {
// 如果children的选中状态不关联parent的选中状态,遍历dataSource,将所有的选中行平级返回
/** @type {?} */
const 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}:host ::ng-deep .childtable-toggler>svg>g>path{fill:#8a8e99}:host ::ng-deep .table.table-bordered.table-fix-header{border-bottom:0}:host ::ng-deep .table.table-bordered.table-fix-header th{border-bottom:0}:host ::ng-deep .devui-talbe-scorll-middle th .devui-sticky-left-cell,:host ::ng-deep .devui-talbe-scorll-middle tr .devui-sticky-left-cell,:host ::ng-deep .devui-talbe-scorll-right th .devui-sticky-left-cell,:host ::ng-deep .devui-talbe-scorll-right tr .devui-sticky-left-cell{box-shadow:rgba(0,0,0,.05) 6px 6px 6px 0}:host ::ng-deep .devui-talbe-scorll-left th .devui-sticky-right-cell,:host ::ng-deep .devui-talbe-scorll-left tr .devui-sticky-right-cell,:host ::ng-deep .devui-talbe-scorll-middle th .devui-sticky-right-cell,:host ::ng-deep .devui-talbe-scorll-middle tr .devui-sticky-right-cell{box-shadow:rgba(0,0,0,.05) -6px 6px 6px 0}:host ::ng-deep .gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}:host ::ng-deep .gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;box-shadow:0 2px 4px 0 var(--dark-1-boxshadow,rgba(41,48,64,.2));background-color:#fff;list-style:none}:host ::ng-deep .gu-hide{display:none!important}:host ::ng-deep .sindu_dragger{list-style:none;margin:0;padding:0;box-sizing:border-box;display:-webkit-box;display:flex}:host ::ng-deep .sindu_handle>.drag-icon{cursor:move}:host ::ng-deep .sindu_dragger li{margin:0;padding:0;list-style:none;text-align:inherit}:host ::ng-deep .sindu_dragger li table,:host ::ng-deep .sindu_dragger td,:host ::ng-deep .sindu_dragger th,:host ::ng-deep .sindu_dragger tr{box-sizing:border-box}:host ::ng-deep .sindu_dragging .sindu_origin_table{visibility:hidden}:host ::ng-deep .gu-mirror li{margin:0;padding:0;list-style:none;text-align:inherit}:host ::ng-deep .gu-mirror li table,:host ::ng-deep .gu-mirror td,:host ::ng-deep .gu-mirror th,:host ::ng-deep .gu-mirror tr{box-sizing:border-box}:host ::ng-deep .gu-transit{opacity:.5}", ":host ::ng-deep th .datatable-svg g#order-default path{fill:#dfe1e6}:host ::ng-deep th .datatable-svg g#order-desc polygon#Path-4{fill:#dfe1e6}:host ::ng-deep th .datatable-svg g#order-desc polygon#Path-4-Copy{fill:#5e7ce0}:host ::ng-deep th .datatable-svg g#order-asc polygon#Path-4{fill:#5e7ce0}:host ::ng-deep th .datatable-svg g#order-asc polygon#Path-4-Copy{fill:#dfe1e6}"]
}] }
];
/** @nocollapse */
DataTableComponent.ctorParameters = () => [
{ type: WindowRef },
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NgZone },
{ type: Renderer2 }
];
DataTableComponent.propDecorators = {
checkable: [{ type: Input }],
showExpandToggle: [{ type: Input }],
fixHeader: [{ type: Input }],
scrollable: [{ type: Input }],
editModel: [{ type: Input }],
maxWidth: [{ type: Input }],
maxHeight: [{ type: Input }],
type: [{ type: Input }],
hover: [{ type: Input }],
cssClass: [{ type: Input }],
tableWidth: [{ type: Input }],
onlyOneColumnSort: [{ type: Input }],
multiSort: [{ type: Input }],
resizeable: [{ type: Input }],
colDraggable: [{ type: Input }],
colDropFreezeTo: [{ type: Input }],
detailTemplateRef: [{ type: Input }],
timeout: [{ type: Input }],
showSortIcon: [{ type: Input }],
multiSortChange: [{ type: Output }],
cellClick: [{ type: Output }],
cellDBClick: [{ type: Output }],
rowClick: [{ type: Output }],
rowDBClick: [{ type: Output }],
detialToggle: [{ type: Output }],
beforeCellEdit: [{ type: Input }],
cellEditStart: [{ type: Output }],
cellEditEnd: [{ type: Output }],
rowCheckChange: [{ type: Output }],
checkAllChange: [{ type: Output }],
pageIndexChange: [{ type: Output }],
loadMore: [{ type: Output }],
resize: [{ type: Output }],
tableLevel: [{ type: Input }],
checkableRelation: [{ type: Input }],
loadChildrenTable: [{ type: Input }],
loadAllChildrenTable: [{ type: Input }],
virtualScroll: [{ type: Input }],
headerExpandConfig: [{ type: Input }],
childrenTableClose: [{ type: Output }],
allChildrenTableClose: [{ type: Output }],
columns: [{ type: ContentChildren, args: [DataTableColumnTmplComponent,] }],
headTemplate: [{ type: ContentChild, args: [DataTableHeadTmplComponent, { static: false },] }],
footTemplate: [{ type: ContentChild, args: [DataTableFootTmplComponent, { static: false },] }],
pagerTemplate: [{ type: ContentChild, args: [DataTablePagerTmplComponent, { static: false },] }],
noResultTemplate: [{ type: ContentChild, args: ['noResultTemplateRef', { static: false },] }],
fixHeaderContainerRefElement: [{ type: ViewChild, args: ['fixHeaderContainerRef', { static: false },] }],
fixHeaderTableRefElement: [{ type: ViewChild, args: ['fixHeaderTableRef', { static: false },] }],
tableViewRefElement: [{ type: ViewChild, args: ['tableView', { static: true },] }],
resizeBar: [{ type: ViewChild, args: ['resizeBar', { static: false },] }],
dataSource: [{ type: Input }],
hideColumn: [{ type: Input }],
pager: [{ type: Input }],
pageAllChecked: [{ type: Input }],
lazy: [{ type: Input }]
};
if (false) {
/**
* 【可选】Datatable是否提供勾选行的功能
* @type {?}
*/
DataTableComponent.prototype.checkable;
/**
* 【可选】是否提供显示行详情的功能
* @type {?}
*/
DataTableComponent.prototype.showExpandToggle;
/**
* 【可选】是否固定表头（在表格超过容器最大高度时，表格可滚动时生效）
* @type {?}
*/
DataTableComponent.prototype.fixHeader;
/**
* 【可选】表格在超出容器时，是否可以通过滚动查看表格内容
* @type {?}
*/
DataTableComponent.prototype.scrollable;
/**
* 【可选】默认表格使用的表格类型，可选值为'cell'
* @type {?}
*/
DataTableComponent.prototype.editModel;
/**
* 【可选】限制表格最大宽度，默认撑满父容器
* @type {?}
*/
DataTableComponent.prototype.maxWidth;
/**
* 【可选】限制最大高度，默认
* @type {?}
*/
DataTableComponent.prototype.maxHeight;
/**
* 表格类型,striped表现为条纹间隔
* @type {?}
*/
DataTableComponent.prototype.type;
/**
* 表格是否开启鼠标hover行高亮效果
* @type {?}
*/
DataTableComponent.prototype.hover;
/**
* 表格自定义样式
* @type {?}
*/
DataTableComponent.prototype.cssClass;
/**
* 表格宽度
* @type {?}
*/
DataTableComponent.prototype.tableWidth;
/**
* 【可选】是否限制多列排序的输出限制为一项
* @type {?}
*/
DataTableComponent.prototype.onlyOneColumnSort;
/**
* 【可选】多列选择数组，用来指导那几列会被排序
* @type {?}
*/
DataTableComponent.prototype.multiSort;
/**
* 【可选】是否可以拖拽调整列宽
* @type {?}
*/
DataTableComponent.prototype.resizeable;
/**
* 【可选】用来自定义表格是否可以拖动
* @type {?}
*/