test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

美化 Table Nested 样式

Browse Source
This commit is contained in:
liaoxuezhi 2019-08-13 20:06:41 +08:00
parent a09189723b
commit e1c0d07220
4 changed files with 163 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/components/CRUD/Nested.jsx
View File

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

154
scss/components/_table.scss
View File

@ -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,
> span {
margin-left: 20px * ($i - 1);
position: relative;
&::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 {
@ -544,8 +619,11 @@
lighten($Table-thead-borderColor, 2.5%);
}
}
&-expandBtn {
position: relative;
z-index: 1;
> i {
display: inline-block;
width: px2rem(16px);

27
src/renderers/Table.tsx
View File

@ -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}

26
src/store/table.ts
View File

@ -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
? self.expandedRows.splice(idx, 1)
: self.footable && self.footable.accordion
? self.expandedRows.replace([row])
: self.expandedRows.push(row);
if (~idx) {
self.expandedRows.splice(idx, 1)
} else if (self.footable && self.footable.accordion) {
self.expandedRows.replace([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') {