p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:解决嵌套表格展示错行、拖拽过程中错行问题

This commit is contained in:
yangchch6 2019-08-17 10:00:40 +08:00
parent ce44da845b
commit ca50a4c766
9 changed files with 121 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/Table.js
View File

@ -553,7 +553,7 @@ var Table = function (_Component) {
return this.props.expandedRowKeys || this.state.expandedRowKeys;
};
Table.prototype.getHeader = function getHeader(columns, fixed) {
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
@ -618,7 +618,9 @@ var Table = function (_Component) {
contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth,
headerScroll: headerScroll,
bordered: bordered
bordered: bordered,
leftFixedWidth: leftFixedWidth,
rightFixedWidth: rightFixedWidth
})) : null;
};
@ -1041,6 +1043,8 @@ var Table = function (_Component) {
var bodyStyle = _extends({}, this.props.bodyStyle);
var headStyle = {};
var innerBodyStyle = {};
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
var tableClassName = '';
//表格元素的宽度大于容器的宽度也显示滚动条
@ -1093,7 +1097,7 @@ var Table = function (_Component) {
if (fixed) {
if (this.domWidthDiff > 0) {
headStyle.overflow = 'hidden';
// innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景
} else {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
}
@ -1141,7 +1145,7 @@ var Table = function (_Component) {
'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this4.getColGroup(columns, fixed),
hasHead ? _this4.getHeader(columns, fixed) : null,
hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
tableBody
);
};
@ -1210,8 +1214,8 @@ var Table = function (_Component) {
)
);
}
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
var expandIconWidth = expandIconAsCell ? 33 : 0;
var parStyle = {};
if (!fixed) {

14
build/TableHeader.js
View File

@ -157,7 +157,9 @@ var TableHeader = function (_Component) {
contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll,
lastShowIndex = _this$props2.lastShowIndex,
onDraggingBorder = _this$props2.onDraggingBorder;
onDraggingBorder = _this$props2.onDraggingBorder,
leftFixedWidth = _this$props2.leftFixedWidth,
rightFixedWidth = _this$props2.rightFixedWidth;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
@ -189,11 +191,11 @@ var TableHeader = function (_Component) {
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
//小于 0 出现滚动条
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
@ -202,17 +204,20 @@ var TableHeader = function (_Component) {
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
//大于 0 不显示滚动条
_this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
}
} else {
if (showScroll < 0) {
_this.table.tableBody.style.overflowX = 'auto';
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_this.table.tableBody.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
@ -263,7 +268,7 @@ var TableHeader = function (_Component) {
var innerTable = table.querySelector('.u-table-body-inner');
if (innerTable) {
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
// overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
@ -531,6 +536,7 @@ var TableHeader = function (_Component) {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}

41
demo/demolist/Demo0602.js
View File

@ -18,6 +18,7 @@ const columns = [
dataIndex: "index",
key: "index",
width: 80,
fixed: 'left',
render(text, record, index){return index + 1}
},
{
@ -131,12 +132,48 @@ const data = [
confirmState_name:"终止",
closeState_name:"已关闭",
key: "3"
}
},
{
orderCode:"NU0391025",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织c',
purchasingGroup:"aa",
voucherDate:"2018年03月18日",
approvalState_name:"已审批",
confirmState_name:"执行中",
closeState_name:"未关闭",
key: "4"
},
{
orderCode:"NU0391026",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织a',
purchasingGroup:"bb",
voucherDate:"2018年02月05日",
approvalState_name:"已审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "5"
},
{
orderCode:"NU0391027",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织b',
purchasingGroup:"aa",
voucherDate:"2018年07月01日",
approvalState_name:"已审批",
confirmState_name:"终止",
closeState_name:"已关闭",
key: "6"
}
];
class Demo52 extends Component {
render() {
return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;
return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }} />;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

47
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.1.13",
"version": "2.1.14-beta.2",
"description": "Table ui component for react",
"keywords": [
"react",

14
src/Table.js
View File

@ -394,7 +394,7 @@ class Table extends Component {
return this.props.expandedRowKeys || this.state.expandedRowKeys;
}
getHeader(columns, fixed) {
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
const rows = this.getHeaderRows(columns);
@ -438,6 +438,8 @@ class Table extends Component {
scrollbarWidth = {this.scrollbarWidth}
headerScroll = {headerScroll}
bordered = {bordered}
leftFixedWidth = {leftFixedWidth}
rightFixedWidth = {rightFixedWidth}
/>
) : null;
}
@ -886,6 +888,8 @@ class Table extends Component {
const bodyStyle = { ...this.props.bodyStyle };
const headStyle = {};
const innerBodyStyle = {};
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
let tableClassName = '';
//表格元素的宽度大于容器的宽度也显示滚动条
@ -938,7 +942,7 @@ class Table extends Component {
if(fixed){
if(this.domWidthDiff > 0){
headStyle.overflow = 'hidden';
// innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景
}else{
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
}
@ -986,7 +990,7 @@ class Table extends Component {
<table className={` ${tableClassName} table-bordered ${_drag_class} `} style={tableStyle} >
{/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
{this.getColGroup(columns, fixed)}
{hasHead ? this.getHeader(columns, fixed) : null}
{hasHead ? this.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null}
{tableBody}
</table>
);
@ -1051,8 +1055,8 @@ class Table extends Component {
</div>
);
}
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
let expandIconWidth = expandIconAsCell ? 33 : 0;
let parStyle = {}
if(!fixed){

14
src/TableHeader.js
View File

@ -79,6 +79,7 @@ class TableHeader extends Component {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}
@ -277,7 +278,7 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
@ -307,11 +308,10 @@ class TableHeader extends Component {
this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
let showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
if(headerScroll){
if(showScroll < 0){
if(showScroll < 0){ //小于 0 出现滚动条
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
@ -319,18 +319,20 @@ class TableHeader extends Component {
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
}else{
}else{ //大于 0 不显示滚动条
this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
this.optTableMargin( this.table.fixedRighHeadertTable,0);
}
}else{
if(showScroll < 0){
this.table.tableBody.style.overflowX = 'auto';
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
}else{
this.table.tableBody.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
@ -407,7 +409,7 @@ class TableHeader extends Component {
const innerTable = table.querySelector('.u-table-body-inner');
if(innerTable){
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
// overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}