mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 11:07:52 +08:00
美化 Table Nested 样式
This commit is contained in:
liaoxuezhi
catchonme
parent
c70c4ac0c7
commit
155ecfa1cb
@ -4,6 +4,10 @@ export default {
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/mock2/crud/table2",
|
||||
expandConfig: {
|
||||
expand: 'first',
|
||||
accordion: true
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
|
||||
@ -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 {
|
||||
@ -545,7 +620,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-expandBtn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
> i {
|
||||
display: inline-block;
|
||||
width: px2rem(16px);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user