美化 Table Nested 样式

examples/components/CRUD/Nested.jsx

@@ -4,6 +4,10 @@ export default {
     body: {
         type: "crud",
         api: "/api/mock2/crud/table2",
+        expandConfig: {
+            expand: 'first',
+            accordion: true
+        },
         columns: [
             {
                 name: "id",

scss/components/_table.scss

@@ -145,6 +145,40 @@
         color: $Table-color;
         background-color: $Table-bg;
 
+        &--withCombine {
+            > thead > tr > th,
+            > tbody > tr > td {
+                &:first-child {
+                    padding-left: $TableCell-paddingX;
+                }
+
+                &:last-child {
+                    padding-right: $TableCell-paddingX;
+                }
+            }
+
+            // reset
+            > tbody > tr {
+                @if $Table-strip-bg !=transparent {
+                    &.#{$ns}Table-tr--odd {
+                        background-color: transparent;
+                    }
+                }
+
+                &:hover {
+                    background-color: transparent;
+                }
+
+                > td {
+                    vertical-align: middle;
+                }
+
+                > td:not(:last-child) {
+                    border-right: $Table-borderWidth solid $Table-borderColor;
+                }
+            }
+        }
+
         > thead > tr {
             background-color: $Table-thead-bg;
 
@@ -267,16 +301,52 @@
         }
 
         @for $i from 2 through 10 {
+            tr.#{$ns}Table-tr--#{$i}th.is-expanded {
+                .#{$ns}Table-expandCell:before {
+                    right: px2rem(9px) + px2rem(-20px) * ($i - 1);
+                }
+            }
             tr.#{$ns}Table-tr--#{$i}th {
-                .#{$ns}Table-expandCell > button {
+                .#{$ns}Table-expandBtn {
                     position: relative;
-                    right: -20px * ($i - 1);
+                    right: - px2rem(20px) * ($i - 1);
                 }
 
                 .#{$ns}Table-expandCell + td {
-                    > div,
+                    position: relative;
-                    > span {
+
-                        margin-left: 20px * ($i - 1);
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        width: px2rem(1px);
+                        top: 0;
+                        bottom: 0;
+                        left: px2rem(-10px) + px2rem(20px) * ($i - 2);
+                        height: auto;
+                        background-color: $Table-borderColor;
+                    }
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        height: px2rem(1px);
+                        top: px2rem(20px);
+                        left: px2rem(-10px) + px2rem(20px) * ($i - 2);
+                        width: px2rem(10px);
+                        background-color: $Table-borderColor;
+                    }
+
+                    > *:first-child {
+                        margin-left: px2rem(20px) * ($i - 1);
+                    }
+                }
+            }
+
+            tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
+                .#{$ns}Table-expandCell + td {
+                    &::before {
+                        height: px2rem(20px);
+                        bottom: auto;
                     }
                 }
             }
@@ -292,6 +362,43 @@
             }
         }
 
+        > thead > tr > th.#{$ns}Table-expandCell,
+        > tbody > tr > td.#{$ns}Table-expandCell {
+            border-right: 0;
+            width: px2rem(1px);
+            padding-right: 0;
+        }
+
+        > tbody > tr > td.#{$ns}Table-expandCell {
+            position: relative;
+            @for $i from 1 through 7 {
+                .#{$ns}Table-divider-#{$i} {
+                    position: absolute;
+                    width: px2rem(1px);
+                    top: 0;
+                    bottom: 0;
+                    height: 100%;
+                    background-color: $Table-borderColor;
+                    right: px2rem(9px) + px2rem(-20px) * ($i - 1);
+                }
+            }
+        }
+
+        > tbody > tr.is-expanded > td.#{$ns}Table-expandCell {
+            // position: relative;
+    
+            &::before {
+                content: '';
+                position: absolute;
+                width: px2rem(1px);
+                top: px2rem(30px);
+                bottom: 0;
+                right: px2rem(9px);
+                height: auto;
+                background-color: $Table-borderColor;
+            }
+        }
+
         > thead > tr > th.#{$ns}TableCell--sortable {
             padding-right: $TableCell-paddingX + $TableCell-sortBtn-width;
             position: relative;
