footable 支持 accordion 和样式调整

scss/_variables.scss

@@ -475,6 +475,11 @@ $Table-heading-bg: $white !default;
 $Table--unsaved-heading-bg: #e8f0fe !default;
 $Table--unsaved-heading-color: #4285f4 !default;
 
+$Table-expandBtn-vendor: "FontAwesome" !default;
+$Table-expandBtn-fontSize: px2rem(20px) !default;
+$Table-expandBtn-color: $info !default;
+$Table-expandBtn-icon: "\f105" !default;
+
 $TableCell-sortBtn-width: px2rem(8px) !default;
 $TableCell-sortBtn--down-iconVendor: "fontAwesome" !default;
 $TableCell-sortBtn--down-icon: "\f0dd" !default;

scss/components/_table.scss

@@ -544,6 +544,31 @@
                 lighten($Table-thead-borderColor, 2.5%);
         }
     }
+
+    &-expandBtn {
+        > i  {
+            display: inline-block;
+            width: px2rem(16px);
+            text-align: center;
+            cursor: pointer;
+            font-style: normal;
+
+            &:before {
+                display: inline-block;
+                line-height: 1.0;
+                font-size: $Table-expandBtn-fontSize;
+                color: $Table-expandBtn-color;
+                font-family: $Table-expandBtn-vendor;
+                content: $Table-expandBtn-icon;
+                transition: transform ease-in-out 0.2s;
+            }
+        }
+
+        &.is-active > i::before {
+            transform: rotate(90deg);
+            transform-origin: 50% 50%;
+        }
+    }
 }
 
 .#{$ns}OperationField {

src/renderers/Table.tsx

@@ -49,7 +49,11 @@ export interface TableProps extends RendererProps {
     columnsTogglable?: boolean | 'auto';
     affixHeader?: boolean;
     combineNum?: number;
-    footable?: boolean;
+    footable?: boolean | {
+        expand?: 'first' | 'all' | 'none';
+        expandAll?: boolean;
+        accordion?: boolean;
+    };
     itemCheckableOn?: string;
     itemDraggableOn?: string;
     itemActions?: Array<Action>;
@@ -725,17 +729,17 @@ export default class Table extends React.Component<TableProps, object> {
         } else if (column.type === '__expandme') {
             return (
                 <th {...props} className={cx(column.pristine.className)}>
-                    <Button
+                    {store.footable && (store.footable.expandAll === false || store.footable.accordion) 
-                        className={cx('Table-expandBtn')}
+                        ? null 
-                        classPrefix={ns}
+                        : (
-                        size="xs"
+                            <a
-                        level="link"
+                                className={cx('Table-expandBtn', store.allExpanded  ? 'is-active' : '')}
-                        tooltip="展开/收起全部"
+                                data-tooltip="展开/收起全部"
-                        tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
+                                onClick={store.toggleExpandAll}
-                        onClick={store.toggleExpandAll}
+                            >
-                    >
+                                <i />
-                        <i className={store.allExpanded ? 'fa fa-minus' : 'fa fa-plus'} />
+                            </a>
-                    </Button>
+                        )}
                 </th>
             );
         }
@@ -862,17 +866,13 @@ export default class Table extends React.Component<TableProps, object> {
             return (
                 <td key={props.key} className={cx(column.pristine.className)}>
                     {item.expandable ? (
-                        <Button
+                        <a
-                            className={cx('Table-expandBtn')}
+                            className={cx('Table-expandBtn', item.expanded  ? 'is-active' : '')}
-                            classPrefix={ns}
+                            data-tooltip="展开/收起"
-                            size="xs"
-                            level="link"
-                            tooltip="展开/收起"
-                            tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
                             onClick={item.toggleExpanded}
                         >
-                            <i className={item.expanded ? 'fa fa-minus' : 'fa fa-plus'} />
+                            <i />
-                        </Button>
+                        </a>
                     ) : null}
                 </td>
             );

src/store/table.ts

@@ -558,7 +558,7 @@ export const TableStore = iRendererStore
             const expand = self.footable && self.footable.expand;
             if (expand === 'first') {
                 self.rows.length && self.expandedRows.push(self.rows[0]);
-            } else if (expand === 'all') {
+            } else if (expand === 'all' && !self.footable.accordion) {
                 self.expandedRows.replace(self.rows);
             }
 
@@ -613,7 +613,12 @@ export const TableStore = iRendererStore
 
         function toggleExpanded(row:IRow) {
             const idx = self.expandedRows.indexOf(row);
-            ~idx ? self.expandedRows.splice(idx, 1) : self.expandedRows.push(row);
+
+            ~idx
+            ? self.expandedRows.splice(idx, 1)
+            : self.footable && self.footable.accordion
+                ? self.expandedRows.replace([row])
+                : self.expandedRows.push(row);
         }
 
         function setOrderByInfo(key:string, direction: 'asc' | 'desc') {