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

merge

This commit is contained in:
izbz wh 2019-07-02 16:39:34 +08:00
parent 52b794d579 aa69d8dfed
commit c03c3fe75c
21 changed files with 287 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build/Table.css
View File

@ -153,6 +153,13 @@
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
.u-loading.u-loading-custom > div {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@keyframes line-scale {
0% {
-webkit-transform: scaley(1);
@ -337,10 +344,10 @@
content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: "\e639";
font-family: "uf" !important; }
font-family: "uf"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: "\e61c";
font-family: "uf" !important; }
font-family: "uf"; }
.u-table-row.selected {
background: #FFF7E7; }
.u-table tr.u-table-expanded-row {

4
build/Table.js
View File

@ -324,9 +324,9 @@ var Table = function (_Component) {
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
setTimeout(this.resetScrollX, 300);
//含有纵向滚动条
if (this.props.scroll.y) {
// if(this.props.scroll.y){
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
// }
//后续也放在recevice里面
if (!this.props.originWidth) {
this.computeTableWidth();

56
build/TableHeader.js
View File

@ -77,7 +77,8 @@ var TableHeader = function (_Component) {
targetEvent = _utils.Event.getTarget(event);
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
contentTable = _this$props.contentTable,
lastShowIndex = _this$props.lastShowIndex;
var currentElement = _this.getOnLineObject(targetEvent);
if (!currentElement) return;
@ -95,6 +96,14 @@ var TableHeader = function (_Component) {
_this.drag.oldWidth = parseInt(currentObj.style.width);
_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);
// console.log(" ----- ",this.drag);
if (!_this.tableOldWidth) {
_this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth();
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
}
if (!_this.lastColumWidth) {
_this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
}
} else if (type != 'online' && _this.props.draggable) {
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this.props.draggable) return;
@ -110,6 +119,16 @@ var TableHeader = function (_Component) {
}
};
_this.getTableWidth = function () {
var tableWidth = 0,
offWidth = 0; //this.table.cols.length;
for (var index = 0; index < _this.table.cols.length; index++) {
var da = _this.table.cols[index];
tableWidth += parseInt(da.style.width);
}
return tableWidth - offWidth;
};
_this.getTargetToTh = function (targetEvent) {
var th = targetEvent;
if (targetEvent.nodeName.toUpperCase() != "TH") {
@ -127,7 +146,8 @@ var TableHeader = function (_Component) {
contentDomWidth = _this$props2.contentDomWidth,
scrollbarWidth = _this$props2.scrollbarWidth,
contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll;
headerScroll = _this$props2.headerScroll,
lastShowIndex = _this$props2.lastShowIndex;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
@ -136,8 +156,7 @@ var TableHeader = function (_Component) {
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
_this.drag.newWidth = newWidth > 0 ? newWidth : _this.minWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
@ -145,14 +164,23 @@ var TableHeader = function (_Component) {
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
if (_this.table.innerTableBody) {
//TODO 后续需要处理此处
_this.table.innerTableBody.style.width = newTableWidth;
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
if (newDiff > 0) {
//缩小
var lastWidth = _this.lastColumWidth + newDiff;
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
@ -181,6 +209,8 @@ var TableHeader = function (_Component) {
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
}
}
} else {
_this.drag.newWidth = _this.minWidth;
}
} else if (_this.props.draggable && _this.drag.option == "draggable") {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
@ -277,7 +307,7 @@ var TableHeader = function (_Component) {
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style", "border:2px dashed rgba(5,0,0,0.25)");
target.setAttribute("style", "border-right:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
};
@ -440,6 +470,7 @@ var TableHeader = function (_Component) {
_this.table = null;
_this._thead = null; //当前对象
_this.event = false; //避免多次绑定问题
_this.lastColumWidth = null; //非固定列最后一列的初始化宽度
return _this;
}
@ -484,6 +515,7 @@ var TableHeader = function (_Component) {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');

2
build/lib/bigData.js
View File

@ -84,6 +84,8 @@ function bigData(Table) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
}
if (nextProps.data !== props.data) {
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置

5
build/lib/singleSelect.js
View File

@ -73,7 +73,7 @@ function singleSelect(Table, Radio) {
onChange: function onChange(value) {
return _this.onRadioChange(value, record, index);
},
style: { width: '16px', height: '16px', display: 'block', marginLeft: '4px' } },
style: { width: '14px', height: '14px', display: 'block', marginLeft: '4px' } },
_react2["default"].createElement(Radio, { value: index })
);
}
@ -117,8 +117,7 @@ function singleSelect(Table, Radio) {
return _react2["default"].createElement(Table, _extends({}, this.props, {
columns: this.getDefaultColumns(columns),
data: data,
height: 40 }));
data: data }));
};
return SingleSelect;

13
demo/demolist/Demo1001.js
View File

@ -36,14 +36,21 @@ const columns = [
title: "联系人",
dataIndex: "d",
key: "d",
width: 500,
},
{
title: "操作",
dataIndex: "e",
key: "e",
width: 200,
fixed: 'right',
}
];
const data = [
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom',e:'...', key: "2" },
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack',e:'...', key: "1" },
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane',e:'...', key: "3" }
];
const DragColumnTable = dragColumn(Table);

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

4
dist/demo.css vendored
View File

@ -326,10 +326,10 @@
content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: "\e639";
font-family: "uf" !important; }
font-family: "uf"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: "\e61c";
font-family: "uf" !important; }
font-family: "uf"; }
.u-table-row.selected {
background: #FFF7E7; }
.u-table tr.u-table-expanded-row {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

131
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.3-beta.2",
"version": "2.1.4-alpha.4",
"description": "Table ui component for react",
"keywords": [
"react",

4
src/Table.scss
View File

@ -307,13 +307,13 @@ $icon-color:#505F79;
&-expanded {
&:after {
content: "\e639";
font-family: "uf" !important;
font-family: "uf";
}
}
&-collapsed {
&:after {
content: "\e61c";
font-family: "uf" !important;
font-family: "uf";
}
}
}

1
src/TableCell.js
View File

@ -46,7 +46,6 @@ class TableCell extends Component{
rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;
colSpan = tdProps.colSpan;
text = text.children;
console.log("rowIndex====",index,"rowSpan=======",rowSpan,lazyEndIndex);
}
}

51
src/TableHeader.js
View File

@ -31,6 +31,7 @@ class TableHeader extends Component {
this.table = null;
this._thead = null;//当前对象
this.event = false;//避免多次绑定问题
this.lastColumWidth = null;//非固定列最后一列的初始化宽度
}
static defaultProps = {
@ -75,6 +76,7 @@ class TableHeader extends Component {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@ -185,7 +187,7 @@ class TableHeader extends Component {
Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable } = this.props;
const { clsPrefix, contentTable,lastShowIndex } = this.props;
let currentElement = this.getOnLineObject(targetEvent);
if(!currentElement)return;
let type = currentElement.getAttribute('data-type');
@ -202,6 +204,14 @@ class TableHeader extends Component {
this.drag.oldWidth = parseInt((currentObj).style.width);
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);
// console.log(" ----- ",this.drag);
if(!this.tableOldWidth){
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
}
if(!this.lastColumWidth){
this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
}
}else if(type != 'online' && this.props.draggable){
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
@ -217,6 +227,15 @@ class TableHeader extends Component {
}
};
getTableWidth = ()=>{
let tableWidth = 0,offWidth = 0;//this.table.cols.length;
for (let index = 0; index < this.table.cols.length; index++) {
let da = this.table.cols[index];
tableWidth += parseInt((da).style.width);
}
return (tableWidth-offWidth);
}
/**
* 判断当前的target 是否是 th，如果不是，直接递归查找。
* @memberof TableHeader
@ -235,7 +254,7 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
@ -243,8 +262,7 @@ class TableHeader extends Component {
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth;
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
// if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
@ -252,13 +270,22 @@ class TableHeader extends Component {
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width
if(this.table.innerTableBody){//TODO 后续需要处理此处
this.table.innerTableBody.style.width = newTableWidth ;
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
if(newDiff > 0){//缩小
let lastWidth = this.lastColumWidth + newDiff;
this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理
if(headerScroll){
if(showScroll < 0){
@ -287,6 +314,8 @@ class TableHeader extends Component {
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
}
}
}else {
this.drag.newWidth = this.minWidth;
}
}else if(this.props.draggable && this.drag.option == "draggable"){
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
@ -446,7 +475,7 @@ class TableHeader extends Component {
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
target.setAttribute("style","border-right:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
}

5
src/lib/singleSelect.js
View File

@ -70,7 +70,7 @@ export default function singleSelect(Table, Radio) {
name="table-radio"
selectedValue={selectedRowIndex}
onChange={value => this.onRadioChange(value, record, index)}
style={{width:'16px', height:'16px', display:'block', marginLeft:'4px'}}>
style={{width:'14px', height:'14px', display:'block', marginLeft:'4px'}}>
<Radio value={index}/>
</Radio.RadioGroup>
}
@ -84,8 +84,7 @@ export default function singleSelect(Table, Radio) {
return <Table
{...this.props}
columns={this.getDefaultColumns(columns)}
data={data}
height={40}/>
data={data} />
}
};
}