Skip to content

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

增加拖动列排序

parent add74c78
Hide whitespace changes
Inline Side-by-side
Showing with 501 additions and 383 deletions
components/apolloTable/component/DragFixed.tsx
View file @ 49fb06fc
...@@ -90,6 +90,7 @@ const DragFixed = (props: any) => { ...@@ -90,6 +90,7 @@ const DragFixed = (props: any) => {
dividerWrap.style.display = 'none'; dividerWrap.style.display = 'none';
// 滑块wrap移除hovered样式 // 滑块wrap移除hovered样式
handleWrap.classList.remove(styles.hovered); handleWrap.classList.remove(styles.hovered);
handleWrap.style.top = `${initTop}px`;
handleWrap.style.left = fixedWidth; handleWrap.style.left = fixedWidth;
// 滑块隐藏 // 滑块隐藏
handle.style.opacity = 0; handle.style.opacity = 0;
......
components/apolloTable/component/DragSorted.less 0 → 100644
View file @ 49fb06fc
@import '../common';
.draggableDiv{
cursor: move;
}
\ No newline at end of file
components/apolloTable/component/DragSorted.tsx
View file @ 49fb06fc
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Draggable } from 'react-beautiful-dnd'; import classNames from 'classnames';
import s from './DragSorted.less';
const DragSorted = (props) => { const DragSorted = (props: any) => {
// using useCallback is optional const { className, style, columnConfig, onDropFinish, onScroll } = props;
const onBeforeCapture = useCallback(() => {}, []); // 表格
const onBeforeDragStart = useCallback(() => {}, []); const container: any = document.querySelector('#tableContainer');
const onDragStart = useCallback(() => { // 拖拽列时的影子div
debugger; const columnCopyDiv: any = document.querySelector('#columnCopyDiv');
// 分割线wrap
const dividerWrap: any = document.querySelector('#dividerWrap');
// 分割线
const divider: any = document.querySelector('#divider');
// 左侧固定列分割线
const leftFixedHandleWrap: any = document.querySelector('#leftFixedHandleWrap');
// ? 拖动目标事件
// 开始拖动
const onDragStart = useCallback((e) => {
// 表格初始位置x点
const originLeft = container.getBoundingClientRect().x || 0;
// 拖动列矩形
const targetRect = e.target.getBoundingClientRect();
// 影子div显示
columnCopyDiv.style.display = 'block';
// 影子div初始x位置=拖动列x点-表格x点
columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
// 影子div宽度=拖动列宽度
columnCopyDiv.style.width = `${targetRect.width}px`;
// 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
const detaX = e.clientX - targetRect.x;
columnCopyDiv.setAttribute('data-deta-x', detaX);
// 将拖动列信息加入拖拽事件dataTransfer中，方便后续使用
e.dataTransfer.setData('dragColumn', JSON.stringify(columnConfig));
// debugger
divider.style.left = `${targetRect.x - originLeft}px`;
dividerWrap.style.display = 'block';
}, [columnConfig.columnName]);
// 拖动中
const onDragUpdate = useCallback((e) => {
// 拖动列矩形
const targetRect = e.target.getBoundingClientRect();
const tableRect = container.getBoundingClientRect();
const detaX = columnCopyDiv.getAttribute('data-deta-x');
const left = e.clientX - tableRect.x - detaX;
console.log('left: ', left);
// 影子div随鼠标移动
columnCopyDiv.style.left = `${left}px`;
}, []);
// 停止拖动
const onDragEnd = useCallback((e) => {
// 停止拖动时隐藏影子div
columnCopyDiv.style.display = 'none';
dividerWrap.style.display = 'none';
console.log('stop: ');
}, []); }, []);
const onDragUpdate = useCallback(() => {}, []); // ? 投放目标事件
const onDragEnd = useCallback(() => {}, []); // 在投放目标中移动
const onDragOver = useCallback((e) => {
const tableRect = container.getBoundingClientRect();
const targetRect = e.target.getBoundingClientRect();
const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
const leftFixedHandleWrapRect = leftFixedHandleWrap.getBoundingClientRect();
const targetWidth = targetRect.width;
const targetX = targetRect.x;
const columnCopyDivWidth = columnCopyDivRect.width;
const columnCopyDivX = columnCopyDivRect.x;
// 影子div中间点的x坐标
const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
// 影子div中点在投放目标中
divider.style.left = `${targetRect.x - tableRect.x}px`;
}
if (typeof onScroll === 'function') {
if (e.clientX > tableRect.right - 30) {
onScroll('right', 100);
} else if (e.clientX > tableRect.right - 100) {
onScroll('right', 10);
} else if (e.clientX < leftFixedHandleWrapRect.x + 100) {
onScroll('left', 10);
} else if (e.clientX < leftFixedHandleWrapRect.x + 30) {
onScroll('left', 100);
}
}
// 元素默认是不能够投放，需在目标元素的dragover事件中取消默认事件
var event = e || window.event;
event.preventDefault()
}, []);
// 在投放目标中松开鼠标
const onDrop = useCallback((e) => {
const targetRect = e.target.getBoundingClientRect();
const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
const targetWidth = targetRect.width;
const targetX = targetRect.x;
const columnCopyDivWidth = columnCopyDivRect.width;
const columnCopyDivX = columnCopyDivRect.x;
// 影子div中间点的x坐标
const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
// 影子div中点在投放目标中
try {
const dragColumn = JSON.parse(e.dataTransfer.getData('dragColumn'));
const dropColumn = columnConfig;
if (typeof onDropFinish === 'function') {
onDropFinish(dragColumn, dropColumn);
}
} catch (e) {
console.error('json解析失败')
}
}
}, [columnConfig.columnName]);
return ( return (
<Draggable draggableId="draggable-1" index={0}> <div
{(provided, snapshot) => ( className={classNames(s.draggableDiv, className)}
<div style={style}
ref={provided.innerRef} draggable={true}
{...provided.draggableProps} onDragStart={onDragStart}
{...provided.dragHandleProps} onDrag={onDragUpdate}
> onDragEnd={onDragEnd}
{props.children} onDragOver={onDragOver}
</div> onDrop={onDrop}
)} >
</Draggable> {props.children}
</div>
); );
}; };
export default DragSorted; export default DragSorted;
components/apolloTable/component/Table.less
View file @ 49fb06fc
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border: 1px solid @borderColor; border: 1px solid @borderColor;
overflow: hidden;
&.scroll { &.scroll {
height: 100%; height: 100%;
.loading { .loading {
...@@ -114,8 +115,9 @@ ...@@ -114,8 +115,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.4);
z-index: 20; z-index: 4;
display: none; display: none;
pointer-events: none;
.widthHandle { .widthHandle {
position: absolute; position: absolute;
cursor: ew-resize; cursor: ew-resize;
...@@ -134,3 +136,12 @@ ...@@ -134,3 +136,12 @@
z-index: 1; z-index: 1;
background: #ececec; background: #ececec;
} }
.columnCopyDiv{
position: absolute;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
z-index: 5;
pointer-events: none;
display: none;
}
\ No newline at end of file
components/apolloTable/component/Table.tsx
View file @ 49fb06fc
...@@ -2,7 +2,6 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd'; import { Empty, Spin } from 'antd';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized'; import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable, ResizableBox } from 'react-resizable'; import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash'; import _ from 'lodash';
...@@ -284,14 +283,31 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -284,14 +283,31 @@ export default class AirTable extends Component<TableProps, TableState> {
}, },
); );
}; };
onScrollHor = (direction: string, step: number) => {
// 拖动超过视图范围，将表格左右滚动
if (this.grid4) {
if (direction === 'right') {
if (this.grid4.state.scrollLeft >= this.grid4.getTotalColumnsWidth() - this.state.tableWidth - 100) {
console.log('已经到最右侧了')
return;
}
this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft + step });
} else {
if (this.grid4.state.scrollLeft <= 0) {
console.log('已经到最左侧了')
return;
}
this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft - step });
}
}
}
// 渲染表头 // 渲染表头
renderHeaderCell = ( renderHeaderCell = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string }, { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
{ columnIndex, key, style }: any, { columnIndex, key, style }: any,
) => { ) => {
if (showColumns.length === 0) return null; if (showColumns.length === 0) return null;
const { sortConfig, showIndex, rowSelection, dataSource } = this.props; const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted } = this.props;
const { const {
columnType = 1, columnType = 1,
columnName, columnName,
...@@ -303,42 +319,40 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -303,42 +319,40 @@ export default class AirTable extends Component<TableProps, TableState> {
requiredFlag, requiredFlag,
} = showColumns[columnIndex]; } = showColumns[columnIndex];
return ( return (
<div className={styles.headerCell} key={key} style={style}> <DragSorted columnConfig={showColumns[columnIndex]} onDropFinish={onDragSorted} onScroll={this.onScrollHor} className={styles.headerCell} key={key} style={style}>
<DragSorted> <ResizableBox
<ResizableBox width={style.width}
width={style.width} handle={
handle={ <span
<span className={styles.handleWidth}
className={styles.handleWidth} onClick={(e) => {
onClick={(e) => { e.stopPropagation();
e.stopPropagation(); }}
}}
/>
}
minConstraints={[100, 100]}
onResize={this.onResizeWidth}
onResizeStart={this.onResizeWidthStart}
onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<Column
columnType={String(columnType)}
columnName={columnName}
columnChsName={columnChsName}
columnAttrObj={columnAttrObj}
sortFlag={sortFlag}
sortConfig={sortConfig}
columnIndex={columnIndex}
showIndex={position === 'right' ? false : showIndex}
questionText={questionText}
rowSelection={position === 'right' ? false : rowSelection}
dataSource={dataSource}
icon={icon}
required={requiredFlag}
/> />
</ResizableBox> }
</DragSorted> minConstraints={[100, 100]}
</div> onResize={this.onResizeWidth}
onResizeStart={this.onResizeWidthStart}
onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<Column
columnType={String(columnType)}
columnName={columnName}
columnChsName={columnChsName}
columnAttrObj={columnAttrObj}
sortFlag={sortFlag}
sortConfig={sortConfig}
columnIndex={columnIndex}
showIndex={position === 'right' ? false : showIndex}
questionText={questionText}
rowSelection={position === 'right' ? false : rowSelection}
dataSource={dataSource}
icon={icon}
required={requiredFlag}
/>
</ResizableBox>
</DragSorted>
); );
}; };
...@@ -442,6 +456,8 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -442,6 +456,8 @@ export default class AirTable extends Component<TableProps, TableState> {
const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
const scrollbarWidth = scrollbarSize() || 0; const scrollbarWidth = scrollbarSize() || 0;
const showColumns = this.memoizeColumns(columns); const showColumns = this.memoizeColumns(columns);
const leftColumns = this.memoizeLeftColumns(columns); const leftColumns = this.memoizeLeftColumns(columns);
const rightColumns = this.memoizeRightColumns(columns); const rightColumns = this.memoizeRightColumns(columns);
// 有隐藏列时，修正数据与列头不匹配问题 // 有隐藏列时，修正数据与列头不匹配问题
...@@ -455,13 +471,8 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -455,13 +471,8 @@ export default class AirTable extends Component<TableProps, TableState> {
const rowCount = showData.length; const rowCount = showData.length;
const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns); const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns);
const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns); const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns);
// let totalHeight: number = rowCount * rowHeight;
let totalHeight: number = tableHeight - headerHeight; let totalHeight: number = tableHeight - headerHeight;
const { totalWidth } = this.memoizeTotalWidth(showColumns); const { totalWidth } = this.memoizeTotalWidth(showColumns);
// if (rowCount > 0 && totalWidth > tableWidth) {
// // totalHeight = rowCount * rowHeight + scrollbarWidth;
// totalHeight = tableHeight + scrollbarWidth;
// }
let realWidth = tableWidth; let realWidth = tableWidth;
let paddingRight = 0; let paddingRight = 0;
if (rowCount > 0 && rowCount * rowHeight > totalHeight) { if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
...@@ -474,344 +485,328 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -474,344 +485,328 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync> <ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => { {({ onScroll, scrollLeft, scrollTop }: any) => {
return ( return (
<DragDropContext>
<Droppable droppableId="droppable-1" type="PERSON"> <div
{(provided, snapshot) => ( className={
<div this.props.onScroll
ref={provided.innerRef} ? classNames(styles.tableContainer, styles.scroll)
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }} : styles.tableContainer
{...provided.droppableProps} }
> style={{
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
id="tableContainer"
ref={(dom) => {
this.tableContainer = dom;
}}
>
{totalWidth > tableWidth && leftCount > 0 && (
<div
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 左侧表头
<div <div
className={ className={styles.leftSideHeaderContainer}
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
style={{ style={{
paddingRight: this.props.onScroll ? paddingRight : 0, left: 0,
}} }}
id="tableContainer" >
ref={(dom) => { <Grid
this.tableContainer = dom; ref={(dom: any) => {
this.grid1 = dom;
}}
className={styles.headerGrid}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: leftColumns,
})}
columnCount={leftCount}
width={leftWidth}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: leftColumns,
})}
/>
</div>
}
{
// 左侧固定列
<div
className={styles.leftSideGridContainer}
style={{
left: 0,
top: headerHeight,
}} }}
> >
{totalWidth > tableWidth && leftCount > 0 && ( <Grid
<div ref={(dom: any) => {
className={styles.leftSideContainer} this.grid2 = dom;
style={{ }}
width: `${leftWidth}px`, className={styles.sideGrid}
height: `${totalHeight - overscanRowCount={overscanRowCount}
scrollbarWidth + cellRenderer={this.renderBodyCell.bind(this, {
headerHeight}px`, showColumns: leftColumns,
}} showData: leftData,
> position: 'left',
{ })}
// 左侧表头 columnWidth={this.getColumnWidth.bind(this, {
<div columns: showColumns,
className={styles.leftSideHeaderContainer} showColumns: leftColumns,
style={{ })}
left: 0, onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div>
}
</div>
)}
{canFixed && (
<LeftDragFixed
initLeft={leftWidth}
initTop={headerHeight}
tableWidth={tableWidth}
showColumns={showColumns}
columnWidth={columnWidth}
columns={columns}
onResizeStart={this.onResizeStartLeftDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
/>
)}
<div className={styles.centerContainer}>
<AutoSizer onResize={this.onResize}>
{({ width, height }: any) => {
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor:
'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
>
<Grid
ref={(dom: any) => {
this.grid3 = dom;
}} }}
> className={styles.headerGrid}
<Grid overscanColumnCount={
ref={(dom: any) => { overscanColumnCount
this.grid1 = dom; }
}} columnWidth={this.getColumnWidth.bind(
className={styles.headerGrid} this,
columnWidth={this.getColumnWidth.bind(this, { {
columns: showColumns, columns: showColumns,
showColumns: leftColumns, showColumns,
})} },
columnCount={leftCount} )}
width={leftWidth} columnCount={columnCount}
rowHeight={headerHeight} width={width}
rowCount={1} rowHeight={headerHeight}
height={headerHeight} rowCount={1}
cellRenderer={this.renderHeaderCell.bind(this, { height={headerHeight}
showColumns: leftColumns, scrollLeft={scrollLeft}
})} cellRenderer={this.renderHeaderCell.bind(
/> this,
</div> {
} showColumns,
{ },
// 左侧固定列 )}
<div />
className={styles.leftSideGridContainer} </div>
style={{ }
left: 0, {
top: headerHeight, // 中部内容
}} <div
> style={{
height: totalHeight,
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid <Grid
ref={(dom: any) => { ref={(dom: any) => {
this.grid2 = dom; this.grid4 = dom;
}} }}
className={styles.sideGrid} className={styles.centerGrid}
overscanRowCount={overscanRowCount} overscanColumnCount={
cellRenderer={this.renderBodyCell.bind(this, { overscanColumnCount
showColumns: leftColumns,
showData: leftData,
position: 'left',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: leftColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div>
}
</div>
)}
{canFixed && (
<LeftDragFixed
initLeft={leftWidth}
initTop={headerHeight}
tableWidth={tableWidth}
showColumns={showColumns}
columnWidth={columnWidth}
columns={columns}
onResizeStart={this.onResizeStartLeftDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
/>
)}
<div className={styles.centerContainer}>
<AutoSizer onResize={this.onResize}>
{({ width, height }: any) => {
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor:
'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
>
<Grid
ref={(dom: any) => {
this.grid3 = dom;
}}
className={styles.headerGrid}
overscanColumnCount={
overscanColumnCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns,
showColumns,
},
)}
columnCount={columnCount}
width={width}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell.bind(
this,
{
showColumns,
},
)}
/>
</div>
} }
{ overscanRowCount={
// 中部内容 overscanRowCount
<div
style={{
height: totalHeight,
// height: height - headerHeight,
// minHeight:
// !dataSource || dataSource.length === 0
// ? '300px'
// : 'auto',
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid
ref={(dom: any) => {
this.grid4 = dom;
}}
className={styles.centerGrid}
overscanColumnCount={
overscanColumnCount
}
overscanRowCount={
overscanRowCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns,
showColumns,
},
)}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowCount={rowCount}
onScroll={(
...arg: Array<Object>
) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns,
showData,
position: 'center',
},
)}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={
styles.defaultEmpty
}
description={
noDataPlaceholder ||
locale.empty
}
/>
)
)}
</div>
} }
</div> columnWidth={this.getColumnWidth.bind(
); this,
}} {
</AutoSizer> columns: showColumns,
</div> showColumns,
{totalWidth > tableWidth && rightCount > 0 && ( },
<div )}
className={styles.rightSideContainer} columnCount={columnCount}
style={{ width={realWidth}
width: `${rightWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
}}
>
<Grid
ref={(dom: any) => {
this.grid5 = dom;
}}
className={styles.headerGrid}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})}
columnCount={rightCount}
width={rightWidth}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: rightColumns,
position: 'right',
})}
/>
</div>
}
{
// 右侧固定列
<div
className={styles.rightSideGridContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
marginRight: -scrollbarWidth,
}}
>
<Grid
ref={(dom: any) => {
this.grid6 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: rightColumns,
showData: rightData,
position: 'right',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={rightCount}
width={rightWidth + scrollbarWidth}
rowHeight={rowHeight} rowHeight={rowHeight}
rowCount={rowCount} rowCount={rowCount}
height={totalHeight - scrollbarWidth} onScroll={(
...arg: Array<Object>
) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop} scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns,
showData,
position: 'center',
},
)}
/> />
</div> ) : (
} columnCount > 0 &&
</div> !loading && (
)} <Empty
<div className={styles.fillHandleWrapper} /> className={
<div styles.defaultEmpty
className={styles.loading} }
style={{ top: `${totalHeight / 2}px` }} description={
> noDataPlaceholder ||
{loading && (loadComp ? loadComp : <Spin />)} locale.empty
}
/>
)
)}
</div>
}
</div> </div>
<div );
className={styles.widthHandleWrapper} }}
id="dividerWrap" </AutoSizer>
ref={(dom) => { </div>
this.widthHandleWrapper = dom; {totalWidth > tableWidth && rightCount > 0 && (
<div
className={styles.rightSideContainer}
style={{
width: `${rightWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
}}
>
<Grid
ref={(dom: any) => {
this.grid5 = dom;
}} }}
> className={styles.headerGrid}
<div columnWidth={this.getColumnWidth.bind(this, {
className={styles.widthHandle} columns: showColumns,
id="divider" showColumns: rightColumns,
ref={(dom) => { })}
this.widthHandle = dom; columnCount={rightCount}
}} width={rightWidth}
/> rowHeight={headerHeight}
</div> rowCount={1}
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: rightColumns,
position: 'right',
})}
/>
</div>
}
{
// 右侧固定列
<div
className={styles.rightSideGridContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
marginRight: -scrollbarWidth,
}}
>
<Grid
ref={(dom: any) => {
this.grid6 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: rightColumns,
showData: rightData,
position: 'right',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={rightCount}
width={rightWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div> </div>
{provided.placeholder} }
</div> </div>
)} )}
</Droppable> <div className={styles.fillHandleWrapper} />
</DragDropContext> <div
className={styles.loading}
style={{ top: `${totalHeight / 2}px` }}
>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
<div
className={styles.widthHandleWrapper}
id="dividerWrap"
ref={(dom) => {
this.widthHandleWrapper = dom;
}}
>
<div
className={styles.widthHandle}
id="divider"
ref={(dom) => {
this.widthHandle = dom;
}}
/>
</div>
<div id="columnCopyDiv" className={styles.columnCopyDiv} />
</div>
); );
}} }}
</ScrollSync> </ScrollSync>
......
components/apolloTable/component/index.tsx
View file @ 49fb06fc
...@@ -83,6 +83,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -83,6 +83,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
loadComp, loadComp,
showCondition, showCondition,
canFixed, canFixed,
onDragSorted,
} = this.props; } = this.props;
const sortConfig = const sortConfig =
operateConfig && operateConfig &&
...@@ -137,6 +138,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -137,6 +138,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
contentMenu={contentMenu} contentMenu={contentMenu}
loadComp={loadComp} loadComp={loadComp}
canFixed={canFixed} canFixed={canFixed}
onDragSorted={onDragSorted}
/> />
</div> </div>
</div> </div>
......
components/apolloTable/component/interface.tsx
View file @ 49fb06fc
...@@ -76,6 +76,7 @@ export interface TableProps extends LoadConfigProps { ...@@ -76,6 +76,7 @@ export interface TableProps extends LoadConfigProps {
canFixed?: boolean;// 是否可以拖拽自定义固定列 canFixed?: boolean;// 是否可以拖拽自定义固定列
canSorted?: boolean;// 是否可以拖拽自定义列排序 canSorted?: boolean;// 是否可以拖拽自定义列排序
canResized?: boolean;// 是否可以拖拽自定义列伸缩 canResized?: boolean;// 是否可以拖拽自定义列伸缩
onDragSorted?:Function;// 拖拽更改列排序回调
} }
export interface TableState { export interface TableState {
columns: ColumnProps[]; columns: ColumnProps[];
......
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