Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
commit
1f46e1e7af
|
@ -344,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 {
|
||||
|
|
|
@ -96,7 +96,7 @@ 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);
|
||||
// console.log(" ----- ",this.drag);
|
||||
if (!_this.tableOldWidth) {
|
||||
_this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth();
|
||||
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
|
||||
|
@ -156,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';
|
||||
|
@ -210,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);
|
||||
|
@ -306,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)';
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -106,9 +106,9 @@ function sum(Table) {
|
|||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
exports.sortBy = sortBy;
|
||||
exports.compare = compare;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
/*
|
||||
* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序.
|
||||
* @method soryBy
|
||||
* @static
|
||||
* @param {array} arr 待处理数组
|
||||
* @param {string|function} prop 排序依据属性,获取
|
||||
* @param {boolean} desc 降序
|
||||
* @return {array} 返回排序后的新数组
|
||||
/*
|
||||
* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序.
|
||||
* @method soryBy
|
||||
* @static
|
||||
* @param {array} arr 待处理数组
|
||||
* @param {string|function} prop 排序依据属性,获取
|
||||
* @param {boolean} desc 降序
|
||||
* @return {array} 返回排序后的新数组
|
||||
*/
|
||||
|
||||
function sortBy(arr, prop, desc) {
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
|
@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染checkbox
|
||||
* @param Checkbox
|
||||
* @param Icon
|
||||
* @returns {CheckboxRender}
|
||||
/**
|
||||
* 渲染checkbox
|
||||
* @param Checkbox
|
||||
* @param Icon
|
||||
* @returns {CheckboxRender}
|
||||
*/
|
||||
function renderCheckbox(Checkbox, Icon) {
|
||||
return function (_Component) {
|
||||
|
|
|
@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染输入框
|
||||
* @param Form
|
||||
* @param Input
|
||||
* @param Icon
|
||||
* @returns {InputRender}
|
||||
/**
|
||||
* 渲染输入框
|
||||
* @param Form
|
||||
* @param Input
|
||||
* @param Icon
|
||||
* @returns {InputRender}
|
||||
*/
|
||||
function renderInput(Form, Input, Icon) {
|
||||
var _class, _temp2;
|
||||
|
|
|
@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 渲染下拉框
|
||||
* @param Select
|
||||
* @param Icon
|
||||
* @returns {SelectRender}
|
||||
/**
|
||||
* 渲染下拉框
|
||||
* @param Select
|
||||
* @param Icon
|
||||
* @returns {SelectRender}
|
||||
*/
|
||||
function renderSelect(Select, Icon) {
|
||||
var _class, _temp2;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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 {
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.1.4-alpha.2",
|
||||
"version": "2.1.4-alpha.4",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
@ -635,6 +635,7 @@ class Table extends Component {
|
|||
}
|
||||
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
|
||||
const lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ?props.lazyLoad.startParentIndex :0;
|
||||
const lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ?props.lazyLoad.endIndex :-1;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let isHiddenExpandIcon;
|
||||
const record = data[i];
|
||||
|
@ -738,6 +739,8 @@ class Table extends Component {
|
|||
tableUid = {this.tableUid}
|
||||
expandedIcon={props.expandedIcon}
|
||||
collapsedIcon={props.collapsedIcon}
|
||||
lazyStartIndex = {lazyCurrentIndex}
|
||||
lazyEndIndex = {lazyEndIndex}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -30,7 +30,7 @@ class TableCell extends Component{
|
|||
}
|
||||
render() {
|
||||
const { record, indentSize, clsPrefix, indent,
|
||||
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props;
|
||||
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
|
||||
const { dataIndex, render } = column;
|
||||
let {className = ''} = column;
|
||||
|
||||
|
@ -43,7 +43,7 @@ class TableCell extends Component{
|
|||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan;
|
||||
rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
|
@ -61,9 +61,13 @@ class TableCell extends Component{
|
|||
/>
|
||||
) : null;
|
||||
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
if ((lazyStartIndex !==index) &&(rowSpan === 0 || colSpan === 0) ) {
|
||||
return null;
|
||||
}
|
||||
if(tdProps && tdProps.mergeEndIndex && index<tdProps.mergeEndIndex && rowSpan === 0){
|
||||
rowSpan = tdProps.mergeEndIndex - index;
|
||||
text = ''
|
||||
}
|
||||
//不是固定表格并且当前列是固定,则隐藏当前列
|
||||
if(column.fixed && !fixed){
|
||||
className = className+` ${clsPrefix}-fixed-columns-in-body`;
|
||||
|
@ -80,7 +84,8 @@ class TableCell extends Component{
|
|||
rowSpan={rowSpan}
|
||||
className={className}
|
||||
onClick={this.handleClick}
|
||||
title = {title}
|
||||
title={title}
|
||||
|
||||
>
|
||||
{indentText}
|
||||
{expandIcon}
|
||||
|
|
|
@ -206,7 +206,7 @@ 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);
|
||||
// console.log(" ----- ",this.drag);
|
||||
if(!this.tableOldWidth){
|
||||
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
|
||||
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
|
||||
|
@ -264,8 +264,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';
|
||||
|
@ -317,7 +316,9 @@ 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);
|
||||
}else{
|
||||
|
@ -476,7 +477,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)';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -418,7 +418,7 @@ class TableRow extends Component{
|
|||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
,expandedIcon,collapsedIcon, hoverKey
|
||||
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
|
@ -471,6 +471,8 @@ class TableRow extends Component{
|
|||
showSum={showSum}
|
||||
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
|
||||
bodyDisplayInRow = {bodyDisplayInRow}
|
||||
lazyStartIndex={lazyStartIndex}
|
||||
lazyEndIndex={lazyEndIndex}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
const defaultHeight = 30;
|
||||
const rowDiff = 3; //行差值
|
||||
const rowDiff = 2; //行差值
|
||||
let treeTypeIndex = 0;
|
||||
export default function bigData(Table) {
|
||||
return class BigData extends Component {
|
||||
|
@ -298,11 +298,12 @@ export default function bigData(Table) {
|
|||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
|
||||
// endIndex = startIndex + rowsInView + loadBuffer*2;
|
||||
endIndex = startIndex + loadCount;
|
||||
if (endIndex > data.length) {
|
||||
endIndex = data.length;
|
||||
}
|
||||
if (endIndex !== this.endIndex) {
|
||||
if (endIndex > this.endIndex ) {
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
|
@ -314,7 +315,7 @@ export default function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startIndex !== this.startIndex ) {
|
||||
if (startIndex < this.startIndex) {
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
|
@ -430,6 +431,7 @@ export default function bigData(Table) {
|
|||
}
|
||||
const lazyLoad = {
|
||||
startIndex: startIndex,
|
||||
endIndex:endIndex,
|
||||
startParentIndex: startIndex //为树状节点做准备
|
||||
};
|
||||
if (this.treeType) {
|
||||
|
|
|
@ -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} />
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue