forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

拖拽横向滚动条兼容固定列

This commit is contained in:
wanghaoo 2018-12-03 17:29:39 +08:00
parent 6870c36fa6
commit 7a65fac5fe
5 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
build/Table.js
View File

@ -368,8 +368,8 @@ var Table = function (_Component) {
Table.prototype.getHeader = function getHeader(columns, fixed) {
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
onFilterClear = _props.onFilterClear,
onFilterRowsDropChange = _props.onFilterRowsDropChange,
onFilterRowsChange = _props.onFilterRowsChange,
filterable = _props.filterable,
showHeader = _props.showHeader,
expandIconAsCell = _props.expandIconAsCell,
@ -421,9 +421,9 @@ var Table = function (_Component) {
rowStyle: trStyle,
fixed: fixed,
filterable: filterable,
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
, onFilterClear: onFilterClear //过滤行清除后回调
, filterDelay: filterDelay,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth,
contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth,
@ -749,8 +749,7 @@ var Table = function (_Component) {
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
getBodyWrapper = _props3.getBodyWrapper,
footerScroll = _props3.footerScroll,
headerScroll = _props3.headerScroll,
hideBodyScroll = _props3.hideBodyScroll;
headerScroll = _props3.headerScroll;
var useFixedHeader = this.props.useFixedHeader;
var bodyStyle = _extends({}, this.props.bodyStyle);
@ -786,6 +785,7 @@ var Table = function (_Component) {
//显示表头滚动条
if (headerScroll) {
if (fixed) {
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@ -796,8 +796,6 @@ var Table = function (_Component) {
//内容少，不用显示滚动条
if (this.domWidthDiff > 0) {
headStyle.overflowX = 'hidden';
} else if (hideBodyScroll) {
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = '0px';
}
@ -1024,8 +1022,10 @@ var Table = function (_Component) {
};
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
var _props$scroll = this.props.scroll,
scroll = _props$scroll === undefined ? {} : _props$scroll;
var _props8 = this.props,
_props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
@ -1052,7 +1052,7 @@ var Table = function (_Component) {
position = 'middle';
}
if (position) {
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + prefixCls + '-scroll-position-.+$')).add(prefixCls + '-scroll-position-' + position);
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
}
}
if (scroll.y) {

6
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

70
dist/demo.js vendored
View File

@ -10936,8 +10936,8 @@
Table.prototype.getHeader = function getHeader(columns, fixed) {
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
onFilterClear = _props.onFilterClear,
onFilterRowsDropChange = _props.onFilterRowsDropChange,
onFilterRowsChange = _props.onFilterRowsChange,
filterable = _props.filterable,
showHeader = _props.showHeader,
expandIconAsCell = _props.expandIconAsCell,
@ -10989,9 +10989,9 @@
rowStyle: trStyle,
fixed: fixed,
filterable: filterable,
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
, onFilterClear: onFilterClear //过滤行清除后回调
, filterDelay: filterDelay,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth,
contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth,
@ -11317,8 +11317,7 @@
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
getBodyWrapper = _props3.getBodyWrapper,
footerScroll = _props3.footerScroll,
headerScroll = _props3.headerScroll,
hideBodyScroll = _props3.hideBodyScroll;
headerScroll = _props3.headerScroll;
var useFixedHeader = this.props.useFixedHeader;
var bodyStyle = _extends({}, this.props.bodyStyle);
@ -11354,6 +11353,7 @@
//显示表头滚动条
if (headerScroll) {
if (fixed) {
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@ -11364,8 +11364,6 @@
//内容少，不用显示滚动条
if (this.domWidthDiff > 0) {
headStyle.overflowX = 'hidden';
} else if (hideBodyScroll) {
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = '0px';
}
@ -11592,8 +11590,10 @@
};
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
var _props$scroll = this.props.scroll,
scroll = _props$scroll === undefined ? {} : _props$scroll;
var _props8 = this.props,
_props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
@ -11619,11 +11619,9 @@
} else if (this.state.scrollPosition !== 'middle') {
position = 'middle';
}
// if(position){
// classes(this.contentTable)
// .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
// .add(`${prefixCls}-scroll-position-${position}`);
// }
if (position) {
(0, _componentClasses2['default'])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
}
}
if (scroll.y) {
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
@ -12719,7 +12717,10 @@
if (_this.drag.option === 'border') {
return;
}
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
// console.log('-------onDragStart----------',event.target);
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
@ -12739,6 +12740,7 @@
}
var data = _this.getCurrentEventData(e);
if (!data) return;
// console.log('-------onDrop----------',event.target);
if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
@ -12993,13 +12995,8 @@
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
<<<<<<< HEAD
// if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag) return;
=======
if (!this.props.dragborder) return;
>>>>>>> ne-drag
this.drag = {
option: ""
};
@ -13035,7 +13032,7 @@
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@ -13045,7 +13042,12 @@
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var key = event.target.getAttribute('data-line-key');
var th = this.getThDome(event.target);
if (!th) {
console.log(" event target is not th ! ");
return null;
}
var key = th.getAttribute('data-line-key');
var data = this.props.rows[0].find(function (da) {
return da.key == key;
});
@ -13056,7 +13058,27 @@
return null;
}
};
/**
*根据拖拽，获取当前的Th属性
* @param {*} element
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase();
if (_tagName === 'i') return null;
if (_tagName != 'th') {
return this.getThDome(element.parentElement);
} else {
return element;
}
};
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
*/

6
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

22
src/Table.js
View File

@ -294,7 +294,7 @@ class Table extends Component {
}
getHeader(columns, fixed) {
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -329,8 +329,8 @@ class Table extends Component {
rowStyle={trStyle}
fixed={fixed}
filterable={filterable}
onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
onFilterClear={onFilterClear}//过滤行清除后回调
onFilterRowsChange={onFilterRowsChange}
onFilterRowsDropChange={onFilterRowsDropChange}
filterDelay={filterDelay}
afterDragColWidth = {afterDragColWidth}
contentDomWidth={this.contentDomWidth}
@ -647,7 +647,7 @@ class Table extends Component {
getTable(options = {}) {
const { columns, fixed } = options;
const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideBodyScroll } = this.props;
const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll } = this.props;
let { useFixedHeader } = this.props;
const bodyStyle = { ...this.props.bodyStyle };
const headStyle = {};
@ -682,6 +682,7 @@ class Table extends Component {
//显示表头滚动条
if(headerScroll){
if(fixed){
//内容少，不用显示滚动条
if(this.domWidthDiff <= 0){
headStyle.marginBottom = `${scrollbarWidth}px`;
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
@ -690,14 +691,11 @@ class Table extends Component {
}
}else{
//内容少，不用显示滚动条
if(this.domWidthDiff > 0){
if(this.domWidthDiff > 0){
headStyle.overflowX = 'hidden';
}else if(hideBodyScroll){
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = `0px`;
}
}else{
if(fixed){
if(this.domWidthDiff > 0){
@ -899,7 +897,7 @@ class Table extends Component {
handleBodyScroll(e) {
const { scroll = {} } = this.props;
const { scroll = {},clsPrefix } = this.props;
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
@ -924,8 +922,8 @@ class Table extends Component {
}
if(position){
classes(this.contentTable)
.remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
.add(`${prefixCls}-scroll-position-${position}`);
.remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`))
.add(`${clsPrefix}-scroll-position-${position}`);
}
}
@ -980,7 +978,7 @@ class Table extends Component {
{this.getTitle()}
<div className={`${clsPrefix}-content`}>
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''}>
{this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()}
{this.getFooter()}