Skip to content

S
submodule
Commit cf013df5 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

左侧固定列可滑动

parent 6f2e5aeb
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 26 deletions
components/apolloTable/component/Table.less
View file @ cf013df5
......@@ -20,6 +20,7 @@
position: absolute;
left: 0;
z-index: 1;
overflow: hidden;
}
.centerContainer {
display: flex;
......@@ -55,14 +56,13 @@
}
.sideGrid {
overflow: hidden !important;
//overflow: hidden !important;
outline: none;
}
.centerGrid {
outline: none;
}
.bodyRow {
}
.bodyCell {
font-size: 20px;
......@@ -103,17 +103,34 @@
left: 0;
right: 0;
pointer-events: none;
z-index: 2;
}
.defaultEmpty {
padding-top: 100px;
}
.handleWidth{
.widthHandleWrapper {
position: absolute;
cursor: ew-resize;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
z-index: 20;
display: none;
.widthHandle {
position: absolute;
cursor: ew-resize;
width: 2px;
height: 100%;
background-color: rgb(33, 150, 243);
}
}
.handleWidth {
position: absolute;
width: 10px;
width: 2px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
right: -1px;
cursor: ew-resize;
z-index: 1;
background: #ececec;
}
components/apolloTable/component/Table.tsx
View file @ cf013df5
......@@ -3,7 +3,7 @@ import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable } from 'react-resizable';
import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash';
import scrollbarSize from 'dom-helpers/scrollbarSize';
import styles from './Table.less';
......@@ -29,6 +29,7 @@ export default class AirTable extends Component<TableProps, TableState> {
grid5: any;
grid6: any;
tableContainer: any;
memoizeData: Function;
......@@ -67,6 +68,8 @@ export default class AirTable extends Component<TableProps, TableState> {
tableWidth: width,
tableHeight: height,
selectedCell: null,
showWidthHandle: false,
widthHandleLeft: 0,
};
this.config = {
overscanColumnCount: 5,
......@@ -218,6 +221,33 @@ export default class AirTable extends Component<TableProps, TableState> {
// 列伸缩回调
onResizeWidth = (columnName: string, e, { size }) => {
let originLeft =
this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
if (originLeft) {
originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
} else {
originLeft = 0;
}
this.setState({
widthHandleLeft: e.x - originLeft,
});
};
// 列伸缩开始
onResizeWidthStart = (columnName: string, e, { size }) => {
let originLeft =
this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
if (originLeft) {
originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
} else {
originLeft = 0;
}
this.setState({
showWidthHandle: true,
widthHandleLeft: e.x - originLeft,
});
};
// 列伸缩结束
onResizeWidthStop = (columnName: string, e, { size }) => {
const { columns } = this.state;
const newColumns: any = [];
columns.map((item) => {
......@@ -229,6 +259,7 @@ export default class AirTable extends Component<TableProps, TableState> {
this.setState(
{
columns: newColumns,
showWidthHandle: false,
},
() => {
this.grid1 && this.grid1.recomputeGridSize();
......@@ -259,20 +290,22 @@ export default class AirTable extends Component<TableProps, TableState> {
requiredFlag,
} = showColumns[columnIndex];
return (
<Resizable
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={this.onResizeWidth.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<div className={styles.headerCell} key={key} style={style}>
<div className={styles.headerCell} key={key} style={style}>
<ResizableBox
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
/>
}
// onResize={this.onResizeWidth.bind(this, columnName)}
// onResizeStart={this.onResizeWidthStart.bind(this, columnName)}
onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<Column
columnType={String(columnType)}
columnName={columnName}
......@@ -288,8 +321,8 @@ export default class AirTable extends Component<TableProps, TableState> {
icon={icon}
required={requiredFlag}
/>
</div>
</Resizable>
</ResizableBox>
</div>
);
};
......@@ -383,7 +416,7 @@ export default class AirTable extends Component<TableProps, TableState> {
render() {
const { loading, noDataPlaceholder, loadComp } = this.props;
const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state;
const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config;
const scrollbarWidth = scrollbarSize() || 0;
const showColumns = this.memoizeColumns(columns);
......@@ -428,6 +461,9 @@ export default class AirTable extends Component<TableProps, TableState> {
style={{
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
ref={(dom) => {
this.tableContainer = dom;
}}
>
{totalWidth > tableWidth && leftCount > 0 && (
<div
......@@ -489,8 +525,12 @@ export default class AirTable extends Component<TableProps, TableState> {
columns: showColumns,
showColumns: leftColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
columnCount={leftCount}
width={leftWidth}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
......@@ -569,6 +609,7 @@ export default class AirTable extends Component<TableProps, TableState> {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns,
......@@ -671,6 +712,12 @@ export default class AirTable extends Component<TableProps, TableState> {
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
<div
className={styles.widthHandleWrapper}
style={{ display: showWidthHandle ? 'block' : 'none' }}
>
<div className={styles.widthHandle} style={{ left: widthHandleLeft }} />
</div>
</div>
);
}}
......
components/apolloTable/component/interface.tsx
View file @ cf013df5
......@@ -79,6 +79,8 @@ export interface TableState {
tableHeight?: number;
tableWidth?: number;
selectedCell?: any;
showWidthHandle: boolean;
widthHandleLeft: number;
}
export interface CommonProps extends TableProps {
operateConfig?: OperateConfigProps;
......@@ -120,7 +122,7 @@ export interface CellProps {
contentMenu?: any;
selectedCell?: any;
changeSelectedCell?: Function;
position:string;
position: string;
}
export interface EditCellProps {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment