p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Table 新增表头分组功能

This commit is contained in:
liaoxuezhi 2019-05-27 17:27:17 +08:00
parent ca0651ab0f
commit 8307cfef18
6 changed files with 196 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/renderers/Column.md
View File

@ -5,6 +5,7 @@
- `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](./Field.md)和[Operation](./Operation.md)。
- `name` 用来关联列表数据中的变量 `key`。
- `label` 列标题。
- `groupName` 如果想要分组，请设置这个！
- `copyable` 开启后，会支持内容点击复制。
- `width` 列宽度。
- `popOver` 是否支持点击查看详情。当内容较长时，可以开启此配置。

6
examples/components/App.jsx
View File

@ -49,6 +49,7 @@ import KeyboardsCrudSchema from './CRUD/Keyboards';
import FootableCrudSchema from './CRUD/Footable';
import NestedCrudSchema from './CRUD/Nested';
import MergeCellSchema from './CRUD/MergeCell';
import HeaderGroupSchema from './CRUD/HeaderGroup';
import LoadOnceTableCrudSchema from './CRUD/LoadOnce';
import SdkTest from './Sdk/Test';
import JSONSchemaForm from './Form/Schem';
@ -297,6 +298,11 @@ const navigations = [
path: 'crud/merge-cell',
component: makeSchemaRenderer(MergeCellSchema)
},
{
label: '表头分组',
path: 'crud/header-group',
component: makeSchemaRenderer(HeaderGroupSchema)
},
{
label: '带边栏',
path: 'crud/aside',

107
examples/components/CRUD/HeaderGroup.jsx Normal file
View File

@ -0,0 +1,107 @@
export default {
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
title: "支持表头分组，通过在 cloumn 上设置 groupName 实现。",
body: {
type: "table",
data: {
items: [
{
"engine": "Trident",
"browser": "Internet Explorer 4.2",
"platform": "Win 95+",
"version": "4",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 4.2",
"platform": "Win 95+",
"version": "4",
"grade": "B"
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": "Win 95+",
"version": "4",
"grade": "C"
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": "Win 98",
"version": "3",
"grade": "A"
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": "Win 98",
"version": "4",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": "Win 98+ / OSX.2+",
"version": "4",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": "Win 98+ / OSX.2+",
"version": "5",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": "Win 98+ / OSX.2+",
"version": "5",
"grade": "B"
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": "Win 98+ / OSX.2+",
"version": "5",
"grade": "C"
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": "Win 98+ / OSX.2+",
"version": "5",
"grade": "D"
}
]
},
columns: [
{
name: "engine",
label: "Rendering engine",
groupName: "A"
},
{
name: "browser",
label: "Browser",
groupName: "A"
},
{
name: "platform",
label: "Platform(s)",
groupName: "B"
},
{
name: "version",
label: "Engine version",
groupName: "B"
},
{
name: "grade",
label: "CSS grade",
}
]
}
};

8
scss/components/_table.scss
View File

@ -148,6 +148,10 @@
background-color: $Table-thead-bg;
> th {
&[colspan] {
text-align: center;
}
padding: $TableCell-paddingY $TableCell-paddingX;
&:first-child {
@ -174,6 +178,10 @@
}
}
> thead > tr + tr {
border-top: $Table-borderWidth solid $Table-borderColor;
}
> tbody > tr {
border-top: $Table-borderWidth solid $Table-borderColor;

21
src/renderers/Table.tsx
View File

@ -896,6 +896,13 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-wrapper')}>
<table ref={this.affxiedTableRef} className={tableClassName}>
<thead>
{store.columnGroup.length ? (
<tr>
{store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th>
))}
</tr>
) : null}
<tr>
{store.filteredColumns.map(column =>
this.renderHeadCell(column, {
@ -928,6 +935,13 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName)}
>
<thead>
{store.columnGroup.length ? (
<tr>
{store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th>
))}
</tr>
) : null}
<tr>
{columns.map(column =>
this.renderHeadCell(column, {
@ -1341,6 +1355,13 @@ export default class Table extends React.Component<TableProps, object> {
>
<table ref={this.tableRef} className={tableClassName}>
<thead>
{store.columnGroup.length ? (
<tr>
{store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th>
))}
</tr>
) : null}
<tr>
{store.filteredColumns.map(column =>
this.renderHeadCell(column, {

54
src/store/table.ts
View File

@ -21,6 +21,7 @@ export const Column = types
label: types.optional(types.frozen(), undefined),
type: types.string,
name: types.maybe(types.string),
groupName: '',
toggled: false,
toggable: true,
searchable: types.maybe(types.frozen()),
@ -252,6 +253,53 @@ export const TableStore = iRendererStore
});
}
function getColumnGroup():Array<{
label: string,
colSpan: number
}> {
const columsn = getFilteredColumns();
const len = columsn.length;
if (!len) {
return [];
}
const result:Array<{
label: string,
colSpan: number
}> = [
{
label: columsn[0].groupName,
colSpan: 1
}
];
// 如果是勾选栏，让它和下一列合并。
if (columsn[0].type === '__checkme' && columsn[1]) {
result[0].label = columsn[1].groupName;
}
for (let i = 1; i < len; i++) {
let prev = result[result.length -1];
const current = columsn[i];
if (current.groupName === prev.label) {
prev.colSpan++;
} else {
result.push({
label: current.groupName,
colSpan: 1
});
}
}
if (result.length === 1 && !result[0].label) {
result.pop();
}
return result;
}
return {
get filteredColumns() {
return getFilteredColumns();
@ -326,7 +374,11 @@ export const TableStore = iRendererStore
return getHoverIndex();
},
getData
getData,
get columnGroup() {
return getColumnGroup();
}
};
})
.actions(self => {