@@ -307,39 +414,7 @@
             position: relative;
         }
 
-        &--withCombine {
-            > thead > tr > th,
-            > tbody > tr > td {
-                &:first-child {
-                    padding-left: $TableCell-paddingX;
-                }
         
-                &:last-child {
-                    padding-right: $TableCell-paddingX;
-                }
-            }
-
-            // reset
-            > tbody > tr {
-                @if $Table-strip-bg !=transparent {
-                    &.#{$ns}Table-tr--odd {
-                        background-color: transparent;
-                    }
-                }
-
-                &:hover {
-                    background-color: transparent;
-                }
-
-                > td {
-                    vertical-align: middle;
-                }
-
-                > td:not(:last-child) {
-                    border-right: $Table-borderWidth solid $Table-borderColor;
-                }
-            }
-        }
     }
 
     &Cell-sortBtn {
@@ -545,7 +620,10 @@
         }
     }
     
+
     &-expandBtn {
+        position: relative;
+        z-index: 1;
         > i  {
             display: inline-block;
             width: px2rem(16px);

src/renderers/Table.tsx

@@ -54,6 +54,11 @@ export interface TableProps extends RendererProps {
         expandAll?: boolean;
         accordion?: boolean;
     };
+    expandConfig?: {
+        expand?: 'first' | 'all' | 'none';
+        expandAll?: boolean;
+        accordion?: boolean;
+    },
     itemCheckableOn?: string;
     itemDraggableOn?: string;
     itemActions?: Array<Action>;
@@ -77,6 +82,8 @@ export default class Table extends React.Component<TableProps, object> {
         'headerToolbarRender',
         'footer',
         'footerToolbarRender',
+        'footable',
+        'expandConfig',
         'placeholder',
         'tableClassName',
         'source',
@@ -203,6 +210,7 @@ export default class Table extends React.Component<TableProps, object> {
             itemDraggableOn,
             hideCheckToggler,
             combineNum,
+            expandConfig,
         } = this.props;
 
         store.update({
@@ -214,6 +222,7 @@ export default class Table extends React.Component<TableProps, object> {
             orderDir,
             multiple,
             footable,
+            expandConfig,
             primaryField,
             itemCheckableOn,
             itemDraggableOn,
@@ -265,6 +274,7 @@ export default class Table extends React.Component<TableProps, object> {
                     'itemDraggableOn',
                     'hideCheckToggler',
                     'combineNum',
+                    'expandConfig'
                 ],
                 props,
                 nextProps
@@ -283,6 +293,7 @@ export default class Table extends React.Component<TableProps, object> {
                 itemDraggableOn: nextProps.itemDraggableOn,
                 hideCheckToggler: nextProps.hideCheckToggler,
                 combineNum: nextProps.combineNum,
+                expandConfig: nextProps.expandConfig
             });
         }
 
@@ -730,11 +741,13 @@ export default class Table extends React.Component<TableProps, object> {
             return (
                 <th {...props} className={cx(column.pristine.className)}>
                     {store.footable && (store.footable.expandAll === false || store.footable.accordion) 
+                    || store.expandConfig && (store.expandConfig.expandAll === false || store.expandConfig.accordion)
                         ? null 
                         : (
                             <a
                                 className={cx('Table-expandBtn', store.allExpanded  ? 'is-active' : '')}
                                 data-tooltip="展开/收起全部"
+                                data-position="top"
                                 onClick={store.toggleExpandAll}
                             >
                                 <i />
@@ -865,10 +878,15 @@ export default class Table extends React.Component<TableProps, object> {
         } else if (column.type === '__expandme') {
             return (
                 <td key={props.key} className={cx(column.pristine.className)}>
+                    {item.depth > 2 ? Array.from({length: item.depth - 2}).map((_, index) => (
+                        <i key={index} className={cx('Table-divider-' + (index+1))}/>
+                    )) : null}
+
                     {item.expandable ? (
                         <a
                             className={cx('Table-expandBtn', item.expanded  ? 'is-active' : '')}
                             data-tooltip="展开/收起"
+                            data-position="top"
                             onClick={item.toggleExpanded}
                         >
                             <i />
@@ -1244,9 +1262,9 @@ export default class Table extends React.Component<TableProps, object> {
     }
 
     renderRows(rows: Array<any>): any {
-        const {store, rowClassName, onAction, buildItemProps, checkOnItemClick, classPrefix: ns} = this.props;
+        const {store, rowClassName, onAction, buildItemProps, checkOnItemClick, classPrefix: ns, classnames: cx} = this.props;
 
-        return flatMap(rows, (item: IRow, rowIndex: number) => {
+        return rows.map((item: IRow, rowIndex: number) => {
             const itemProps = buildItemProps ? buildItemProps(item, rowIndex) : null;
             
             const doms = [
@@ -1257,7 +1275,10 @@ export default class Table extends React.Component<TableProps, object> {
                     key={item.id}
                     itemIndex={rowIndex}
                     item={item}
-                    itemClassName={rowClassName}
+                    itemClassName={cx(rowClassName, {
+                        'is-last': item.depth > 1 && rowIndex === rows.length - 1,
+                        'is-expanded': item.expanded
+                    })}
                     columns={store.filteredColumns}
                     renderCell={this.renderCell}
                     onAction={onAction}

src/store/table.ts

@@ -154,6 +154,7 @@ export const TableStore = iRendererStore
         selectable: false,
         multiple: true,
         footable: types.frozen(),
+        expandConfig: types.frozen(),
         isNested: false,
         columnsTogglable: types.optional(types.union(types.boolean, types.literal('auto')), 'auto'),
         itemCheckableOn: '',
@@ -399,6 +400,7 @@ export const TableStore = iRendererStore
 
             config.multiple !== void 0 && (self.multiple = config.multiple);
             config.footable !== void 0 && (self.footable = config.footable);
+            config.expandConfig !== void 0 && (self.expandConfig = config.expandConfig);
             config.itemCheckableOn !== void 0 && (self.itemCheckableOn = config.itemCheckableOn);
             config.itemDraggableOn !== void 0 && (self.itemDraggableOn = config.itemDraggableOn);
             config.hideCheckToggler !== void 0 && (self.hideCheckToggler = !!config.hideCheckToggler);
@@ -556,9 +558,13 @@ export const TableStore = iRendererStore
             self.isNested = self.rows.some(item => item.expandable);
 
             const expand = self.footable && self.footable.expand;
-            if (expand === 'first') {
+            if (expand === 'first' || self.expandConfig && self.expandConfig.expand === 'first') {
                 self.rows.length && self.expandedRows.push(self.rows[0]);
-            } else if (expand === 'all' && !self.footable.accordion) {
+            } else if (
+                expand === 'all' && !self.footable.accordion 
+                || self.expandConfig && self.expandConfig.expand === 'all'
+                    && !self.expandConfig.accordion
+            ) {
                 self.expandedRows.replace(self.rows);
             }
 
@@ -614,11 +620,17 @@ export const TableStore = iRendererStore
         function toggleExpanded(row:IRow) {
             const idx = self.expandedRows.indexOf(row);
 
-            ~idx
+            if (~idx) {
-            ? self.expandedRows.splice(idx, 1)
+                self.expandedRows.splice(idx, 1)
-            : self.footable && self.footable.accordion
+            } else if (self.footable && self.footable.accordion) {
-                ? self.expandedRows.replace([row])
+                self.expandedRows.replace([row]);
-                : self.expandedRows.push(row);
+            } else if (self.expandConfig && self.expandConfig.accordion) {
+                let rows = self.expandedRows.filter(item => item.depth !== row.depth);
+                rows.push(row);
+                self.expandedRows.replace(rows);
+            } else {
+                self.expandedRows.push(row);
+            }
         }
 
         function setOrderByInfo(key:string, direction: 'asc' | 'desc') {