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) => {
dividerWrap.style.display = 'none';
// 滑块wrap移除hovered样式
handleWrap.classList.remove(styles.hovered);
handleWrap.style.top = `${initTop}px`;
handleWrap.style.left = fixedWidth;
// 滑块隐藏
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 { Draggable } from 'react-beautiful-dnd';
import classNames from 'classnames';
import s from './DragSorted.less';
const DragSorted = (props) => {
// using useCallback is optional
const onBeforeCapture = useCallback(() => {}, []);
const onBeforeDragStart = useCallback(() => {}, []);
const onDragStart = useCallback(() => {
debugger;
const DragSorted = (props: any) => {
const { className, style, columnConfig, onDropFinish, onScroll } = props;
// 表格
const container: any = document.querySelector('#tableContainer');
// 拖拽列时的影子div
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 (
<Draggable draggableId="draggable-1" index={0}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{props.children}
</div>
)}
</Draggable>
<div
className={classNames(s.draggableDiv, className)}
style={style}
draggable={true}
onDragStart={onDragStart}
onDrag={onDragUpdate}
onDragEnd={onDragEnd}
onDragOver={onDragOver}
onDrop={onDrop}
>
{props.children}
</div>
);
};
export default DragSorted;
components/apolloTable/component/Table.less
View file @ 49fb06fc
......@@ -5,6 +5,7 @@
display: flex;
flex-direction: row;
border: 1px solid @borderColor;
overflow: hidden;
&.scroll {
height: 100%;
.loading {
......@@ -114,8 +115,9 @@
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
z-index: 20;
z-index: 4;
display: none;
pointer-events: none;
.widthHandle {
position: absolute;
cursor: ew-resize;
......@@ -134,3 +136,12 @@
z-index: 1;
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';
import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash';
......@@ -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 = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string },
{ columnIndex, key, style }: any,
) => {
if (showColumns.length === 0) return null;
const { sortConfig, showIndex, rowSelection, dataSource } = this.props;
const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted } = this.props;
const {
columnType = 1,
columnName,
......@@ -303,42 +319,40 @@ export default class AirTable extends Component<TableProps, TableState> {
requiredFlag,
} = showColumns[columnIndex];
return (
<div className={styles.headerCell} key={key} style={style}>
<DragSorted>
<ResizableBox
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
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}
<DragSorted columnConfig={showColumns[columnIndex]} onDropFinish={onDragSorted} onScroll={this.onScrollHor} className={styles.headerCell} key={key} style={style}>
<ResizableBox
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
/>
</ResizableBox>
</DragSorted>
</div>
}
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>
);
};
......@@ -442,6 +456,8 @@ export default class AirTable extends Component<TableProps, TableState> {
const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
const scrollbarWidth = scrollbarSize() || 0;
const showColumns = this.memoizeColumns(columns);
const leftColumns = this.memoizeLeftColumns(columns);
const rightColumns = this.memoizeRightColumns(columns);
// 有隐藏列时，修正数据与列头不匹配问题
......@@ -455,13 +471,8 @@ export default class AirTable extends Component<TableProps, TableState> {
const rowCount = showData.length;
const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns);
const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns);
// let totalHeight: number = rowCount * rowHeight;
let totalHeight: number = tableHeight - headerHeight;
const { totalWidth } = this.memoizeTotalWidth(showColumns);
// if (rowCount > 0 && totalWidth > tableWidth) {
// // totalHeight = rowCount * rowHeight + scrollbarWidth;
// totalHeight = tableHeight + scrollbarWidth;
// }
let realWidth = tableWidth;
let paddingRight = 0;
if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
......@@ -474,344 +485,328 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
<DragDropContext>
<Droppable droppableId="droppable-1" type="PERSON">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
{...provided.droppableProps}
>
<div
className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
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
className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
className={styles.leftSideHeaderContainer}
style={{
paddingRight: this.props.onScroll ? paddingRight : 0,
left: 0,
}}
id="tableContainer"
ref={(dom) => {
this.tableContainer = dom;
>
<Grid
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 && (
<div
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 左侧表头
<div
className={styles.leftSideHeaderContainer}
style={{
left: 0,
<Grid
ref={(dom: any) => {
this.grid2 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
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;
}}
>
<Grid
ref={(dom: any) => {
this.grid1 = dom;
}}
className={styles.headerGrid}
columnWidth={this.getColumnWidth.bind(this, {
className={styles.headerGrid}
overscanColumnCount={
overscanColumnCount
}
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,
}}
>
showColumns,
},
)}
columnCount={columnCount}
width={width}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell.bind(
this,
{
showColumns,
},
)}
/>
</div>
}
{
// 中部内容
<div
style={{
height: totalHeight,
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid
ref={(dom: any) => {
this.grid2 = dom;
this.grid4 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
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>
className={styles.centerGrid}
overscanColumnCount={
overscanColumnCount
}
{
// 中部内容
<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>
overscanRowCount={
overscanRowCount
}
</div>
);
}}
</AutoSizer>
</div>
{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}
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}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns,
showColumns,
},
)}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
onScroll={(
...arg: Array<Object>
) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns,
showData,
position: 'center',
},
)}
/>
</div>
}
</div>
)}
<div className={styles.fillHandleWrapper} />
<div
className={styles.loading}
style={{ top: `${totalHeight / 2}px` }}
>
{loading && (loadComp ? loadComp : <Spin />)}
) : (
columnCount > 0 &&
!loading && (
<Empty
className={
styles.defaultEmpty
}
description={
noDataPlaceholder ||
locale.empty
}
/>
)
)}
</div>
}
</div>
<div
className={styles.widthHandleWrapper}
id="dividerWrap"
ref={(dom) => {
this.widthHandleWrapper = dom;
);
}}
</AutoSizer>
</div>
{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;
}}
>
<div
className={styles.widthHandle}
id="divider"
ref={(dom) => {
this.widthHandle = dom;
}}
/>
</div>
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}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
}
</div>
)}
<div className={styles.fillHandleWrapper} />
<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>
......
components/apolloTable/component/index.tsx
View file @ 49fb06fc
......@@ -83,6 +83,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
loadComp,
showCondition,
canFixed,
onDragSorted,
} = this.props;
const sortConfig =
operateConfig &&
......@@ -137,6 +138,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
contentMenu={contentMenu}
loadComp={loadComp}
canFixed={canFixed}
onDragSorted={onDragSorted}
/>
</div>
</div>
......
components/apolloTable/component/interface.tsx
View file @ 49fb06fc
......@@ -76,6 +76,7 @@ export interface TableProps extends LoadConfigProps {
canFixed?: boolean;// 是否可以拖拽自定义固定列
canSorted?: boolean;// 是否可以拖拽自定义列排序
canResized?: boolean;// 是否可以拖拽自定义列伸缩
onDragSorted?:Function;// 拖拽更改列排序回调
}
export interface TableState {
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