[优化]table展开功能支持列对齐、支持使用组件

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-rows/demo.component';
+import { TableExpandTableDemoModule } from './expand-rows/demo.module';
 import { TableUpdateAdditionalColumnDefineDemoComponent } from "./update-additional-column-defines/demo.component";
 import { TableUpdateAdditionalColumnDefineDemoModule } from "./update-additional-column-defines/demo.module";
 import { TableExpandPageableDemoComponent } from './expand-pageable/demo.component';
@@ -280,6 +282,9 @@ export const routerConfig = [
     {
         path: 'expand', component: TableExpandDemoComponent
     },
+    {
+        path: 'expand-rows', component: TableExpandTableDemoComponent
+    },
     {
         path: 'expand-pageable', component: TableExpandPageableDemoComponent
     },
@@ -303,7 +308,7 @@ export const routerConfig = [
         TableNoDataDemoModule, TableHtmlRendererDemoModule, RebuildTableDataDemoModule, TableCellSelectRenderDemoModule, TableMixinTableDemoModule,
         TreeTableDemoModule, TableCellEditablePropertyDemoModule,TableDraggableDemoModule, TableUpdateColumnDefinesDemoModule, TableAutoSaveDemoModule,
         TableCellRenderFullDemoModule, TableAutoFillUpDemoModule, TableAutoPageableDemoModule, TableColumnWidthDemoModule, TableProgressDemoModule, TableExpandDemoModule,
-        TableExpandPageableDemoModule, TableUpdateAdditionalColumnDefineDemoModule
+        TableExpandPageableDemoModule, TableUpdateAdditionalColumnDefineDemoModule, TableExpandTableDemoModule
     ]
 })
 export class TableDemoModule {

src/app/demo/pc/table/expand-rows/demo.component.css

@@ -0,0 +1,7 @@
+.demo-buttons {
+    margin-bottom: 12px;
+}
+
+.demo-buttons span {
+    margin-right: 4px;
+}

src/app/demo/pc/table/expand-rows/demo.component.html

@@ -0,0 +1,28 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<jigsaw-header [level]="1">Table Expand</jigsaw-header>
+
+<div class="demo-buttons">
+    <span>展开方式</span>
+    <jigsaw-button-bar [data]="['toggle', 'show', 'hide']" [(selectedItems)]="action"></jigsaw-button-bar>
+</div>
+<div class="demo-buttons" style="display: flex;">
+    <span>数据更新后是否保持打开</span>
+    <jigsaw-switch [(checked)]="remainOpen"></jigsaw-switch>
+</div>
+<div class="demo-buttons">
+    <jigsaw-button (click)="updateData()">更新数据</jigsaw-button>
+    <jigsaw-button (click)="resetData()">重置数据</jigsaw-button>
+    <jigsaw-button (click)="expandRow(2)">展开/关闭第三行</jigsaw-button>
+</div>
+
+<div>展开数据发生了变化的行数：{{row}}</div>
+
+<jigsaw-header [level]="2">信息展示</jigsaw-header>
+<jigsaw-table #tableCmp width="600px" [data]="tableData" (rowExpand)="rowClick($event)"
+    (rowExpandDataChange)="rowExpandDataChange($event)">
+</jigsaw-table>

src/app/demo/pc/table/expand-rows/demo.component.ts

@@ -0,0 +1,105 @@
+import { Component, ViewChild } from "@angular/core";
+import { TableData, JigsawTable, TableCellSwitchRenderer, TableCellCheckboxRenderer } 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;
+
+    row: number;
+
+    constructor() {
+        this.resetData();
+    }
+
+    rowData = [
+        ["cell-1", { data: false, renderer: TableCellSwitchRenderer }, {
+            data: `<a onclick="onClick()">点击</a>`,
+            renderer: 'html'
+        }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer }],
+        ["cell-1", { data: true, renderer: TableCellSwitchRenderer }, {
+            data: `<i class="iconfont iconfont-e8e3"></i>`,
+            renderer: 'html'
+        }, "cell-4", "cell-5", "cell-6", { data: false, renderer: TableCellCheckboxRenderer }],
+        ["cell-1", { data: false, renderer: TableCellSwitchRenderer, rendererInitData: { valid: false } }, {
+            data: `<i class="iconfont iconfont-ea50"></i> 图标`,
+            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: `<span>文本</span><i class="iconfont iconfont-e9b6"></i>`,
+            renderer: 'html'
+        }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer, rendererInitData: { disabled: true } }]
+    ]
+
+    onClick() {
+        alert("按钮被点击了");
+    }
+
+    rowClick(rowIndex: number) {
+        this.tableCmp.expand(rowIndex, this.rowData, this, {
+            remainOpenAfterDataChanges: this.remainOpen, action: <any>this.action[0]
+        });
+    };
+
+    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", "switch", "salary", "enroll-date", "office", "progress", "checkbox"],
+            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", "switch", "salary", "enroll-date", "office", "progress", "checkbox"],
+            header: ["姓名", "开关组件", "薪资", "入职日期", "部门", "工作进度", "多选框"]
+        })
+    }
+
+    expandRow(rowIndex: number) {
+        this.tableCmp.expand(rowIndex, this.rowData, this, {
+            remainOpenAfterDataChanges: this.remainOpen, action: <any>this.action[0]
+        });
+    }
+
+    rowExpandDataChange($event) {
+        this.row = $event.row;
+    }
+
+
+
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '';
+    description: string = '';
+}

src/app/demo/pc/table/expand-rows/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 {
+}

src/app/demo/pc/table/expand/demo.component.html

@@ -4,8 +4,8 @@
 
 
 <!-- start to learn the demo from here -->
-<jigsaw-header [level]="1">Table</jigsaw-header>
-<jigsaw-header [level]="2">expand</jigsaw-header>
+<jigsaw-header [level]="1">Table Expand</jigsaw-header>
+
 <div class="demo-buttons">
     <span>展开方式</span>
     <jigsaw-button-bar [data]="['toggle', 'show', 'hide']" [(selectedItems)]="action"></jigsaw-button-bar>
@@ -19,5 +19,7 @@
     <jigsaw-button (click)="resetData()">重置数据</jigsaw-button>
     <jigsaw-button (click)="expandRow(2)">展开/关闭第三行</jigsaw-button>
 </div>
+
+<jigsaw-header [level]="2">信息展示</jigsaw-header>
 <jigsaw-table #tableCmp width="600px" [data]="tableData" (rowExpand)="rowClick($event)">
-</jigsaw-table>
+</jigsaw-table>

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',