From 007ec4cc0ffca707c144802f13f2cffff6ca1abd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Thu, 9 Jun 2022 21:19:27 +0800 Subject: [PATCH 01/12] amd Change-Id: I99bb7f1cfca7461dfe268eb08280083b2bbaf426 --- .../demo/pc/table/expand/demo.component.css | 9 +++ .../demo/pc/table/expand/demo.component.html | 19 ++++- src/jigsaw/pc-components/table/table.ts | 76 +++++++++++++++---- 3 files changed, 84 insertions(+), 20 deletions(-) diff --git a/src/app/demo/pc/table/expand/demo.component.css b/src/app/demo/pc/table/expand/demo.component.css index f313af705f..b24a3b5f40 100644 --- a/src/app/demo/pc/table/expand/demo.component.css +++ b/src/app/demo/pc/table/expand/demo.component.css @@ -5,3 +5,12 @@ .demo-buttons span { margin-right: 4px; } + +.demo-table-cntr { + display: flex; + width: 100%; +} + +.demo-table-cntr>div { + flex: 1; +} \ No newline at end of file diff --git a/src/app/demo/pc/table/expand/demo.component.html b/src/app/demo/pc/table/expand/demo.component.html index 4ab44adc7c..592e2e6ae0 100644 --- a/src/app/demo/pc/table/expand/demo.component.html +++ b/src/app/demo/pc/table/expand/demo.component.html @@ -4,8 +4,8 @@ -Table -expand +Table Expand +
展开方式 @@ -19,5 +19,16 @@ 重置数据 展开/关闭第三行
- - + +
+
+ 信息展示 + + +
+
+ 类表格数据 + + +
+
\ No newline at end of file diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index 711dfd312a..e23b1bb97d 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -15,7 +15,10 @@ QueryList, Renderer2, ViewChild, - ViewChildren + ViewChildren, + ComponentFactoryResolver, + ApplicationRef, + ViewContainerRef } from "@angular/core"; import {CommonModule} from "@angular/common"; import {Subscription} from "rxjs"; @@ -40,7 +43,7 @@ import {CallbackRemoval, CommonUtils} from "../../common/core/utils/common-utils import {IPageable, PagingInfo, SortOrder} from "../../common/core/data/component-data"; import {JigsawTrustedHtmlModule, TrustedHtmlHelper} from "../../common/directive/trusted-html/trusted-html"; import {RequireMarkForCheck} from "../../common/decorator/mark-for-check"; -import {DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer} from "./table-renderer"; +import {DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer, TableCellSwitchRenderer} from "./table-renderer"; import {TableUtils} from "./table-utils"; @WingsTheme('table.scss') @@ -59,9 +62,11 @@ import {TableUtils} from "./table-utils"; export class JigsawTable extends AbstractJigsawComponent implements OnInit, AfterViewInit, OnDestroy { constructor(private _renderer: Renderer2, private _elementRef: ElementRef, - protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, - // @RequireMarkForCheck 需要用到，勿删 - private _injector: Injector) { + protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, + // @RequireMarkForCheck 需要用到，勿删 + private _injector: Injector, + private _componentFactoryResolver: ComponentFactoryResolver, + private _applicationRef: ApplicationRef) { super(); if (CommonUtils.getBrowserType() == 'Firefox') { this._$isFFBrowser = true; @@ -324,7 +329,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte /** * @internal */ - public _$blankRow:string[] = []; + public _$blankRow: string[] = []; private _updateFillUpBlankRow(): void { this._$blankRow = []; @@ -397,7 +402,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte cd = CommonUtils.shallowCopy(cd); cd.target = field; } - columnDefines.push(cd ? cd : {target: field}); + columnDefines.push(cd ? cd : { target: field }); }); if (this._additionalColumnDefines) { @@ -566,7 +571,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte this.doubleClick.emit(rowIndex); } - @ViewChildren('tableRow', {read: ElementRef}) + @ViewChildren('tableRow', { read: ElementRef }) private _rowElementRefs: QueryList; /** @@ -711,10 +716,10 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte }) } - @ViewChild('contentScrollbar', {read: PerfectScrollbarDirective}) + @ViewChild('contentScrollbar', { read: PerfectScrollbarDirective }) public contentScrollbar: PerfectScrollbarDirective; - @ViewChild('bodyScrollbar', {read: PerfectScrollbarDirective}) + @ViewChild('bodyScrollbar', { read: PerfectScrollbarDirective }) private _bodyScrollbar: PerfectScrollbarDirective; /** @@ -903,10 +908,22 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte }); } + @ViewChildren('expandRowHost', { read: ViewContainerRef }) + protected expandRowsHost: QueryList /** * 展开行 */ public expand(rowIndex: number, rawHtml: string, rawHtmlContext?: object, options?: TableRowExpandOptions): void { + // const expandRowHost = this.expandRowsHost.toArray()[rowIndex]; + // expandRowHost.clear(); + + // let rowComponentFactory: ComponentFactory; + // rowComponentFactory = this.componentFactoryResolver.resolveComponentFactory(JigsawTableExpandRowComponent); + // const sourceComponentRef: ComponentRef = expandRowHost.createComponent(rowComponentFactory); + + // const sourceComponent = sourceComponentRef.instance; + // sourceComponent._$cellSettings = this._$cellSettings; + const rowElement = this._rowElementRefs.toArray()[rowIndex]?.nativeElement; if (!rowElement) { return; @@ -951,16 +968,43 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string, context: object, remainOpen: boolean, rowIndex: number): void { const tr = document.createElement('tr'); - const trustedEle = document.createElement('td'); + const headerEle = this._headerComponents.toArray(); - trustedEle.colSpan = headerEle.length; + // trustedEle.colSpan = headerEle.length; + tr.classList.add('jigsaw-table-row-expansion'); - tr.insertBefore(trustedEle, tr.lastElementChild); + + + for (let i = 0;i; + // sourceComponentFactory = this.componentFactoryResolver.resolveComponentFactory(TransferListSourceRenderer); + // const sourceComponentRef: ComponentRef = tr.createComponent(sourceComponentFactory); + + // const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; + + let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); + const ref = factory.create(this._injector, [], trustedEle); + ref.instance.renderer = TableCellSwitchRenderer; + + console.log(this._$cellSettings[0][0]) + const cell = this._$cellSettings[0][0]; + ref.instance.tableData = this.data; + ref.instance.additionalData = this.additionalData; + ref.instance.cellData = 1; + ref.instance.row = 0; + ref.instance.field = cell.field; + ref.instance.renderer = TableCellSwitchRenderer; + ref.instance.editable = cell.editable; + ref.instance.hostInstance = this; + this._applicationRef.attachView(ref.hostView); + tr.insertBefore(trustedEle, tr.lastElementChild); + } - const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; - trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + // const trustedHtml = ``; + // trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); - this._allExpandedRows.push({element: tr, rowIndex, remainOpen}); + this._allExpandedRows.push({ element: tr, rowIndex, remainOpen }); } private _hideExpansion(rowElement: HTMLTableRowElement): void { From 16a81ac94d856d47fc8ba94413986e2b36065dbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Fri, 10 Jun 2022 15:24:16 +0800 Subject: [PATCH 02/12] amd Change-Id: I842d7cfa0fdc8c9d2d14d1f4a7c4b6860a4df920 --- src/jigsaw/pc-components/table/table.ts | 60 ++++++++++++------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index e23b1bb97d..47500f7d22 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -966,43 +966,43 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _allExpandedRows: { element: HTMLTableRowElement, remainOpen: boolean, rowIndex: number }[] = []; - private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string, context: object, remainOpen: boolean, rowIndex: number): void { + private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | [], context: object, remainOpen: boolean, rowIndex: number): void { const tr = document.createElement('tr'); - - const headerEle = this._headerComponents.toArray(); - // trustedEle.colSpan = headerEle.length; - tr.classList.add('jigsaw-table-row-expansion'); - - for (let i = 0;i; - // sourceComponentFactory = this.componentFactoryResolver.resolveComponentFactory(TransferListSourceRenderer); - // const sourceComponentRef: ComponentRef = tr.createComponent(sourceComponentFactory); - - // const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; + trustedEle.colSpan = headerEle.length; + const trustedHtml = ``; + trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + } + + if ( rawHtml instanceof Array) { + for (let i = 0;i Date: Fri, 10 Jun 2022 21:50:52 +0800 Subject: [PATCH 03/12] amd Change-Id: I4fb1d64062d29874739ec0278be7892e29f0d6b8 --- .../demo/pc/table/expand/demo.component.html | 6 +- .../demo/pc/table/expand/demo.component.ts | 15 +++- src/jigsaw/pc-components/table/table.ts | 81 +++++++++++-------- 3 files changed, 64 insertions(+), 38 deletions(-) diff --git a/src/app/demo/pc/table/expand/demo.component.html b/src/app/demo/pc/table/expand/demo.component.html index 592e2e6ae0..892e2a8a58 100644 --- a/src/app/demo/pc/table/expand/demo.component.html +++ b/src/app/demo/pc/table/expand/demo.component.html @@ -21,14 +21,14 @@
-
+
类表格数据 - +
\ No newline at end of file diff --git a/src/app/demo/pc/table/expand/demo.component.ts b/src/app/demo/pc/table/expand/demo.component.ts index 88d85b4b9f..25e328e7fb 100644 --- a/src/app/demo/pc/table/expand/demo.component.ts +++ b/src/app/demo/pc/table/expand/demo.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from "@angular/core"; -import { TableData, ColumnDefine, JigsawTable } from "jigsaw/public_api"; +import { TableData, ColumnDefine, JigsawTable, TableCellSwitchRenderer } from "jigsaw/public_api"; @Component({ templateUrl: './demo.component.html', @@ -13,6 +13,9 @@ export class TableExpandDemoComponent { @ViewChild('tableCmp') tableCmp: JigsawTable; + @ViewChild('tableCmp2') + tableCmp2: JigsawTable; + constructor() { this.resetData(); } @@ -27,6 +30,16 @@ export class TableExpandDemoComponent { }); } + rowClick2(rowIndex: number) { + const html = ['data1', 'data2', 'data3', 'data4', 'data5', { data: false, renderer: TableCellSwitchRenderer,field:'progress' }]; + if (!html) { + return; + } + this.tableCmp2.expand(rowIndex, html, this, { + remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + }); + } + getExpansionHtml(rowIndex: number) { const data = this.tableData.data[rowIndex] if (data[1] !== '可以') { diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index 47500f7d22..b450ac1b44 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -20,14 +20,14 @@ ApplicationRef, ViewContainerRef } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {Subscription} from "rxjs"; -import {TranslateModule, TranslateService} from "@ngx-translate/core"; -import {PerfectScrollbarDirective, PerfectScrollbarModule} from "ngx-perfect-scrollbar"; -import {AbstractJigsawComponent, JigsawCommonModule, WingsTheme} from "../../common/common"; -import {JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent} from "./table-inner.components"; -import {TableData} from "../../common/core/data/table-data"; -import {AffixUtils, InternalUtils} from "../../common/core/utils/internal-utils"; +import { CommonModule } from "@angular/common"; +import { Subscription } from "rxjs"; +import { TranslateModule, TranslateService } from "@ngx-translate/core"; +import { PerfectScrollbarDirective, PerfectScrollbarModule } from "ngx-perfect-scrollbar"; +import { AbstractJigsawComponent, JigsawCommonModule, WingsTheme } from "../../common/common"; +import { JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent } from "./table-inner.components"; +import { TableData } from "../../common/core/data/table-data"; +import { AffixUtils, InternalUtils } from "../../common/core/utils/internal-utils"; import { _getColumnIndex, AdditionalColumnDefine, @@ -39,12 +39,12 @@ import { TableDataChangeEvent, TableHeadSetting, TableRowExpandOptions } from "./table-typings"; -import {CallbackRemoval, CommonUtils} from "../../common/core/utils/common-utils"; -import {IPageable, PagingInfo, SortOrder} from "../../common/core/data/component-data"; -import {JigsawTrustedHtmlModule, TrustedHtmlHelper} from "../../common/directive/trusted-html/trusted-html"; -import {RequireMarkForCheck} from "../../common/decorator/mark-for-check"; -import {DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer, TableCellSwitchRenderer} from "./table-renderer"; -import {TableUtils} from "./table-utils"; +import { CallbackRemoval, CommonUtils } from "../../common/core/utils/common-utils"; +import { IPageable, PagingInfo, SortOrder } from "../../common/core/data/component-data"; +import { JigsawTrustedHtmlModule, TrustedHtmlHelper } from "../../common/directive/trusted-html/trusted-html"; +import { RequireMarkForCheck } from "../../common/decorator/mark-for-check"; +import { DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer, TableCellSwitchRenderer } from "./table-renderer"; +import { TableUtils } from "./table-utils"; @WingsTheme('table.scss') @Component({ @@ -913,7 +913,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte /** * 展开行 */ - public expand(rowIndex: number, rawHtml: string, rawHtmlContext?: object, options?: TableRowExpandOptions): void { + public expand(rowIndex: number, rawHtml: string | TableData, rawHtmlContext?: object, options?: TableRowExpandOptions): void { // const expandRowHost = this.expandRowsHost.toArray()[rowIndex]; // expandRowHost.clear(); @@ -944,8 +944,10 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte // 已经打开了，但此时人家要求再打开，需要更新一下内容 const rowInfo = this._allExpandedRows.find(i => i?.element === rowElement.nextSibling); rowInfo.remainOpen = options?.remainOpenAfterDataChanges; - rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( - CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); + if (typeof rawHtml === 'string') { + rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( + CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); + } return; } if (!expanded && action == 'show') { @@ -966,7 +968,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _allExpandedRows: { element: HTMLTableRowElement, remainOpen: boolean, rowIndex: number }[] = []; - private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | [], context: object, remainOpen: boolean, rowIndex: number): void { + private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | TableData, context: object, remainOpen: boolean, rowIndex: number): void { const tr = document.createElement('tr'); tr.classList.add('jigsaw-table-row-expansion'); @@ -975,32 +977,43 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte if (typeof rawHtml === 'string') { const trustedEle = document.createElement('td'); trustedEle.colSpan = headerEle.length; - const trustedHtml = ``; + const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + tr.insertBefore(trustedEle, tr.lastElementChild); } - if ( rawHtml instanceof Array) { - for (let i = 0;i Date: Mon, 13 Jun 2022 13:22:53 +0800 Subject: [PATCH 04/12] amd Change-Id: I93f7b9b0d88486844f2f03f8e5e23a97184c5db5 --- src/app/demo/pc/table/expand/demo.component.ts | 16 ++++++++++++---- src/jigsaw/pc-components/table/table.ts | 3 ++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/app/demo/pc/table/expand/demo.component.ts b/src/app/demo/pc/table/expand/demo.component.ts index 25e328e7fb..997db6e649 100644 --- a/src/app/demo/pc/table/expand/demo.component.ts +++ b/src/app/demo/pc/table/expand/demo.component.ts @@ -31,13 +31,21 @@ export class TableExpandDemoComponent { } rowClick2(rowIndex: number) { - const html = ['data1', 'data2', 'data3', 'data4', 'data5', { data: false, renderer: TableCellSwitchRenderer,field:'progress' }]; + const tableData = new TableData(); + tableData.fromObject({ + data: [ + ["expand1", "expand2", "expand3", "expand4", "expand5", false], + ], + field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], + header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] + }) + const html = ['expand1', 'expand2', 'expand3', 'expand4', 'expand5', { data: false, renderer: TableCellSwitchRenderer, field: 'progress' }]; if (!html) { return; } - this.tableCmp2.expand(rowIndex, html, this, { - remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - }); + // this.tableCmp2.expand(rowIndex, html, this, { + // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + // }); } getExpansionHtml(rowIndex: number) { diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index b450ac1b44..34725031f4 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -983,7 +983,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte } if (rawHtml instanceof TableData) { - console.log(rawHtml) + + const cellSetting = {}; for (let i = 0; i < headerEle.length; i++) { const trustedEle = document.createElement('td'); From b11fee19fd6574cb6f0859d33c09a4dec5c51793 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Mon, 13 Jun 2022 21:53:10 +0800 Subject: [PATCH 05/12] amd Change-Id: I0d36355903a6059390f4fcd18312fcea1ae3f820 --- src/jigsaw/pc-components/table/table.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index 34725031f4..3747773bb4 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -984,7 +984,11 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte if (rawHtml instanceof TableData) { - const cellSetting = {}; + const cellSettings:TableCellSetting[][] = []; + + + + for (let i = 0; i < headerEle.length; i++) { const trustedEle = document.createElement('td'); From 6dc354994650aa0db6841edf1264205465b85494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Wed, 22 Jun 2022 09:42:19 +0800 Subject: [PATCH 06/12] amd Change-Id: Ie0af8527da532d7c0ac3afe7f2eecdeaad8cf54a --- src/jigsaw/pc-components/table/table.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index db0b2f220b..a65b134aca 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -1020,13 +1020,9 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte } rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); -<<<<<<< HEAD - this._allExpandedRows.push({ element: tr, rowIndex, remainOpen }); -======= const data: IPageable = this.data; const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); ->>>>>>> master } private _hideExpansion(rowElement: HTMLTableRowElement): void { From 723d7c5fba1dfaed7868686aa1919f23c7fdfa13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Wed, 22 Jun 2022 14:32:36 +0800 Subject: [PATCH 07/12] amd Change-Id: Ie14757631dd11ec4b426b3dee635e50be902a03f --- src/app/demo/pc/table/demo-set.module.ts | 7 +- .../pc/table/expand-table/demo.component.css | 7 + .../pc/table/expand-table/demo.component.html | 25 ++++ .../pc/table/expand-table/demo.component.ts | 123 ++++++++++++++++++ .../demo/pc/table/expand-table/demo.module.ts | 17 +++ .../demo/pc/table/expand/demo.component.css | 9 -- .../demo/pc/table/expand/demo.component.html | 15 +-- .../demo/pc/table/expand/demo.component.ts | 21 --- 8 files changed, 181 insertions(+), 43 deletions(-) create mode 100644 src/app/demo/pc/table/expand-table/demo.component.css create mode 100644 src/app/demo/pc/table/expand-table/demo.component.html create mode 100644 src/app/demo/pc/table/expand-table/demo.component.ts create mode 100644 src/app/demo/pc/table/expand-table/demo.module.ts diff --git a/src/app/demo/pc/table/demo-set.module.ts b/src/app/demo/pc/table/demo-set.module.ts index 7ca1a9638b..2793db0a45 100644 --- a/src/app/demo/pc/table/demo-set.module.ts +++ b/src/app/demo/pc/table/demo-set.module.ts @@ -109,6 +109,8 @@ import {TableProgressDemoComponent} from "./progress/demo.component"; import {TableProgressDemoModule} from "./progress/demo.module"; import { TableExpandDemoComponent } from './expand/demo.component'; import { TableExpandDemoModule } from './expand/demo.module'; +import { TableExpandTableDemoComponent } from './expand-table/demo.component'; +import { TableExpandTableDemoModule } from './expand-table/demo.module'; import { TableExpandPageableDemoComponent } from './expand-pageable/demo.component'; import { TableExpandPageableDemoModule } from './expand-pageable/demo.module'; @@ -275,6 +277,9 @@ export const routerConfig = [ { path: 'expand', component: TableExpandDemoComponent }, + { + path: 'expand-table', component: TableExpandTableDemoComponent + }, { path: 'expand-pageable', component: TableExpandPageableDemoComponent }, @@ -298,7 +303,7 @@ export const routerConfig = [ TableNoDataDemoModule, TableHtmlRendererDemoModule, RebuildTableDataDemoModule, TableCellSelectRenderDemoModule, TableMixinTableDemoModule, TreeTableDemoModule, TableCellEditablePropertyDemoModule,TableDraggableDemoModule, TableUpdateColumnDefinesDemoModule, TableAutoSaveDemoModule, TableCellRenderFullDemoModule, TableAutoFillUpDemoModule, TableAutoPageableDemoModule, TableColumnWidthDemoModule, TableProgressDemoModule, TableExpandDemoModule, - TableExpandPageableDemoModule + TableExpandPageableDemoModule, TableExpandTableDemoModule ] }) export class TableDemoModule { diff --git a/src/app/demo/pc/table/expand-table/demo.component.css b/src/app/demo/pc/table/expand-table/demo.component.css new file mode 100644 index 0000000000..2abb249c14 --- /dev/null +++ b/src/app/demo/pc/table/expand-table/demo.component.css @@ -0,0 +1,7 @@ +.demo-buttons { + margin-bottom: 12px; +} + +.demo-buttons span { + margin-right: 4px; +} \ No newline at end of file diff --git a/src/app/demo/pc/table/expand-table/demo.component.html b/src/app/demo/pc/table/expand-table/demo.component.html new file mode 100644 index 0000000000..ce251c6a24 --- /dev/null +++ b/src/app/demo/pc/table/expand-table/demo.component.html @@ -0,0 +1,25 @@ + + + + + + +Table Expand + +
+ 展开方式 + +
+
+ 数据更新后是否保持打开 + +
+
+ 更新数据 + 重置数据 + 展开/关闭第三行 +
+ +信息展示 + + \ No newline at end of file diff --git a/src/app/demo/pc/table/expand-table/demo.component.ts b/src/app/demo/pc/table/expand-table/demo.component.ts new file mode 100644 index 0000000000..a744a45dbe --- /dev/null +++ b/src/app/demo/pc/table/expand-table/demo.component.ts @@ -0,0 +1,123 @@ +import { Component, ViewChild } from "@angular/core"; +import { TableData, ColumnDefine, JigsawTable, TableCellSwitchRenderer } from "jigsaw/public_api"; + +@Component({ + templateUrl: './demo.component.html', + styleUrls: ['./demo.component.css'] +}) +export class TableExpandTableDemoComponent { + action = ['toggle']; + tableData: TableData; + remainOpen: boolean = false; + + @ViewChild('tableCmp') + tableCmp: JigsawTable; + + constructor() { + this.resetData(); + } + + rowClick(rowIndex: number) { + const html = this.getExpansionHtml(rowIndex); + if (!html) { + return; + } + this.tableCmp.expand(rowIndex, html, this, { + remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + }); + } + + getExpansionHtml(rowIndex: number) { + const data = this.tableData.data[rowIndex] + if (data[1] !== '可以') { + return ''; + } + const items = this.tableData.header.map((header, idx) => + `
  • + + ${header}： + ${data[idx]} +
    • `).join(''); + return ` + +

    当前行的详细信息：

    +
      + ${items} +
    • + + 更新时间戳： + ${Date.now()} +
      • +
    + `; + } + + showValue(value: string) { + alert('The value is ' + value); + } + + updateData() { + this.tableData.fromObject({ + data: [ + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 23], + ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 42], + ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 36], + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 65], + ["Shirley", "可以", "$11845", "2017/4/25", "R&D Dept II", 71], + ], + field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], + header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] + }) + } + + resetData() { + this.tableData = new TableData(); + this.tableData.fromObject({ + data: [ + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 23], + ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 42], + ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 36], + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 65], + ["Shirley", "可以", "$11845", "2017/4/25", "R&D Dept II", 71], + ["Easton", "不可以", "$17636", "2017/4/24", "Marketing I", 56], + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 17], + ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 38], + ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 9], + ["Emily", "可以", "$15128", "2017/4/21", "HR II", 100], + ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 11], + ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 82] + ], + field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], + header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] + }) + } + + expandRow(rowIndex: number) { + this.tableCmp.expand(rowIndex, this.getExpansionHtml(2), this, { + remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + }); + } + + // ==================================================================== + // ignore the following lines, they are not important to this demo + // ==================================================================== + summary: string = ''; + description: string = ''; +} diff --git a/src/app/demo/pc/table/expand-table/demo.module.ts b/src/app/demo/pc/table/expand-table/demo.module.ts new file mode 100644 index 0000000000..7965afb68a --- /dev/null +++ b/src/app/demo/pc/table/expand-table/demo.module.ts @@ -0,0 +1,17 @@ +import {NgModule} from '@angular/core'; +import { + JigsawTableModule, JigsawButtonModule, JigsawHeaderModule, JigsawButtonBarModule, JigsawSwitchModule +} from "jigsaw/public_api"; +import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description"; +import {TableExpandTableDemoComponent} from './demo.component'; + +@NgModule({ + imports: [ + JigsawTableModule, JigsawDemoDescriptionModule, JigsawButtonModule, JigsawHeaderModule, + JigsawButtonBarModule, JigsawSwitchModule + ], + declarations: [TableExpandTableDemoComponent], + exports: [TableExpandTableDemoComponent] +}) +export class TableExpandTableDemoModule { +} diff --git a/src/app/demo/pc/table/expand/demo.component.css b/src/app/demo/pc/table/expand/demo.component.css index b24a3b5f40..f313af705f 100644 --- a/src/app/demo/pc/table/expand/demo.component.css +++ b/src/app/demo/pc/table/expand/demo.component.css @@ -5,12 +5,3 @@ .demo-buttons span { margin-right: 4px; } - -.demo-table-cntr { - display: flex; - width: 100%; -} - -.demo-table-cntr>div { - flex: 1; -} \ No newline at end of file diff --git a/src/app/demo/pc/table/expand/demo.component.html b/src/app/demo/pc/table/expand/demo.component.html index 892e2a8a58..ce251c6a24 100644 --- a/src/app/demo/pc/table/expand/demo.component.html +++ b/src/app/demo/pc/table/expand/demo.component.html @@ -20,15 +20,6 @@ 展开/关闭第三行
    -
    - -
    - 类表格数据 - - -
    -
    \ No newline at end of file +信息展示 + + \ No newline at end of file diff --git a/src/app/demo/pc/table/expand/demo.component.ts b/src/app/demo/pc/table/expand/demo.component.ts index 997db6e649..0ce00ed220 100644 --- a/src/app/demo/pc/table/expand/demo.component.ts +++ b/src/app/demo/pc/table/expand/demo.component.ts @@ -13,9 +13,6 @@ export class TableExpandDemoComponent { @ViewChild('tableCmp') tableCmp: JigsawTable; - @ViewChild('tableCmp2') - tableCmp2: JigsawTable; - constructor() { this.resetData(); } @@ -30,24 +27,6 @@ export class TableExpandDemoComponent { }); } - rowClick2(rowIndex: number) { - const tableData = new TableData(); - tableData.fromObject({ - data: [ - ["expand1", "expand2", "expand3", "expand4", "expand5", false], - ], - field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], - header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] - }) - const html = ['expand1', 'expand2', 'expand3', 'expand4', 'expand5', { data: false, renderer: TableCellSwitchRenderer, field: 'progress' }]; - if (!html) { - return; - } - // this.tableCmp2.expand(rowIndex, html, this, { - // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - // }); - } - getExpansionHtml(rowIndex: number) { const data = this.tableData.data[rowIndex] if (data[1] !== '可以') { From eae095368a8d953528f7589f757b08cf918d5b95 Mon Sep 17 00:00:00 2001 From: gloryoftan <916627606@qq.com> Date: Thu, 23 Jun 2022 01:41:04 +0800 Subject: [PATCH 08/12] amd --- src/app/demo/pc/table/demo-set.module.ts | 4 +- .../demo.component.css | 0 .../demo.component.html | 0 .../demo.component.ts | 61 ++--------------- .../demo.module.ts | 0 src/jigsaw/pc-components/table/table.ts | 67 +++++-------------- 6 files changed, 25 insertions(+), 107 deletions(-) rename src/app/demo/pc/table/{expand-table => expand-rows}/demo.component.css (100%) rename src/app/demo/pc/table/{expand-table => expand-rows}/demo.component.html (100%) rename src/app/demo/pc/table/{expand-table => expand-rows}/demo.component.ts (59%) rename src/app/demo/pc/table/{expand-table => expand-rows}/demo.module.ts (100%) diff --git a/src/app/demo/pc/table/demo-set.module.ts b/src/app/demo/pc/table/demo-set.module.ts index 2793db0a45..20b4f0cd94 100644 --- a/src/app/demo/pc/table/demo-set.module.ts +++ b/src/app/demo/pc/table/demo-set.module.ts @@ -109,8 +109,8 @@ import {TableProgressDemoComponent} from "./progress/demo.component"; import {TableProgressDemoModule} from "./progress/demo.module"; import { TableExpandDemoComponent } from './expand/demo.component'; import { TableExpandDemoModule } from './expand/demo.module'; -import { TableExpandTableDemoComponent } from './expand-table/demo.component'; -import { TableExpandTableDemoModule } from './expand-table/demo.module'; +import { TableExpandTableDemoComponent } from './expand-rows/demo.component'; +import { TableExpandTableDemoModule } from './expand-rows/demo.module'; import { TableExpandPageableDemoComponent } from './expand-pageable/demo.component'; import { TableExpandPageableDemoModule } from './expand-pageable/demo.module'; diff --git a/src/app/demo/pc/table/expand-table/demo.component.css b/src/app/demo/pc/table/expand-rows/demo.component.css similarity index 100% rename from src/app/demo/pc/table/expand-table/demo.component.css rename to src/app/demo/pc/table/expand-rows/demo.component.css diff --git a/src/app/demo/pc/table/expand-table/demo.component.html b/src/app/demo/pc/table/expand-rows/demo.component.html similarity index 100% rename from src/app/demo/pc/table/expand-table/demo.component.html rename to src/app/demo/pc/table/expand-rows/demo.component.html diff --git a/src/app/demo/pc/table/expand-table/demo.component.ts b/src/app/demo/pc/table/expand-rows/demo.component.ts similarity index 59% rename from src/app/demo/pc/table/expand-table/demo.component.ts rename to src/app/demo/pc/table/expand-rows/demo.component.ts index a744a45dbe..c41ee2d4d3 100644 --- a/src/app/demo/pc/table/expand-table/demo.component.ts +++ b/src/app/demo/pc/table/expand-rows/demo.component.ts @@ -18,60 +18,11 @@ export class TableExpandTableDemoComponent { } rowClick(rowIndex: number) { - const html = this.getExpansionHtml(rowIndex); - if (!html) { - return; - } - this.tableCmp.expand(rowIndex, html, this, { + const rowData = [["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"], ["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"]] + this.tableCmp.expand(rowIndex, rowData, this, { remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] }); - } - - getExpansionHtml(rowIndex: number) { - const data = this.tableData.data[rowIndex] - if (data[1] !== '可以') { - return ''; - } - const items = this.tableData.header.map((header, idx) => - `
  • - - ${header}： - ${data[idx]} -
    • `).join(''); - return ` - -

    当前行的详细信息：

    -
      - ${items} -
    • - - 更新时间戳： - ${Date.now()} -
      • -
    - `; - } - - showValue(value: string) { - alert('The value is ' + value); - } + }; updateData() { this.tableData.fromObject({ @@ -110,9 +61,9 @@ export class TableExpandTableDemoComponent { } expandRow(rowIndex: number) { - this.tableCmp.expand(rowIndex, this.getExpansionHtml(2), this, { - remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - }); + // this.tableCmp.expand(rowIndex, this.getExpansionHtml(2), this, { + // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + // }); } // ==================================================================== diff --git a/src/app/demo/pc/table/expand-table/demo.module.ts b/src/app/demo/pc/table/expand-rows/demo.module.ts similarity index 100% rename from src/app/demo/pc/table/expand-table/demo.module.ts rename to src/app/demo/pc/table/expand-rows/demo.module.ts diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index a65b134aca..00fea84c02 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -26,7 +26,7 @@ import { TranslateModule, TranslateService } from "@ngx-translate/core"; import { PerfectScrollbarDirective, PerfectScrollbarModule } from "ngx-perfect-scrollbar"; import { AbstractJigsawComponent, JigsawCommonModule, WingsTheme } from "../../common/common"; import { JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent } from "./table-inner.components"; -import { TableData } from "../../common/core/data/table-data"; +import { TableData, TableDataMatrix } from "../../common/core/data/table-data"; import { AffixUtils, InternalUtils } from "../../common/core/utils/internal-utils"; import { _getColumnIndex, @@ -911,7 +911,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte /** * 展开行 */ - public expand(rowIndex: number, rawHtml: string | TableData, rawHtmlContext?: object, options?: TableRowExpandOptions): void { + public expand(rowIndex: number, rawHtml: string | TableDataMatrix, rawHtmlContext?: object, options?: TableRowExpandOptions): void { // const expandRowHost = this.expandRowsHost.toArray()[rowIndex]; // expandRowHost.clear(); @@ -966,63 +966,30 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _allExpandedRows: { element: HTMLTableRowElement, remainOpen: boolean, rowIndex: number, currentPage: number }[] = []; - private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | TableData, context: object, remainOpen: boolean, rowIndex: number): void { - const tr = document.createElement('tr'); - tr.classList.add('jigsaw-table-row-expansion'); - - const headerEle = this._headerComponents.toArray(); - + private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | TableDataMatrix, context: object, remainOpen: boolean, rowIndex: number): void { if (typeof rawHtml === 'string') { + const tr = document.createElement('tr'); + tr.classList.add('jigsaw-table-row-expansion'); + + const headerEle = this._headerComponents.toArray(); const trustedEle = document.createElement('td'); trustedEle.colSpan = headerEle.length; const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); tr.insertBefore(trustedEle, tr.lastElementChild); + rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); + const data: IPageable = this.data; + const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; + this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); } - if (rawHtml instanceof TableData) { - - const cellSettings:TableCellSetting[][] = []; - - - - - for (let i = 0; i < headerEle.length; i++) { - const trustedEle = document.createElement('td'); - - let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); - const componentRef = factory.create(this._injector, [], trustedEle); - - let cell = rawHtml[i]; - if (typeof rawHtml[i] === 'string') { - cell = { - renderer: DefaultCellRenderer, - data: rawHtml[i] - } - } - - console.log(componentRef.instance.column) - console.log(this.data) - componentRef.instance.tableData = this.data; - componentRef.instance.additionalData = this.additionalData; - componentRef.instance.cellData = cell.data; - componentRef.instance.row = -1; - componentRef.instance.field = cell.field; - componentRef.instance.renderer = cell.renderer; - componentRef.instance.editable = false - // componentRef.instance.hostInstance = this; - - this._applicationRef.attachView(componentRef.hostView); - - tr.appendChild(trustedEle) - } - + if (rawHtml instanceof Array) { + console.log(111) + rawHtml.forEach(trItem => { + const tr = document.createElement('tr'); + tr.classList.add('jigsaw-table-row-expansion'); + }) } - - rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); - const data: IPageable = this.data; - const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; - this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); } private _hideExpansion(rowElement: HTMLTableRowElement): void { From a1a9c5bf4b1ee0344e73d11b09c97dea9cafdd73 Mon Sep 17 00:00:00 2001 From: gloryoftan <916627606@qq.com> Date: Thu, 23 Jun 2022 01:43:11 +0800 Subject: [PATCH 09/12] amd --- .../pc/table/expand-rows/demo.component.ts | 8 +- src/jigsaw/pc-components/table/table.ts | 110 +++++++----------- 2 files changed, 45 insertions(+), 73 deletions(-) diff --git a/src/app/demo/pc/table/expand-rows/demo.component.ts b/src/app/demo/pc/table/expand-rows/demo.component.ts index c41ee2d4d3..c31c08972a 100644 --- a/src/app/demo/pc/table/expand-rows/demo.component.ts +++ b/src/app/demo/pc/table/expand-rows/demo.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from "@angular/core"; -import { TableData, ColumnDefine, JigsawTable, TableCellSwitchRenderer } from "jigsaw/public_api"; +import { TableData, JigsawTable, TableCellSwitchRenderer } from "jigsaw/public_api"; @Component({ templateUrl: './demo.component.html', @@ -19,9 +19,9 @@ export class TableExpandTableDemoComponent { rowClick(rowIndex: number) { const rowData = [["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"], ["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"]] - this.tableCmp.expand(rowIndex, rowData, this, { - remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - }); + // this.tableCmp.expand(rowIndex, rowData, this, { + // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + // }); }; updateData() { diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index 00fea84c02..a7e3368cf1 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -15,19 +15,16 @@ QueryList, Renderer2, ViewChild, - ViewChildren, - ComponentFactoryResolver, - ApplicationRef, - ViewContainerRef + ViewChildren } from "@angular/core"; -import { CommonModule } from "@angular/common"; -import { Subscription } from "rxjs"; -import { TranslateModule, TranslateService } from "@ngx-translate/core"; -import { PerfectScrollbarDirective, PerfectScrollbarModule } from "ngx-perfect-scrollbar"; -import { AbstractJigsawComponent, JigsawCommonModule, WingsTheme } from "../../common/common"; -import { JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent } from "./table-inner.components"; -import { TableData, TableDataMatrix } from "../../common/core/data/table-data"; -import { AffixUtils, InternalUtils } from "../../common/core/utils/internal-utils"; +import {CommonModule} from "@angular/common"; +import {Subscription} from "rxjs"; +import {TranslateModule, TranslateService} from "@ngx-translate/core"; +import {PerfectScrollbarDirective, PerfectScrollbarModule} from "ngx-perfect-scrollbar"; +import {AbstractJigsawComponent, JigsawCommonModule, WingsTheme} from "../../common/common"; +import {JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent} from "./table-inner.components"; +import {TableData} from "../../common/core/data/table-data"; +import {AffixUtils, InternalUtils} from "../../common/core/utils/internal-utils"; import { _getColumnIndex, AdditionalColumnDefine, @@ -39,12 +36,12 @@ import { TableDataChangeEvent, TableHeadSetting, TableRowExpandOptions } from "./table-typings"; -import { CallbackRemoval, CommonUtils } from "../../common/core/utils/common-utils"; -import { IPageable, PagingInfo, SortOrder } from "../../common/core/data/component-data"; -import { JigsawTrustedHtmlModule, TrustedHtmlHelper } from "../../common/directive/trusted-html/trusted-html"; -import { RequireMarkForCheck } from "../../common/decorator/mark-for-check"; -import { DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer, TableCellSwitchRenderer } from "./table-renderer"; -import { TableUtils } from "./table-utils"; +import {CallbackRemoval, CommonUtils} from "../../common/core/utils/common-utils"; +import {IPageable, PagingInfo, SortOrder} from "../../common/core/data/component-data"; +import {JigsawTrustedHtmlModule, TrustedHtmlHelper} from "../../common/directive/trusted-html/trusted-html"; +import {RequireMarkForCheck} from "../../common/decorator/mark-for-check"; +import {DefaultCellRenderer, JigsawTableRendererModule, TableCellTextEditorRenderer} from "./table-renderer"; +import {TableUtils} from "./table-utils"; @WingsTheme('table.scss') @Component({ @@ -62,11 +59,9 @@ import { TableUtils } from "./table-utils"; export class JigsawTable extends AbstractJigsawComponent implements OnInit, AfterViewInit, OnDestroy { constructor(private _renderer: Renderer2, private _elementRef: ElementRef, - protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, - // @RequireMarkForCheck 需要用到，勿删 - private _injector: Injector, - private _componentFactoryResolver: ComponentFactoryResolver, - private _applicationRef: ApplicationRef) { + protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, + // @RequireMarkForCheck 需要用到，勿删 + private _injector: Injector) { super(); if (CommonUtils.getBrowserType() == 'Firefox') { this._$isFFBrowser = true; @@ -329,7 +324,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte /** * @internal */ - public _$blankRow: string[] = []; + public _$blankRow:string[] = []; private _updateFillUpBlankRow(): void { this._$blankRow = []; @@ -402,7 +397,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte cd = CommonUtils.shallowCopy(cd); cd.target = field; } - columnDefines.push(cd ? cd : { target: field }); + columnDefines.push(cd ? cd : {target: field}); }); if (this._additionalColumnDefines) { @@ -429,6 +424,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte } const columnDefines = this._getMixedColumnDefines(); + this._initAdditionalData(); this._updateHeaderSettings(columnDefines); this._updateCellSettings(columnDefines); this._changeDetectorRef.detectChanges(); @@ -569,7 +565,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte this.doubleClick.emit(rowIndex); } - @ViewChildren('tableRow', { read: ElementRef }) + @ViewChildren('tableRow', {read: ElementRef}) private _rowElementRefs: QueryList; /** @@ -714,10 +710,10 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte }) } - @ViewChild('contentScrollbar', { read: PerfectScrollbarDirective }) + @ViewChild('contentScrollbar', {read: PerfectScrollbarDirective}) public contentScrollbar: PerfectScrollbarDirective; - @ViewChild('bodyScrollbar', { read: PerfectScrollbarDirective }) + @ViewChild('bodyScrollbar', {read: PerfectScrollbarDirective}) private _bodyScrollbar: PerfectScrollbarDirective; /** @@ -906,22 +902,10 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte }); } - @ViewChildren('expandRowHost', { read: ViewContainerRef }) - protected expandRowsHost: QueryList /** * 展开行 */ - public expand(rowIndex: number, rawHtml: string | TableDataMatrix, rawHtmlContext?: object, options?: TableRowExpandOptions): void { - // const expandRowHost = this.expandRowsHost.toArray()[rowIndex]; - // expandRowHost.clear(); - - // let rowComponentFactory: ComponentFactory; - // rowComponentFactory = this.componentFactoryResolver.resolveComponentFactory(JigsawTableExpandRowComponent); - // const sourceComponentRef: ComponentRef = expandRowHost.createComponent(rowComponentFactory); - - // const sourceComponent = sourceComponentRef.instance; - // sourceComponent._$cellSettings = this._$cellSettings; - + public expand(rowIndex: number, rawHtml: string, rawHtmlContext?: object, options?: TableRowExpandOptions): void { const rowElement = this._rowElementRefs.toArray()[rowIndex]?.nativeElement; if (!rowElement) { return; @@ -942,10 +926,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte // 已经打开了，但此时人家要求再打开，需要更新一下内容 const rowInfo = this._allExpandedRows.find(i => i?.element === rowElement.nextSibling); rowInfo.remainOpen = options?.remainOpenAfterDataChanges; - if (typeof rawHtml === 'string') { - rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( - CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); - } + rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( + CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); return; } if (!expanded && action == 'show') { @@ -966,30 +948,20 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _allExpandedRows: { element: HTMLTableRowElement, remainOpen: boolean, rowIndex: number, currentPage: number }[] = []; - private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | TableDataMatrix, context: object, remainOpen: boolean, rowIndex: number): void { - if (typeof rawHtml === 'string') { - const tr = document.createElement('tr'); - tr.classList.add('jigsaw-table-row-expansion'); - - const headerEle = this._headerComponents.toArray(); - const trustedEle = document.createElement('td'); - trustedEle.colSpan = headerEle.length; - const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; - trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); - tr.insertBefore(trustedEle, tr.lastElementChild); - rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); - const data: IPageable = this.data; - const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; - this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); - } - - if (rawHtml instanceof Array) { - console.log(111) - rawHtml.forEach(trItem => { - const tr = document.createElement('tr'); - tr.classList.add('jigsaw-table-row-expansion'); - }) - } + private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string, context: object, remainOpen: boolean, rowIndex: number): void { + const tr = document.createElement('tr'); + const trustedEle = document.createElement('td'); + const headerEle = this._headerComponents.toArray(); + trustedEle.colSpan = headerEle.length; + tr.classList.add('jigsaw-table-row-expansion'); + tr.insertBefore(trustedEle, tr.lastElementChild); + + const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; + trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); + const data: IPageable = this.data; + const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; + this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); } private _hideExpansion(rowElement: HTMLTableRowElement): void { From c57e09f567375eb6cd973cf8fc416b9cc422cfb9 Mon Sep 17 00:00:00 2001 From: gloryoftan <916627606@qq.com> Date: Thu, 23 Jun 2022 02:41:03 +0800 Subject: [PATCH 10/12] amd --- .../pc/table/expand-rows/demo.component.ts | 6 +- src/jigsaw/pc-components/table/table.ts | 109 +++++++++++++++--- 2 files changed, 94 insertions(+), 21 deletions(-) diff --git a/src/app/demo/pc/table/expand-rows/demo.component.ts b/src/app/demo/pc/table/expand-rows/demo.component.ts index c31c08972a..23d11a0feb 100644 --- a/src/app/demo/pc/table/expand-rows/demo.component.ts +++ b/src/app/demo/pc/table/expand-rows/demo.component.ts @@ -19,9 +19,9 @@ export class TableExpandTableDemoComponent { rowClick(rowIndex: number) { const rowData = [["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"], ["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"]] - // this.tableCmp.expand(rowIndex, rowData, this, { - // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - // }); + this.tableCmp.expand(rowIndex, rowData, this, { + remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + }); }; updateData() { diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index a7e3368cf1..23bfb4da38 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -3,6 +3,7 @@ ChangeDetectionStrategy, ChangeDetectorRef, Component, + ComponentFactoryResolver, ElementRef, EventEmitter, Injector, @@ -23,7 +24,7 @@ import {TranslateModule, TranslateService} from "@ngx-translate/core"; import {PerfectScrollbarDirective, PerfectScrollbarModule} from "ngx-perfect-scrollbar"; import {AbstractJigsawComponent, JigsawCommonModule, WingsTheme} from "../../common/common"; import {JigsawTableCellInternalComponent, JigsawTableHeaderInternalComponent} from "./table-inner.components"; -import {TableData} from "../../common/core/data/table-data"; +import {TableData, TableDataMatrix} from "../../common/core/data/table-data"; import {AffixUtils, InternalUtils} from "../../common/core/utils/internal-utils"; import { _getColumnIndex, @@ -60,6 +61,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte constructor(private _renderer: Renderer2, private _elementRef: ElementRef, protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, + private _componentFactoryResolver:ComponentFactoryResolver, // @RequireMarkForCheck 需要用到，勿删 private _injector: Injector) { super(); @@ -905,7 +907,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte /** * 展开行 */ - public expand(rowIndex: number, rawHtml: string, rawHtmlContext?: object, options?: TableRowExpandOptions): void { + public expand(rowIndex: number, rawHtml: string | TableDataMatrix, rawHtmlContext?: object, options?: TableRowExpandOptions): void { const rowElement = this._rowElementRefs.toArray()[rowIndex]?.nativeElement; if (!rowElement) { return; @@ -926,8 +928,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte // 已经打开了，但此时人家要求再打开，需要更新一下内容 const rowInfo = this._allExpandedRows.find(i => i?.element === rowElement.nextSibling); rowInfo.remainOpen = options?.remainOpenAfterDataChanges; - rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( - CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); + // rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( + // CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); return; } if (!expanded && action == 'show') { @@ -948,20 +950,91 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte private _allExpandedRows: { element: HTMLTableRowElement, remainOpen: boolean, rowIndex: number, currentPage: number }[] = []; - private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string, context: object, remainOpen: boolean, rowIndex: number): void { - const tr = document.createElement('tr'); - const trustedEle = document.createElement('td'); - const headerEle = this._headerComponents.toArray(); - trustedEle.colSpan = headerEle.length; - tr.classList.add('jigsaw-table-row-expansion'); - tr.insertBefore(trustedEle, tr.lastElementChild); - - const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; - trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); - rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); - const data: IPageable = this.data; - const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; - this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); + private _showExpansion(rowElement: HTMLTableRowElement, rawHtml: string | TableDataMatrix, context: object, remainOpen: boolean, rowIndex: number): void { + if (typeof rawHtml === 'string') { + + const tr = document.createElement('tr'); + const trustedEle = document.createElement('td'); + const headerEle = this._headerComponents.toArray(); + trustedEle.colSpan = headerEle.length; + tr.classList.add('jigsaw-table-row-expansion'); + tr.insertBefore(trustedEle, tr.lastElementChild); + + const trustedHtml = CommonUtils.isUndefined(rawHtml) ? "" : rawHtml; + trustedEle.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); + const data: IPageable = this.data; + const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; + this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); + } + + if (rawHtml instanceof Array){ + console.log(123123) + rawHtml.forEach(row=>{ + const tr = document.createElement('tr'); + + row.forEach(cell=>{ + const td = document.createElement('td'); + let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); + const componentRef = factory.create(this._injector, [], td); + let cellData; + if (typeof cell ==='string'){ + cellData = { + renderer: DefaultCellRenderer, + data: cell + } + } + componentRef.instance.tableData = this.data; + componentRef.instance.additionalData = this.additionalData; + componentRef.instance.cellData = cellData.data; + componentRef.instance.row = -1; + componentRef.instance.field = cell.field; + componentRef.instance.renderer = cell.renderer; + componentRef.instance.editable = false + componentRef.instance.hostInstance = this; + tr.appendChild(td) + }) + + rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); + }) + } + + + // if (rawHtml instanceof TableData) { + + // const cellSettings:TableCellSetting[][] = []; + + // for (let i = 0; i < headerEle.length; i++) { + // const trustedEle = document.createElement('td'); + + // let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); + // const componentRef = factory.create(this._injector, [], trustedEle); + + // let cell = rawHtml[i]; + // if (typeof rawHtml[i] === 'string') { + // cell = { + // renderer: DefaultCellRenderer, + // data: rawHtml[i] + // } + // } + + // console.log(componentRef.instance.column) + // console.log(this.data) + // componentRef.instance.tableData = this.data; + // componentRef.instance.additionalData = this.additionalData; + // componentRef.instance.cellData = cell.data; + // componentRef.instance.row = -1; + // componentRef.instance.field = cell.field; + // componentRef.instance.renderer = cell.renderer; + // componentRef.instance.editable = false + // // componentRef.instance.hostInstance = this; + + // this._applicationRef.attachView(componentRef.hostView); + + // tr.appendChild(trustedEle) + // } + + // } } private _hideExpansion(rowElement: HTMLTableRowElement): void { From 2a96b5faff0ddf832eb60e04f428ac41acea855a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Thu, 23 Jun 2022 17:05:42 +0800 Subject: [PATCH 11/12] amd Change-Id: I63c6081d3fb95d6fa2a7b26f5bc25b066a5dd0f7 --- src/app/demo/pc/table/demo-set.module.ts | 2 +- .../pc/table/expand-rows/demo.component.html | 5 +- .../pc/table/expand-rows/demo.component.ts | 85 ++++++++---- src/jigsaw/pc-components/table/table.ts | 130 ++++++++++-------- 4 files changed, 134 insertions(+), 88 deletions(-) diff --git a/src/app/demo/pc/table/demo-set.module.ts b/src/app/demo/pc/table/demo-set.module.ts index 20b4f0cd94..f24bbb6f9e 100644 --- a/src/app/demo/pc/table/demo-set.module.ts +++ b/src/app/demo/pc/table/demo-set.module.ts @@ -278,7 +278,7 @@ export const routerConfig = [ path: 'expand', component: TableExpandDemoComponent }, { - path: 'expand-table', component: TableExpandTableDemoComponent + path: 'expand-rows', component: TableExpandTableDemoComponent }, { path: 'expand-pageable', component: TableExpandPageableDemoComponent diff --git a/src/app/demo/pc/table/expand-rows/demo.component.html b/src/app/demo/pc/table/expand-rows/demo.component.html index ce251c6a24..6aeff70dfd 100644 --- a/src/app/demo/pc/table/expand-rows/demo.component.html +++ b/src/app/demo/pc/table/expand-rows/demo.component.html @@ -20,6 +20,9 @@ 展开/关闭第三行 +
    展开数据发生了变化的行数：{{row}}
    + 信息展示 - + \ No newline at end of file diff --git a/src/app/demo/pc/table/expand-rows/demo.component.ts b/src/app/demo/pc/table/expand-rows/demo.component.ts index 23d11a0feb..b99b503ea6 100644 --- a/src/app/demo/pc/table/expand-rows/demo.component.ts +++ b/src/app/demo/pc/table/expand-rows/demo.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from "@angular/core"; -import { TableData, JigsawTable, TableCellSwitchRenderer } from "jigsaw/public_api"; +import { TableData, JigsawTable, TableCellSwitchRenderer, TableCellCheckboxRenderer } from "jigsaw/public_api"; @Component({ templateUrl: './demo.component.html', @@ -13,13 +13,37 @@ export class TableExpandTableDemoComponent { @ViewChild('tableCmp') tableCmp: JigsawTable; + row: number; + constructor() { this.resetData(); } + rowData = [ + ["cell-1", { data: false, renderer: TableCellSwitchRenderer }, { + data: `点击`, + renderer: 'html' + }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer }], + ["cell-1", { data: true, renderer: TableCellSwitchRenderer }, { + data: ``, + renderer: 'html' + }, "cell-4", "cell-5", "cell-6", { data: false, renderer: TableCellCheckboxRenderer }], + ["cell-1", { data: false, renderer: TableCellSwitchRenderer, rendererInitData: { valid: false } }, { + data: ` 图标`, + renderer: 'html' + }, "cell-4", "cell-5", "cell-6", { data: false, renderer: TableCellCheckboxRenderer, rendererInitData: { valid: false } }], + ["cell-1", { data: true, renderer: TableCellSwitchRenderer, rendererInitData: { disabled: true } }, , { + data: `文本`, + renderer: 'html' + }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer, rendererInitData: { disabled: true } }] + ] + + onClick() { + alert("按钮被点击了"); + } + rowClick(rowIndex: number) { - const rowData = [["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"], ["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6"]] - this.tableCmp.expand(rowIndex, rowData, this, { + this.tableCmp.expand(rowIndex, this.rowData, this, { remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] }); }; @@ -27,14 +51,14 @@ export class TableExpandTableDemoComponent { updateData() { this.tableData.fromObject({ data: [ - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 23], - ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 42], - ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 36], - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 65], - ["Shirley", "可以", "$11845", "2017/4/25", "R&D Dept II", 71], + ["Emily", "", "$15128", "2017/4/21", "HR II", 23, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 42, ""], + ["Easton", "", "$17636", "2017/4/24", "Marketing I", 36, ""], + ["Emily", "", "$15128", "2017/4/21", "HR II", 65, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 71, ""], ], - field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], - header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] + field: ["name", "switch", "salary", "enroll-date", "office", "progress", "checkbox"], + header: ["姓名", "开关组件", "薪资", "入职日期", "部门", "工作进度", "多选框"] }) } @@ -42,30 +66,37 @@ export class TableExpandTableDemoComponent { this.tableData = new TableData(); this.tableData.fromObject({ data: [ - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 23], - ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 42], - ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 36], - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 65], - ["Shirley", "可以", "$11845", "2017/4/25", "R&D Dept II", 71], - ["Easton", "不可以", "$17636", "2017/4/24", "Marketing I", 56], - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 17], - ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 38], - ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 9], - ["Emily", "可以", "$15128", "2017/4/21", "HR II", 100], - ["Shirley", "不可以", "$11845", "2017/4/25", "R&D Dept II", 11], - ["Easton", "可以", "$17636", "2017/4/24", "Marketing I", 82] + ["Emily", "", "$15128", "2017/4/21", "HR II", 23, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 42, ""], + ["Easton", "", "$17636", "2017/4/24", "Marketing I", 36, ""], + ["Emily", "", "$15128", "2017/4/21", "HR II", 65, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 71, ""], + ["Easton", "", "$17636", "2017/4/24", "Marketing I", 56, ""], + ["Emily", "", "$15128", "2017/4/21", "HR II", 17, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 38, ""], + ["Easton", "", "$17636", "2017/4/24", "Marketing I", 9, ""], + ["Emily", "", "$15128", "2017/4/21", "HR II", 100, ""], + ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 11, ""], + ["Easton", "", "$17636", "2017/4/24", "Marketing I", 82, ""] ], - field: ["name", "expandable", "salary", "enroll-date", "office", "progress"], - header: ["姓名", "是否可以展开", "薪资", "入职日期", "部门", "工作进度"] + field: ["name", "switch", "salary", "enroll-date", "office", "progress", "checkbox"], + header: ["姓名", "开关组件", "薪资", "入职日期", "部门", "工作进度", "多选框"] }) } expandRow(rowIndex: number) { - // this.tableCmp.expand(rowIndex, this.getExpansionHtml(2), this, { - // remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] - // }); + this.tableCmp.expand(rowIndex, this.rowData, this, { + remainOpenAfterDataChanges: this.remainOpen, action: this.action[0] + }); } + rowExpandDataChange($event) { + this.row = $event.row; + } + + + + // ==================================================================== // ignore the following lines, they are not important to this demo // ==================================================================== diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index 23bfb4da38..cb6c09cf95 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -16,7 +16,8 @@ QueryList, Renderer2, ViewChild, - ViewChildren + ViewChildren, + ApplicationRef } from "@angular/core"; import {CommonModule} from "@angular/common"; import {Subscription} from "rxjs"; @@ -59,11 +60,10 @@ import {TableUtils} from "./table-utils"; }) export class JigsawTable extends AbstractJigsawComponent implements OnInit, AfterViewInit, OnDestroy { - constructor(private _renderer: Renderer2, private _elementRef: ElementRef, - protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, - private _componentFactoryResolver:ComponentFactoryResolver, - // @RequireMarkForCheck 需要用到，勿删 - private _injector: Injector) { + constructor(private _renderer: Renderer2, private _elementRef: ElementRef, protected _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, + private _componentFactoryResolver: ComponentFactoryResolver, private _applicationRef: ApplicationRef, + // @RequireMarkForCheck 需要用到，勿删 + private _injector: Injector) { super(); if (CommonUtils.getBrowserType() == 'Firefox') { this._$isFFBrowser = true; @@ -153,6 +153,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte public selectedRowChange: EventEmitter = new EventEmitter(); @Output() public rowExpand: EventEmitter = new EventEmitter(); + @Output() + public rowExpandDataChange = new EventEmitter<{ row: number, data: TableDataMatrix }>(); private _getColumnIndex(field: string): [number, TableData] { return _getColumnIndex(this.data, this._additionalData, field); @@ -968,79 +970,89 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); } - if (rawHtml instanceof Array){ - console.log(123123) - rawHtml.forEach(row=>{ + if (rawHtml instanceof Array) { + const tableData = new TableData(); + const data = []; + const field = []; + + rawHtml.forEach(row => { + const rowData = []; + row.forEach((cell, colIndex) => { + if (CommonUtils.isUndefined(cell.data)) { + rowData.push(cell); + } else { + rowData.push(cell.data) + } + field.push('row-expand-field' + colIndex) + }) + data.push(rowData); + }) + + tableData.fromObject({ + data: data, + field: field, + header: field + }) + + tableData.onRefresh(() => { + this.rowExpandDataChange.emit({ row: rowIndex, data: tableData.data }) + }) + + const trEleArr = []; + rawHtml.forEach((row, rowIndex) => { const tr = document.createElement('tr'); + tr.classList.add('jigsaw-table-row-expansion'); - row.forEach(cell=>{ + row.forEach((cell, colIndex) => { const td = document.createElement('td'); + + if (cell.renderer === 'html') { + const trustedHtml = CommonUtils.isUndefined(cell.data) ? "" : cell.data; + td.innerHTML = TrustedHtmlHelper.updateHtml(trustedHtml, context, []); + tr.appendChild(td); + return; + } + let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); const componentRef = factory.create(this._injector, [], td); - let cellData; - if (typeof cell ==='string'){ - cellData = { + let cellSettings = cell; + if (typeof cell === 'string') { + cellSettings = { renderer: DefaultCellRenderer, data: cell } } - componentRef.instance.tableData = this.data; - componentRef.instance.additionalData = this.additionalData; - componentRef.instance.cellData = cellData.data; - componentRef.instance.row = -1; - componentRef.instance.field = cell.field; - componentRef.instance.renderer = cell.renderer; - componentRef.instance.editable = false - componentRef.instance.hostInstance = this; - tr.appendChild(td) + + componentRef.instance.field = 'row-expand-field' + colIndex; + componentRef.instance.row = rowIndex; + componentRef.instance.tableData = tableData; + componentRef.instance.additionalData = new TableData(); + componentRef.instance.renderer = cellSettings.renderer; + componentRef.instance.rendererInitData = cellSettings.rendererInitData; + componentRef.instance.cellData = cellSettings.data; + this._applicationRef.attachView(componentRef.hostView); + tr.appendChild(td); }) + trEleArr.push(tr); + }) + trEleArr.reverse().forEach(tr => { rowElement.parentNode.insertBefore(tr, rowElement.nextSibling); + const data: IPageable = this.data; + const currentPage = data?.pagingInfo instanceof PagingInfo ? data.pagingInfo.currentPage : undefined; + this._allExpandedRows.push({ element: tr, rowIndex, remainOpen, currentPage }); }) } - - - // if (rawHtml instanceof TableData) { - - // const cellSettings:TableCellSetting[][] = []; - - // for (let i = 0; i < headerEle.length; i++) { - // const trustedEle = document.createElement('td'); - - // let factory = this._componentFactoryResolver.resolveComponentFactory(JigsawTableCellInternalComponent); - // const componentRef = factory.create(this._injector, [], trustedEle); - - // let cell = rawHtml[i]; - // if (typeof rawHtml[i] === 'string') { - // cell = { - // renderer: DefaultCellRenderer, - // data: rawHtml[i] - // } - // } - - // console.log(componentRef.instance.column) - // console.log(this.data) - // componentRef.instance.tableData = this.data; - // componentRef.instance.additionalData = this.additionalData; - // componentRef.instance.cellData = cell.data; - // componentRef.instance.row = -1; - // componentRef.instance.field = cell.field; - // componentRef.instance.renderer = cell.renderer; - // componentRef.instance.editable = false - // // componentRef.instance.hostInstance = this; - - // this._applicationRef.attachView(componentRef.hostView); - - // tr.appendChild(trustedEle) - // } - - // } } private _hideExpansion(rowElement: HTMLTableRowElement): void { const index = this._allExpandedRows.findIndex(i => i?.element === rowElement.nextSibling); + if (index == -1) { + return; + } this._allExpandedRows.splice(index, 1); rowElement.nextSibling.remove(); + this._hideExpansion(rowElement); } private _clearExpansion() { From 60d1d6bc0361bf0a818a4d8dd7e30e10adfc8893 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E5=AD=90=E6=89=AC10293829?= Date: Thu, 23 Jun 2022 17:15:03 +0800 Subject: [PATCH 12/12] amd Change-Id: I23263f57ff092ba35505451e719921e06e941dc9 --- src/jigsaw/pc-components/table/table.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts index cb6c09cf95..734b508f42 100644 --- a/src/jigsaw/pc-components/table/table.ts +++ b/src/jigsaw/pc-components/table/table.ts @@ -930,9 +930,11 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte // 已经打开了，但此时人家要求再打开，需要更新一下内容 const rowInfo = this._allExpandedRows.find(i => i?.element === rowElement.nextSibling); rowInfo.remainOpen = options?.remainOpenAfterDataChanges; - // rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( - // CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); - return; + if (typeof rawHtml === 'string') { + rowInfo.element.children[0].innerHTML = TrustedHtmlHelper.updateHtml( + CommonUtils.isUndefined(rawHtml) ? "" : rawHtml, rawHtmlContext, []); + return; + } } if (!expanded && action == 'show') { // 该行还没打开，人家要求打开