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

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
jonyshi 2019-03-18 17:09:16 +08:00
parent c7f1418297 ee40debbbe
commit e43b12fbd0
6 changed files with 2244 additions and 2237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

7
dist/demo.css vendored
View File

@ -353,8 +353,8 @@
background-clip: padding-box; background-clip: padding-box;
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-webkit-user-select: none; -webkit-user-select: none;
/* /*
Introduced in IE 10. Introduced in IE 10.
*/ */
-ms-user-select: none; -ms-user-select: none;
user-select: none; } user-select: none; }
@ -462,7 +462,8 @@
pointer-events: none; } pointer-events: none; }
.u-table .u-checkbox { .u-table .u-checkbox {
height: 16px; height: 16px;
line-height: 16px; } line-height: 16px;
margin: 0px; }
.u-table:focus { .u-table:focus {
outline: none; outline: none;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4416
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

52
src/TableHeader.js
View File

@ -132,6 +132,7 @@ class TableHeader extends Component {
* @memberof TableHeader * @memberof TableHeader
*/ */
initTable(){ initTable(){
const {contentTable} = this.props;
if(!this.props.dragborder && !this.props.draggable)return; if(!this.props.dragborder && !this.props.draggable)return;
// let el = ReactDOM.findDOMNode(this); // let el = ReactDOM.findDOMNode(this);
let tableDome = this._thead.parentNode; let tableDome = this._thead.parentNode;
@ -141,11 +142,19 @@ class TableHeader extends Component {
table.cols = tableDome.getElementsByTagName("col"); table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th"); table.ths = tableDome.getElementsByTagName("th");
} }
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
this.table = table; this.table = table;
if(!this.props.dragborder)return; if(!this.props.dragborder)return;
if(document.getElementById("u-table-drag-thead-" + this.theadKey)){ if(document.getElementById("u-table-drag-thead-" + this.theadKey)){
//hao 固定列table
this.fixedTable = {}; this.fixedTable = {};
let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode; let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
let siblingDom = _fixedParentContext.parentNode.nextElementSibling; let siblingDom = _fixedParentContext.parentNode.nextElementSibling;
@ -206,43 +215,37 @@ class TableHeader extends Component {
if(this.fixedTable.cols){ if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px"; this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
} }
let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth); const newTableWidth = this.drag.tableWidth + diff +'px';
const newTableWidth = oldTableWidth + diff ;
this.table.table.style.width = newTableWidth;//改变table的width this.table.table.style.width = newTableWidth;//改变table的width
this.table.innerTableBody.style.width = newTableWidth ;
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ; let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
const fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
const fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
//表头滚动条处理 //表头滚动条处理
if(headerScroll){ if(headerScroll){
if(showScroll < 0){ if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth; //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll'; this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin(fixedLeftHeaderTable,scrollbarWidth); this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
this.optTableMargin(fixedRighHeadertTable,scrollbarWidth); this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px"); // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】 //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
}else{ }else{
contentTableHeader.style.overflowX = 'hidden'; this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin(fixedLeftHeaderTable,0); this.optTableMargin( this.table.fixedLeftHeaderTable,0);
this.optTableMargin(fixedRighHeadertTable,0); this.optTableMargin( this.table.fixedRighHeadertTable,0);
} }
}else{ }else{
if(showScroll < 0){ if(showScroll < 0){
this.optTableMargin(fixedLeftBodyTable,'-'+scrollbarWidth); this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin(fixedRightBodyTable,'-'+scrollbarWidth); this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll(fixedLeftBodyTable,{x:'scroll'}); this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll(fixedRightBodyTable,{x:'scroll'}); this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
}else{ }else{
this.optTableMargin(fixedLeftBodyTable,0); this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin(fixedRightBodyTable,0); this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll(fixedLeftBodyTable,{x:'auto'}); this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
this.optTableScroll(fixedRightBodyTable,{x:'auto'}); this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
} }
} }
@ -266,6 +269,7 @@ class TableHeader extends Component {
this.drag.oldLeft = event.x; this.drag.oldLeft = event.x;
this.drag.oldWidth = parseInt((currentObj).style.width); this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth; this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
}; };
/** /**