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

支持表头中列排序

This commit is contained in:
wanghaoo 2019-01-16 13:57:31 +08:00
parent 563900f31c
commit cba52a4e11
20 changed files with 1212 additions and 1177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/Table.css
View File

@ -448,6 +448,9 @@
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
display: none; display: none;
pointer-events: none; } pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
.u-table:focus { .u-table:focus {
outline: none; outline: none;
@ -631,7 +634,3 @@
height: 32px; height: 32px;
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }

2
build/Table.js
View File

@ -1232,7 +1232,7 @@ var Table = function (_Component) {
{ className: className, style: props.style, ref: function ref(el) { { className: className, style: props.style, ref: function ref(el) {
return _this6.contentTable = el; return _this6.contentTable = el;
}, },
tabIndex: props.tabIndex ? props.tabIndex : '0' }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(), this.getTitle(),
_react2["default"].createElement( _react2["default"].createElement(
'div', 'div',

16
build/TableHeader.js
View File

@ -638,17 +638,17 @@ var TableHeader = function (_Component) {
} }
var keyTemp = {}; var keyTemp = {};
//避免key为undefined //避免key为undefined
if (da.dataindex && da.key === undefined) { // if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.dataindex; keyTemp.key = da.key || da.dataindex || index + '-' + columIndex;
} // }
if (filterable && index == rows.length - 1) { if (filterable && index == rows.length - 1) {
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex); da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
if (da.key === undefined) { if (da.key === undefined) {
keyTemp.key = da.dataindex + '-filterable'; keyTemp.key = keyTemp.key + '-filterable';
} }
delete da.filterdropdownfocus; delete da.filterdropdownfocus;
} }
var thDefaultObj = {}; var thDefaultObj = {};
var thClassName = "" + da.className ? "" + da.className : ''; var thClassName = "" + da.className ? "" + da.className : '';
if (draggable) { if (draggable) {
@ -660,6 +660,7 @@ var TableHeader = function (_Component) {
thClassName += " " + fixedStyle; thClassName += " " + fixedStyle;
if (!da.fixed) { if (!da.fixed) {
console.log(keyTemp.key);
return _react2["default"].createElement( return _react2["default"].createElement(
"th", "th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
@ -677,13 +678,12 @@ var TableHeader = function (_Component) {
); );
} else { } else {
thDefaultObj = _extends({}, da, { thDefaultObj = _extends({}, da, {
className: da.className + " " + fixedStyle, className: da.className + " " + fixedStyle
key: columIndex
}); });
da.onClick ? thDefaultObj.onClick = function (e) { da.onClick ? thDefaultObj.onClick = function (e) {
da.onClick(da, e); da.onClick(da, e);
} : ""; } : "";
return _react2["default"].createElement("th", _extends({}, thDefaultObj, { "data-th-fixed": da.fixed })); return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed }));
} }
}) })
); );

2
build/TableRow.js
View File

@ -279,7 +279,7 @@ var TableRow = function (_Component) {
indent: indent, indent: indent,
index: index, index: index,
column: columns[i], column: columns[i],
key: columns[i].key, key: columns[i].key || columns[i].dataIndex || i,
fixed: fixed, fixed: fixed,
showSum: showSum, showSum: showSum,
expandIcon: isColumnHaveExpandIcon ? expandIcon : null expandIcon: isColumnHaveExpandIcon ? expandIcon : null

102
build/lib/bigData.js
View File

@ -77,31 +77,26 @@ function bigData(Table) {
this.startIndex = this.currentIndex; //数据开始位置 this.startIndex = this.currentIndex; //数据开始位置
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置 this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
} }
}; if (nextProps.data !== props.data) {
this.computeCachedRowParentIndex(nextProps.data);
BigData.prototype.componentDidMount = function componentDidMount() {
var _this3 = this;
var isTreeType = this.checkIsTreeType();
if (isTreeType) {
var data = this.props.data;
data.forEach(function (item, index) {
_this3.firstLevelKey[index] = _this3.getRowKey(item, index);
_this3.cachedRowParentIndex[treeTypeIndex] = index;
//保存所有的keys跟小标对应起来
_this3.keys[treeTypeIndex] = _this3.getRowKey(item, index);
treeTypeIndex++;
if (item.children) {
_this3.getData(item.children, index);
}
});
} }
}; };
BigData.prototype.componentDidMount = function componentDidMount() {
var data = this.props.data;
this.computeCachedRowParentIndex(data);
};
/**
*设置data中每个元素的parentIndex
*
*/
BigData.prototype.getRowKey = function getRowKey(record, index) { BigData.prototype.getRowKey = function getRowKey(record, index) {
var rowKey = this.props.rowKey; var rowKey = this.props.rowKey;
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey]; var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
return key; return key;
}; };
@ -127,14 +122,14 @@ function bigData(Table) {
}; };
BigData.prototype.getData = function getData(data, parentIndex) { BigData.prototype.getData = function getData(data, parentIndex) {
var _this4 = this; var _this3 = this;
data.forEach(function (subItem, subIndex) { data.forEach(function (subItem, subIndex) {
_this4.cachedRowParentIndex[treeTypeIndex] = parentIndex; _this3.cachedRowParentIndex[treeTypeIndex] = parentIndex;
_this4.keys[treeTypeIndex] = _this4.getRowKey(subItem, subIndex); _this3.keys[treeTypeIndex] = _this3.getRowKey(subItem, subIndex);
treeTypeIndex++; treeTypeIndex++;
if (subItem.children) { if (subItem.children) {
_this4.getData(subItem.children, parentIndex); _this3.getData(subItem.children, parentIndex);
} }
}); });
}; };
@ -192,7 +187,7 @@ function bigData(Table) {
}; };
BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {} BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {}
// this.cachedRowParentIndex[index] = parentIndex; // this.cachedRowParentIndex[index] = parentIndex;
/** /**
* *
@ -272,21 +267,37 @@ function bigData(Table) {
}(_react.Component), _class.defaultProps = { }(_react.Component), _class.defaultProps = {
data: [], data: [],
loadBuffer: 5, loadBuffer: 5,
rowKey: 'key', rowKey: "key",
onExpand: function onExpand() {}, onExpand: function onExpand() {},
scroll: {} scroll: {}
}, _class.propTypes = { }, _class.propTypes = {
loadBuffer: _propTypes2["default"].number loadBuffer: _propTypes2["default"].number
}, _initialiseProps = function _initialiseProps() { }, _initialiseProps = function _initialiseProps() {
var _this5 = this; var _this4 = this;
this.computeCachedRowParentIndex = function (data) {
var isTreeType = _this4.checkIsTreeType();
if (isTreeType) {
data.forEach(function (item, index) {
_this4.firstLevelKey[index] = _this4.getRowKey(item, index);
_this4.cachedRowParentIndex[treeTypeIndex] = index;
//保存所有的keys跟小标对应起来
_this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
treeTypeIndex++;
if (item.children) {
_this4.getData(item.children, index);
}
});
}
};
this.handleScrollY = function (nextScrollTop, treeType) { this.handleScrollY = function (nextScrollTop, treeType) {
//树表逻辑 //树表逻辑
// 关键点是动态的获取startIndex和endIndex // 关键点是动态的获取startIndex和endIndex
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定 // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值， // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
var _this = _this5; var _this = _this4;
var _this$props = _this.props, var _this$props = _this.props,
data = _this$props.data, data = _this$props.data,
height = _this$props.height, height = _this$props.height,
@ -335,12 +346,12 @@ function bigData(Table) {
var temp = nextScrollTop; var temp = nextScrollTop;
var currentKey = void 0; var currentKey = void 0;
while (temp > 0) { while (temp > 0) {
var currentRowHeight = _this5.cachedRowHeight[index]; var currentRowHeight = _this4.cachedRowHeight[index];
if (currentRowHeight === undefined) { if (currentRowHeight === undefined) {
if (_this5.treeType) { if (_this4.treeType) {
currentKey = _this5.keys[index]; currentKey = _this4.keys[index];
currentRowHeight = 0; currentRowHeight = 0;
if (_this5.firstLevelKey.indexOf(currentKey) >= 0 || _this5.expandChildRowKeys.indexOf(currentKey) >= 0) { if (_this4.firstLevelKey.indexOf(currentKey) >= 0 || _this4.expandChildRowKeys.indexOf(currentKey) >= 0) {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;
} }
} else { } else {
@ -365,9 +376,9 @@ function bigData(Table) {
if (viewHeight) { if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) { while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
if (_this5.cachedRowHeight[tempIndex]) { if (_this4.cachedRowHeight[tempIndex]) {
rowsHeight += _this5.cachedRowHeight[tempIndex]; rowsHeight += _this4.cachedRowHeight[tempIndex];
if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) { if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) {
rowsInView++; rowsInView++;
} }
@ -379,7 +390,7 @@ function bigData(Table) {
index = _this.cachedRowParentIndex[treeIndex]; index = _this.cachedRowParentIndex[treeIndex];
if (index === undefined) { if (index === undefined) {
// console.log('index is undefined********'+treeIndex); // console.log('index is undefined********'+treeIndex);
index = _this5.getParentIndex(treeIndex); index = _this4.getParentIndex(treeIndex);
// console.log("getParentIndex****"+index); // console.log("getParentIndex****"+index);
} }
} }
@ -387,7 +398,6 @@ function bigData(Table) {
// 如果rowsInView 小于 缓存的数据则重新render // 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动 下临界值超出缓存的endIndex则重新渲染 // 向下滚动 下临界值超出缓存的endIndex则重新渲染
if (rowsInView + index > endIndex - rowDiff && isOrder) { if (rowsInView + index > endIndex - rowDiff && isOrder) {
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0; startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
endIndex = startIndex + loadCount; endIndex = startIndex + loadCount;
//树状结构则根据当前的节点重新计算startIndex和endIndex //树状结构则根据当前的节点重新计算startIndex和endIndex
@ -404,10 +414,10 @@ function bigData(Table) {
if (endIndex > data.length) { if (endIndex > data.length) {
endIndex = data.length; endIndex = data.length;
} }
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) { if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
_this5.startIndex = startIndex; _this4.startIndex = startIndex;
_this5.endIndex = endIndex; _this4.endIndex = endIndex;
_this5.setState({ needRender: !needRender }); _this4.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "===================", // "===================",
@ -422,10 +432,10 @@ function bigData(Table) {
if (startIndex < 0) { if (startIndex < 0) {
startIndex = 0; startIndex = 0;
} }
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) { if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
_this5.startIndex = startIndex; _this4.startIndex = startIndex;
_this5.endIndex = _this5.startIndex + loadCount; _this4.endIndex = _this4.startIndex + loadCount;
_this5.setState({ needRender: !needRender }); _this4.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "**index**" + index, // "**index**" + index,
@ -438,7 +448,7 @@ function bigData(Table) {
}; };
this.onExpand = function (expandState, record) { this.onExpand = function (expandState, record) {
var _this = _this5; var _this = _this4;
// 展开 // 展开
if (expandState) { if (expandState) {
record.children && record.children.forEach(function (item, index) { record.children && record.children.forEach(function (item, index) {

28
build/lib/dragColumn.js
View File

@ -57,21 +57,29 @@ function dragColumn(Table) {
dragTarg = data.dragTarg; dragTarg = data.dragTarg;
var columns = _this.state.columns; var columns = _this.state.columns;
var dragSourceColum = columns.find(function (da, i) { var sourceIndex = -1,
targetIndex = -1;
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key; return da.key == dragSource.key;
}); });
var dragTargColum = columns.find(function (da, i) { targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key; return da.key == dragTarg.key;
}); });
for (var index = 0; index < columns.length; index++) { // for (let index = 0; index < columns.length; index++) {
var da = columns[index]; // const da = columns[index];
if (da.key === dragSource.key) { // if(da.key === dragSource.key){
columns[index] = dragTargColum; // columns[index] = dragTargColum;
} // }
if (da.key === dragTarg.key) { // if(da.key === dragTarg.key){
columns[index] = dragSourceColum; // columns[index] = dragSourceColum;
} // }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
} }
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({ _this.setState({
columns: cloneDeep(columns) columns: cloneDeep(columns)
}); });

474
build/lib/sort.js
View File

@ -28,7 +28,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
* @param {*} Icon * @param {*} Icon
*/ */
function sort(Table, Icon) { function sort(Table, Icon) {
var _class, _temp; var _class, _temp, _initialiseProps;
var IconType = [{ var IconType = [{
'type': 'flat', 'type': 'flat',
@ -50,214 +50,20 @@ function sort(Table, Icon) {
function SortTable(props) { function SortTable(props) {
_classCallCheck(this, SortTable); _classCallCheck(this, SortTable);
var _this = _possibleConstructorReturn(this, _Component.call(this, props)); var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
_this.getOrderNum = function () { _initialiseProps.call(_this2);
var orderNum = 0;
_this.state.columns.forEach(function (item, index) {
if (item.order == 'ascend' || item.order == 'descend') {
orderNum++;
}
});
return orderNum ? orderNum : 1;
};
_this.changeOrderNum = function (column) { var flatColumns = [];
var columns = _this.state.columns; _this2._toFlatColumn(props.columns, -1, flatColumns);
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
columns.forEach(function (col) { return _this2;
if (col.orderNum > column.orderNum) {
col.orderNum--;
}
if (column.key == col.key) {
col.orderNum = '';
}
});
_this.setState({ columns: columns });
};
_this.getOrderCols = function (columns) {
var orderCols = [];
columns.forEach(function (item) {
if (item.order == 'ascend' || item.order == 'descend') {
orderCols.push({ order: item.order,
field: item.dataIndex,
orderNum: item.orderNum
});
}
});
return orderCols;
};
_this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
var preKey = pre[orderCols[currentIndex].key];
var afterKey = after[orderCols[currentIndex].key];
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
return _this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
}
if (orderCols[currentIndex].order == 'ascend') {
return preKey - afterKey;
} else {
return afterKey - preKey;
}
};
_this.multiSort = function (columns) {
var _this$state = _this.state,
data = _this$state.data,
oldData = _this$state.oldData;
var self = _this;
var orderCols = {},
orderColslen = 0;
columns.forEach(function (item) {
if (item.orderNum) {
orderColslen++;
orderCols[item.orderNum] = item;
}
});
if (orderColslen > 0) {
data = data.sort(function (a, b) {
return self._sortBy(a, b, orderCols, orderColslen, 1);
});
} else {
data = oldData.concat();
}
return data;
};
_this.toggleSortOrder = function (order, column) {
var _this$state2 = _this.state,
data = _this$state2.data,
oldData = _this$state2.oldData,
columns = _this$state2.columns;
var sort = _this.props.sort;
var seleObj = void 0;
if (!oldData) {
oldData = data.concat();
}
//单列排序，清空其他列的排序
if (sort.mode == 'single') {
columns.forEach(function (da) {
if (da.key == column.key) {
seleObj = da;
} else {
if (da.order) {
da.order = 'flatscend';
}
}
});
seleObj.order = order;
//通过后端请求
if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式
sort.sortFun([{
order: order,
field: seleObj.dataIndex
}]);
} else {
if (order === "ascend") {
data = data.sort(function (a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function (a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
}
}
} else {
seleObj = columns.find(function (da) {
return da.key == column.key;
});
seleObj.order = order;
if (order === "flatscend") {
_this.changeOrderNum(column);
}
if (!seleObj.orderNum && (order == 'ascend' || order == 'descend')) {
seleObj.orderNum = _this.getOrderNum();
}
if (sort.backSource && typeof sort.sortFun === "function") {
sort.sortFun(_this.getOrderCols(columns));
} else {
data = _this.multiSort(columns);
}
}
_this.setState({
data: data,
oldData: oldData,
columns: columns
});
};
_this.renderColumnsDropdown = function (columns) {
var prefixCls = "bee-table";
var mode = _this.props.sort.mode;
return columns.map(function (originColumn) {
var iconTypeIndex = 0;
var column = _extends({}, originColumn);
var sorterClass = 'flat';
if (column.order === "ascend") {
iconTypeIndex = 1;
sorterClass = 'up';
} else if (column.order === "descend") {
iconTypeIndex = 2;
sorterClass = 'down';
}
var sortButton = void 0;
if (column.sorter) {
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
if (iconTypeIndex > 0 && !column.orderNum && mode == 'multiple') {
column.orderNum = _this.getOrderNum();
}
sortButton = _react2["default"].createElement(
'div',
{ className: prefixCls + '-column-sorter' },
_react2["default"].createElement(
'span',
{
className: prefixCls + '-column-sorter-' + sorterClass,
onClick: function onClick() {
_this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
if (column.sorterClick) {
column.sorterClick(column, IconType[iconTypeIndex].type);
}
}
},
_react2["default"].createElement(Icon, { type: IconType[iconTypeIndex].icon }),
_react2["default"].createElement(
'span',
null,
column.orderNum
)
)
);
}
column.title = _react2["default"].createElement(
'span',
null,
column.title,
sortButton
);
return column;
});
};
_this.state = {
data: _this.props.data,
columns: props.columns
};
return _this;
} }
//默认是前端排序，值为true为后端排序
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (nextProps.data !== this.props.data) {
this.setState({ this.setState({
data: nextProps.data, data: nextProps.data,
@ -265,11 +71,34 @@ function sort(Table, Icon) {
}); });
} }
if (nextProps.columns !== this.props.columns) { if (nextProps.columns !== this.props.columns) {
this.setState({ var flatColumns = [];
columns: nextProps.columns this._toFlatColumn(nextProps.columns, -1, flatColumns);
}); this.setState({ columns: nextProps.columns, flatColumns: flatColumns });
} }
}; };
/**
*column扁平化处理，适应多表头避免递归操作
*
*/
SortTable.prototype._toFlatColumn = function _toFlatColumn(columns) {
var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
var flatColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var _this = this;
var children = [];
// const flatColumns = _this.state;
columns.forEach(function (item, index) {
item.parentIndex = parentIndex;
children = item.children;
flatColumns.push(item);
if (children) {
item.children = [];
_this._toFlatColumn(children, flatColumns.length - 1, flatColumns);
}
});
};
/** /**
* column 当前的排序的列 * column 当前的排序的列
@ -296,17 +125,238 @@ function sort(Table, Icon) {
//点击置为“”时，动态的设置相关column的orderNum值。并排序 //点击置为“”时，动态的设置相关column的orderNum值。并排序
SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
var colLen = flatColumns.length;
var parentIndex = void 0,
rsColumns = [];
//每次渲染需要将父类的children置空，避免重复
flatColumns.forEach(function (item) {
if (item.children) {
item.children = [];
}
});
for (var i = colLen - 1; i >= 0; i--) {
parentIndex = flatColumns[i].parentIndex;
if (parentIndex >= 0) {
flatColumns[parentIndex].children.unshift(flatColumns[i]);
}
}
rsColumns = flatColumns.filter(function (item) {
return item.parentIndex == -1;
});
return rsColumns;
};
SortTable.prototype.render = function render() { SortTable.prototype.render = function render() {
var columns = this.renderColumnsDropdown(this.state.columns.concat()); var columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data })); return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
}; };
return SortTable; return SortTable;
}(_react.Component), _class.defaultProps = { }(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
sort: { var _this3 = this;
mode: 'single',
backSource: false //默认是前端排序，值为true为后端排序 this.getOrderNum = function () {
} var orderNum = 0;
//todo 1
_this3.state.flatColumns.forEach(function (item, index) {
if (item.order == "ascend" || item.order == "descend") {
orderNum++;
}
});
return orderNum ? orderNum : 1;
};
this.changeOrderNum = function (column) {
var flatColumns = _this3.state.flatColumns;
//todo 2
flatColumns.forEach(function (col) {
if (col.orderNum > column.orderNum) {
col.orderNum--;
}
if (column.key == col.key) {
col.orderNum = "";
}
});
_this3.setState({ flatColumns: flatColumns });
};
this.getOrderCols = function (columns) {
var orderCols = [];
//todo 3
columns.forEach(function (item) {
if (item.order == "ascend" || item.order == "descend") {
orderCols.push({
order: item.order,
field: item.dataIndex,
orderNum: item.orderNum
});
}
});
return orderCols;
};
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
var preKey = pre[orderCols[currentIndex].key];
var afterKey = after[orderCols[currentIndex].key];
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
return _this3._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
}
if (orderCols[currentIndex].order == "ascend") {
return preKey - afterKey;
} else {
return afterKey - preKey;
}
};
this.multiSort = function (columns) {
var _state = _this3.state,
data = _state.data,
oldData = _state.oldData;
var self = _this3;
var orderCols = {},
orderColslen = 0;
//todo 4
columns.forEach(function (item) {
if (item.orderNum) {
orderColslen++;
orderCols[item.orderNum] = item;
}
});
if (orderColslen > 0) {
data = data.sort(function (a, b) {
return self._sortBy(a, b, orderCols, orderColslen, 1);
});
} else {
data = oldData.concat();
}
return data;
};
this.toggleSortOrder = function (order, column) {
var _state2 = _this3.state,
data = _state2.data,
oldData = _state2.oldData,
flatColumns = _state2.flatColumns;
var sort = _this3.props.sort;
var seleObj = void 0;
if (!oldData) {
oldData = data.concat();
}
//单列排序，清空其他列的排序
if (sort.mode == "single") {
//todo 5
flatColumns.forEach(function (da) {
if (da.key == column.key) {
seleObj = da;
} else {
if (da.order) {
da.order = "flatscend";
}
}
});
seleObj.order = order;
//通过后端请求
if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式
sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
} else {
if (order === "ascend") {
data = data.sort(function (a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function (a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
}
}
} else {
seleObj = flatColumns.find(function (da) {
return da.key == column.key;
});
seleObj.order = order;
if (order === "flatscend") {
_this3.changeOrderNum(column);
}
if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
seleObj.orderNum = _this3.getOrderNum();
}
if (sort.backSource && typeof sort.sortFun === "function") {
sort.sortFun(_this3.getOrderCols(flatColumns));
} else {
data = _this3.multiSort(flatColumns);
}
}
_this3.setState({ data: data, oldData: oldData, flatColumns: flatColumns });
};
this.renderColumnsDropdown = function (columns) {
var tempColumns = [],
rsColumns = [];
tempColumns = columns.map(function (originColumn) {
var column = _extends({}, originColumn);
return _this3.sortColumn(column);
});
rsColumns = _this3._flatToColumn(tempColumns);
return rsColumns;
};
this.sortColumn = function (column) {
var mode = _this3.props.sort.mode;
var prefixCls = "bee-table";
var iconTypeIndex = 0;
var sorterClass = "flat";
if (column.order === "ascend") {
iconTypeIndex = 1;
sorterClass = "up";
} else if (column.order === "descend") {
iconTypeIndex = 2;
sorterClass = "down";
}
var sortButton = void 0;
if (column.sorter) {
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
column.orderNum = _this3.getOrderNum();
}
sortButton = _react2["default"].createElement(
'div',
{ className: prefixCls + '-column-sorter' },
_react2["default"].createElement(
'span',
{ className: prefixCls + '-column-sorter-' + sorterClass, onClick: function onClick() {
_this3.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
if (column.sorterClick) {
column.sorterClick(column, IconType[iconTypeIndex].type);
}
} },
_react2["default"].createElement('i', { className: 'uf ' + IconType[iconTypeIndex].icon }),
_react2["default"].createElement(
'span',
null,
column.orderNum
)
)
);
}
column.title = _react2["default"].createElement(
'span',
null,
column.title,
sortButton
);
return column;
};
}, _temp; }, _temp;
} }
module.exports = exports['default']; module.exports = exports['default'];

1
demo/demolist/Demo33.js
View File

@ -107,6 +107,7 @@ class Demo33 extends Component {
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
onTableKeyDown={this.onTableKeyDown} onTableKeyDown={this.onTableKeyDown}
scroll={{ x: "110%", y: 140 }} scroll={{ x: "110%", y: 140 }}
focusable = {true}
/> />
<input /> <input />
</div> </div>

7
dist/demo.css vendored
View File

@ -8711,6 +8711,9 @@ ul {
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
display: none; display: none;
pointer-events: none; } pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
.u-table:focus { .u-table:focus {
outline: none; outline: none;
@ -8895,10 +8898,6 @@ ul {
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* FormGroup */ /* FormGroup */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

1043
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

3
docs/api.md
View File

@ -74,7 +74,7 @@ import 'bee-table/build/Table.css';
|dataIndex| 显示数据记录的字段|String|-| |dataIndex| 显示数据记录的字段|String|-|
|width|宽度的特定比例根据列的宽度计算|String/Number|-| |width|宽度的特定比例根据列的宽度计算|String/Number|-|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-| |fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序**| function|-| |sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序,排序方法书写时注意有些字段可能是undefined的情况，需要转换成0**| function|-|
|sorterClick|排序的回调函数|function|-| |sorterClick|排序的回调函数|function|-|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-| |render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
@ -94,6 +94,7 @@ import 'bee-table/build/Table.css';
| 快捷键 | 快捷键说明 | 类型 | 默认值 | | 快捷键 | 快捷键说明 | 类型 | 默认值 |
| --- | :--- | --- |--- | | --- | :--- | --- |--- |
| focusable | 是否开启快捷键功能 | bool | -
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| - | onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| - | onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| - | onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -

2
src/Table.js
View File

@ -1096,7 +1096,7 @@ class Table extends Component {
return ( return (
<div className={className} style={props.style} ref={el => this.contentTable = el} <div className={className} style={props.style} ref={el => this.contentTable = el}
tabIndex={props.tabIndex?props.tabIndex:'0'} > tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
{this.getTitle()} {this.getTitle()}
<div className={`${clsPrefix}-content`}> <div className={`${clsPrefix}-content`}>

11
src/Table.scss
View File

@ -485,6 +485,11 @@ $checkbox-height:16px;
display:none; display:none;
pointer-events: none; pointer-events: none;
} }
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}
} }
.u-table:focus{ .u-table:focus{
outline: none; outline: none;
@ -730,10 +735,6 @@ $checkbox-height:16px;
} }
} }
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}

15
src/TableHeader.js
View File

@ -556,9 +556,9 @@ class TableHeader extends Component {
} }
const keyTemp = {}; const keyTemp = {};
//避免key为undefined //避免key为undefined
if(da.dataindex && da.key ===undefined ){ // if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.dataindex keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
} // }
if (filterable && index == rows.length - 1) { if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType( da.children = this.filterRenderType(
da["filtertype"], da["filtertype"],
@ -566,11 +566,11 @@ class TableHeader extends Component {
columIndex columIndex
); );
if(da.key ===undefined ){ if(da.key ===undefined ){
keyTemp.key = da.dataindex+'-filterable' keyTemp.key = keyTemp.key + '-filterable'
} }
delete da.filterdropdownfocus; delete da.filterdropdownfocus;
} }
let thDefaultObj = {}; let thDefaultObj = {};
let thClassName = `${da.className}`?`${da.className}`:''; let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){ if(draggable){
@ -582,7 +582,7 @@ class TableHeader extends Component {
thClassName += ` ${fixedStyle}`; thClassName += ` ${fixedStyle}`;
if(!da.fixed){ if(!da.fixed){
// console.log(keyTemp.key);
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} > data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
{da.children} {da.children}
@ -597,10 +597,9 @@ class TableHeader extends Component {
thDefaultObj = { thDefaultObj = {
...da, ...da,
className:`${da.className} ${fixedStyle}`, className:`${da.className} ${fixedStyle}`,
key:columIndex
}; };
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:""; da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
return (<th {...thDefaultObj} data-th-fixed={da.fixed} />) return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} />)
} }
})} })}
</tr> </tr>

2
src/TableRow.js
View File

@ -210,7 +210,7 @@ class TableRow extends Component{
indent={indent} indent={indent}
index={index} index={index}
column={columns[i]} column={columns[i]}
key={columns[i].key} key={columns[i].key || columns[i].dataIndex || i}
fixed= {fixed} fixed= {fixed}
showSum={showSum} showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null} expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}

310
src/lib/bigData.js
View File

@ -8,9 +8,9 @@ export default function bigData(Table) {
static defaultProps = { static defaultProps = {
data: [], data: [],
loadBuffer: 5, loadBuffer: 5,
rowKey: 'key', rowKey: "key",
onExpand() { }, onExpand() {},
scroll:{} scroll: {}
}; };
static propTypes = { static propTypes = {
loadBuffer: PropTypes.number loadBuffer: PropTypes.number
@ -30,10 +30,10 @@ export default function bigData(Table) {
? this.rowsInView + props.loadBuffer * 2 ? this.rowsInView + props.loadBuffer * 2
: 26; //一次加载多少数据 : 26; //一次加载多少数据
this.cachedRowHeight = []; //缓存每行的高度 this.cachedRowHeight = []; //缓存每行的高度
this.cachedRowParentIndex=[]; this.cachedRowParentIndex = [];
this.expandChildRowKeys=[]; this.expandChildRowKeys = [];
this.firstLevelKey=[]; this.firstLevelKey = [];
this.keys=[]; this.keys = [];
this.lastScrollTop = 0; this.lastScrollTop = 0;
this.currentScrollTop = 0; this.currentScrollTop = 0;
this.startIndex = this.currentIndex; //数据开始位置 this.startIndex = this.currentIndex; //数据开始位置
@ -41,75 +41,84 @@ export default function bigData(Table) {
this.setRowHeight = this.setRowHeight.bind(this); this.setRowHeight = this.setRowHeight.bind(this);
this.setRowParentIndex = this.setRowParentIndex.bind(this); this.setRowParentIndex = this.setRowParentIndex.bind(this);
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps) {
const props = this.props; const props = this.props;
if(nextProps.scroll.y !== props.scroll.y){ if (nextProps.scroll.y !== props.scroll.y) {
const rowHeight = nextProps.height ? nextProps.height : defaultHeight; const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0; const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20; this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
this.loadCount = props.loadBuffer this.loadCount = props.loadBuffer
? this.rowsInView + props.loadBuffer * 2 ? this.rowsInView + props.loadBuffer * 2
: 26; //一次加载多少数据 : 26; //一次加载多少数据
this.currentIndex = 0; this.currentIndex = 0;
this.startIndex = this.currentIndex; //数据开始位置 this.startIndex = this.currentIndex; //数据开始位置
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置 this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
} }
if (nextProps.data !== props.data) {
this.computeCachedRowParentIndex(nextProps.data);
}
} }
componentDidMount(){ componentDidMount() {
const { data } = this.props;
this.computeCachedRowParentIndex(data);
}
/**
*设置data中每个元素的parentIndex
*
*/
computeCachedRowParentIndex = data => {
const isTreeType = this.checkIsTreeType(); const isTreeType = this.checkIsTreeType();
if(isTreeType){ if (isTreeType) {
const {data} = this.props; data.forEach((item, index) => {
data.forEach((item,index)=>{ this.firstLevelKey[index] = this.getRowKey(item, index);
this.firstLevelKey[index] = this.getRowKey(item,index);
this.cachedRowParentIndex[treeTypeIndex] = index; this.cachedRowParentIndex[treeTypeIndex] = index;
//保存所有的keys跟小标对应起来 //保存所有的keys跟小标对应起来
this.keys[treeTypeIndex] = this.getRowKey(item,index); this.keys[treeTypeIndex] = this.getRowKey(item, index);
treeTypeIndex++; treeTypeIndex++;
if(item.children){ if (item.children) {
this.getData(item.children,index); this.getData(item.children, index);
} }
}); });
} }
};
}
getRowKey(record, index) { getRowKey(record, index) {
const rowKey = this.props.rowKey; const rowKey = this.props.rowKey;
const key = (typeof rowKey === 'function') ? const key =
rowKey(record, index) : record[rowKey]; typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
return key; return key;
} }
/** /**
*判断是否是树形结构 *判断是否是树形结构
* *
*/ */
checkIsTreeType(){ checkIsTreeType() {
const {data} = this.props; const { data } = this.props;
let rs = false; let rs = false;
const len = data.length>30?30: data.length; const len = data.length > 30 ? 30 : data.length;
//取前三十个看看是否有children属性，有则为树形结构 //取前三十个看看是否有children属性，有则为树形结构
for(let i = 0 ;i<len;i++){ for (let i = 0; i < len; i++) {
if(data[i].children){ if (data[i].children) {
rs = true; rs = true;
break; break;
} }
} }
return rs; return rs;
} }
getData(data,parentIndex){ getData(data, parentIndex) {
data.forEach((subItem,subIndex)=>{ data.forEach((subItem, subIndex) => {
this.cachedRowParentIndex[treeTypeIndex] = parentIndex; this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex); this.keys[treeTypeIndex] = this.getRowKey(subItem, subIndex);
treeTypeIndex++; treeTypeIndex++;
if(subItem.children){ if (subItem.children) {
this.getData(subItem.children,parentIndex); this.getData(subItem.children, parentIndex);
}
} });
})
} }
componentWillUnmount(){ componentWillUnmount() {
this.cachedRowHeight = []; this.cachedRowHeight = [];
this.cachedRowParentIndex = []; this.cachedRowParentIndex = [];
} }
@ -126,25 +135,30 @@ export default function bigData(Table) {
getSumHeight(start, end) { getSumHeight(start, end) {
const { height } = this.props; const { height } = this.props;
let rowHeight = height ? height : defaultHeight; let rowHeight = height ? height : defaultHeight;
let sumHeight = 0,currentKey,currentRowHeight=rowHeight; let sumHeight = 0,
currentKey,
currentRowHeight = rowHeight;
for (let i = start; i < end; i++) { for (let i = start; i < end; i++) {
if(this.cachedRowHeight[i] == undefined){ if (this.cachedRowHeight[i] == undefined) {
if(this.treeType){ if (this.treeType) {
currentKey = this.keys[i]; currentKey = this.keys[i];
currentRowHeight = 0; currentRowHeight = 0;
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){ if (
this.firstLevelKey.indexOf(currentKey) >= 0 ||
this.expandChildRowKeys.indexOf(currentKey) >= 0
) {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;
} }
} }
sumHeight += currentRowHeight; sumHeight += currentRowHeight;
}else{ } else {
sumHeight += this.cachedRowHeight[i] sumHeight += this.cachedRowHeight[i];
} }
} }
return sumHeight; return sumHeight;
} }
/** /**
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面 *@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
*@param 最新一次滚动的scrollTop *@param 最新一次滚动的scrollTop
@ -196,19 +210,21 @@ export default function bigData(Table) {
let index = 0; let index = 0;
let temp = nextScrollTop; let temp = nextScrollTop;
let currentKey; let currentKey;
while (temp >0) { while (temp > 0) {
let currentRowHeight = this.cachedRowHeight[index]; let currentRowHeight = this.cachedRowHeight[index];
if(currentRowHeight === undefined){ if (currentRowHeight === undefined) {
if(this.treeType){ if (this.treeType) {
currentKey = this.keys[index]; currentKey = this.keys[index];
currentRowHeight = 0; currentRowHeight = 0;
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){ if (
this.firstLevelKey.indexOf(currentKey) >= 0 ||
this.expandChildRowKeys.indexOf(currentKey) >= 0
) {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;
} }
}else{ } else {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;
} }
} }
temp -= currentRowHeight; temp -= currentRowHeight;
if (temp > 0) { if (temp > 0) {
@ -223,39 +239,42 @@ export default function bigData(Table) {
_this.currentIndex = index; _this.currentIndex = index;
let rowsInView = 0; //可视区域显示多少行 let rowsInView = 0; //可视区域显示多少行
let rowsHeight = 0; //可视区域内容高度 let rowsHeight = 0; //可视区域内容高度
let tempIndex = index; let tempIndex = index;
//如果可视区域中需要展示的数据已经在缓存中则不重现render。 //如果可视区域中需要展示的数据已经在缓存中则不重现render。
if (viewHeight) { if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) { while (
if(this.cachedRowHeight[tempIndex]){ rowsHeight < viewHeight &&
rowsHeight += this.cachedRowHeight[tempIndex]; tempIndex < this.cachedRowHeight.length
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){ ) {
rowsInView++; if (this.cachedRowHeight[tempIndex]) {
} rowsHeight += this.cachedRowHeight[tempIndex];
if (
(treeType &&
_this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
!treeType
) {
rowsInView++;
}
} }
tempIndex++; tempIndex++;
} }
if(treeType){ if (treeType) {
const treeIndex = index const treeIndex = index;
index = _this.cachedRowParentIndex[treeIndex]; index = _this.cachedRowParentIndex[treeIndex];
if(index === undefined){ if (index === undefined) {
// console.log('index is undefined********'+treeIndex); // console.log('index is undefined********'+treeIndex);
index = this.getParentIndex(treeIndex); index = this.getParentIndex(treeIndex);
// console.log("getParentIndex****"+index); // console.log("getParentIndex****"+index);
} }
} }
// console.log('parentIndex*********',index); // console.log('parentIndex*********',index);
// 如果rowsInView 小于 缓存的数据则重新render // 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动 下临界值超出缓存的endIndex则重新渲染 // 向下滚动 下临界值超出缓存的endIndex则重新渲染
if (rowsInView + index > endIndex - rowDiff && isOrder) { if (rowsInView + index > endIndex - rowDiff && isOrder) {
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
startIndex = index - loadBuffer>0?index - loadBuffer:0; endIndex = startIndex + loadCount;
endIndex = startIndex + loadCount;
//树状结构则根据当前的节点重新计算startIndex和endIndex //树状结构则根据当前的节点重新计算startIndex和endIndex
// if(treeType){ // if(treeType){
// const currentParentIndex = _this.cachedRowParentIndex[index]; // const currentParentIndex = _this.cachedRowParentIndex[index];
@ -270,10 +289,10 @@ export default function bigData(Table) {
if (endIndex > data.length) { if (endIndex > data.length) {
endIndex = data.length; endIndex = data.length;
} }
if(startIndex!==this.startIndex||endIndex!==this.endIndex){ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = endIndex; this.endIndex = endIndex;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "===================", // "===================",
@ -288,10 +307,10 @@ export default function bigData(Table) {
if (startIndex < 0) { if (startIndex < 0) {
startIndex = 0; startIndex = 0;
} }
if(startIndex!==this.startIndex||endIndex!==this.endIndex){ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = this.startIndex + loadCount; this.endIndex = this.startIndex + loadCount;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "**index**" + index, // "**index**" + index,
@ -300,15 +319,14 @@ export default function bigData(Table) {
// ); // );
} }
} }
} }
}; };
setRowHeight(height, index) { setRowHeight(height, index) {
this.cachedRowHeight[index] = height; this.cachedRowHeight[index] = height;
} }
setRowParentIndex(parentIndex,index){ setRowParentIndex(parentIndex, index) {
// this.cachedRowParentIndex[index] = parentIndex; // this.cachedRowParentIndex[index] = parentIndex;
} }
/** /**
* *
@ -316,70 +334,84 @@ export default function bigData(Table) {
* @param {*} currentIndex 当前行号 * @param {*} currentIndex 当前行号
*/ */
getParentIndex(targetIndex) { getParentIndex(targetIndex) {
const {data} = this.props; const { data } = this.props;
let parentIndex = -1; let parentIndex = -1;
parentIndex = this.getIndex(data,-1,targetIndex); parentIndex = this.getIndex(data, -1, targetIndex);
if(parentIndex<0){//小于0说明没有展开的子节点 if (parentIndex < 0) {
parentIndex = targetIndex; //小于0说明没有展开的子节点
} parentIndex = targetIndex;
return parentIndex; }
return parentIndex;
} }
getIndex(data,index,targetIndex){ getIndex(data, index, targetIndex) {
const parentIndex = index; const parentIndex = index;
for(let i=0;i<data.length;i++){ for (let i = 0; i < data.length; i++) {
index++; index++;
if(targetIndex <=index){ if (targetIndex <= index) {
break; break;
}
if(data[i].children){
this.getIndex(data[i].children,index,targetIndex);
}
} }
return parentIndex; if (data[i].children) {
this.getIndex(data[i].children, index, targetIndex);
}
}
return parentIndex;
} }
onExpand = (expandState, record) => {
onExpand = (expandState,record)=>{
const _this = this; const _this = this;
// 展开 // 展开
if(expandState){ if (expandState) {
record.children && record.children.forEach((item,index)=>{ record.children &&
_this.expandChildRowKeys.push( _this.getRowKey(item,index)); record.children.forEach((item, index) => {
}) _this.expandChildRowKeys.push(_this.getRowKey(item, index));
}else{ });
// 收起 } else {
record.children && record.children.forEach((item,index)=>{ // 收起
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1) record.children &&
}) record.children.forEach((item, index) => {
_this.expandChildRowKeys.splice(
_this.expandChildRowKeys.findIndex(
fitem => fitem.key === item.key
),
1
);
});
} }
_this.props.onExpand(expandState, record); _this.props.onExpand(expandState, record);
} };
render() { render() {
const { data } = this.props; const { data } = this.props;
const { scrollTop } = this; const { scrollTop } = this;
const { endIndex, startIndex } = this; const { endIndex, startIndex } = this;
const lazyLoad = { const lazyLoad = {
startIndex: startIndex, startIndex: startIndex,
startParentIndex:startIndex,//为树状节点做准备 startParentIndex: startIndex //为树状节点做准备
}; };
if(this.treeType){ if (this.treeType) {
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex }) const preSubCounts = this.cachedRowParentIndex.findIndex(item => {
const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex }) return item == startIndex;
lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0); });
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length); const sufSubCounts = this.cachedRowParentIndex.findIndex(item => {
return item == endIndex;
if(preSubCounts>0){ });
lazyLoad.preHeight = this.getSumHeight(
0,
preSubCounts > -1 ? preSubCounts : 0
);
lazyLoad.sufHeight = this.getSumHeight(
sufSubCounts + 1 > 0
? sufSubCounts + 1
: this.cachedRowParentIndex.length,
this.cachedRowParentIndex.length
);
if (preSubCounts > 0) {
lazyLoad.startIndex = preSubCounts; lazyLoad.startIndex = preSubCounts;
} }
} else {
}else{ lazyLoad.preHeight = this.getSumHeight(0, startIndex);
lazyLoad.preHeight = this.getSumHeight(0, startIndex) lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
} }
// console.log('*******ScrollTop*****'+scrollTop); // console.log('*******ScrollTop*****'+scrollTop);
return ( return (
@ -390,9 +422,9 @@ export default function bigData(Table) {
handleScrollY={this.handleScrollY} handleScrollY={this.handleScrollY}
scrollTop={scrollTop} scrollTop={scrollTop}
setRowHeight={this.setRowHeight} setRowHeight={this.setRowHeight}
setRowParentIndex = {this.setRowParentIndex} setRowParentIndex={this.setRowParentIndex}
onExpand = {this.onExpand} onExpand={this.onExpand}
onExpandedRowsChange = {this.onExpandedRowsChange} onExpandedRowsChange={this.onExpandedRowsChange}
// className={'lazy-table'} // className={'lazy-table'}
/> />
); );

33
src/lib/dragColumn.js
View File

@ -55,17 +55,28 @@ export default function dragColumn(Table) {
onDrop=(event,data)=>{ onDrop=(event,data)=>{
let {dragSource,dragTarg} = data; let {dragSource,dragTarg} = data;
let {columns} = this.state; let {columns} = this.state;
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key); let sourceIndex = -1,targetIndex = -1;
let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
for (let index = 0; index < columns.length; index++) { sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
const da = columns[index]; targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
if(da.key === dragSource.key){ // for (let index = 0; index < columns.length; index++) {
columns[index] = dragTargColum; // const da = columns[index];
} // if(da.key === dragSource.key){
if(da.key === dragTarg.key){ // columns[index] = dragTargColum;
columns[index] = dragSourceColum; // }
} // if(da.key === dragTarg.key){
} // columns[index] = dragSourceColum;
// }
// }
// 向前移动
if(targetIndex < sourceIndex){
targetIndex = targetIndex + 1;
}
columns.splice(
targetIndex,
0,
columns.splice(sourceIndex, 1)[0]
);
this.setState({ this.setState({
columns:cloneDeep(columns) columns:cloneDeep(columns)
}); });

327
src/lib/sort.js
View File

@ -24,141 +24,158 @@ export default function sort(Table, Icon) {
return class SortTable extends Component { return class SortTable extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { let flatColumns = [];
data: this.props.data, this._toFlatColumn(props.columns,-1,flatColumns);
columns:props.columns, this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
};
} }
static defaultProps = { static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序，值为true为后端排序
sort: { componentWillReceiveProps(nextProps) {
mode:'single',
backSource:false //默认是前端排序，值为true为后端排序 if (nextProps.data !== this.props.data) {
}
};
componentWillReceiveProps(nextProps){
if(nextProps.data !== this.props.data){
this.setState({
data: nextProps.data,
oldData: nextProps.data.concat(),
});
}
if(nextProps.columns !== this.props.columns){
this.setState({ this.setState({
columns: nextProps.columns, data: nextProps.data,
oldData: nextProps.data.concat()
}); });
} }
if (nextProps.columns !== this.props.columns) {
let flatColumns = [];
this._toFlatColumn(nextProps.columns,-1,flatColumns);
this.setState({ columns: nextProps.columns ,flatColumns});
}
} }
getOrderNum =()=>{ /**
let orderNum=0 ; *column扁平化处理，适应多表头避免递归操作
this.state.columns.forEach((item,index)=>{ *
if(item.order=='ascend' || item.order=='descend'){ */
_toFlatColumn(columns,parentIndex = -1,flatColumns=[]) {
const _this = this;
let children = [];
// const flatColumns = _this.state;
columns.forEach((item,index)=>{
item.parentIndex = parentIndex;
children = item.children;
flatColumns.push(item);
if(children){
item.children = [];
_this._toFlatColumn(children,flatColumns.length - 1,flatColumns);
}
});
}
getOrderNum = () => {
let orderNum = 0;
//todo 1
this.state.flatColumns.forEach((item, index) => {
if (item.order == "ascend" || item.order == "descend") {
orderNum++; orderNum++;
} }
}) });
return orderNum?orderNum:1; return orderNum ? orderNum : 1;
} };
/** /**
* column 当前的排序的列 * column 当前的排序的列
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。 * 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
*/ */
changeOrderNum = (column)=>{ changeOrderNum = column => {
let {columns} = this.state; let { flatColumns } = this.state;
columns.forEach((col)=>{ //todo 2
if(col.orderNum>column.orderNum){ flatColumns.forEach(col => {
if (col.orderNum > column.orderNum) {
col.orderNum--; col.orderNum--;
} }
if(column.key == col.key){ if (column.key == col.key) {
col.orderNum = ''; col.orderNum = "";
} }
}) });
this.setState({columns}); this.setState({ flatColumns });
};
}
/** /**
* 获取排序字段 * 获取排序字段
*/ */
getOrderCols = (columns)=>{ getOrderCols = columns => {
let orderCols = []; let orderCols = [];
columns.forEach(item=>{ //todo 3
if(item.order=='ascend'||item.order=='descend'){ columns.forEach(item => {
orderCols.push({order:item.order, if (item.order == "ascend" || item.order == "descend") {
field:item.dataIndex, orderCols.push({
orderNum:item.orderNum order: item.order,
field: item.dataIndex,
orderNum: item.orderNum
}); });
} }
}) });
return orderCols; return orderCols;
} };
/** /**
* pre：前一条数据 * pre：前一条数据
* after:后一条数据 * after:后一条数据
* orderType:升序、降序 * orderType:升序、降序
*/ */
_sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{ _sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
const preKey = pre[orderCols[currentIndex].key]; const preKey = pre[orderCols[currentIndex].key];
const afterKey = after[orderCols[currentIndex].key]; const afterKey = after[orderCols[currentIndex].key];
if(preKey == afterKey && currentIndex+1<=orderColslen){ if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1); return this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
} }
if(orderCols[currentIndex].order=='ascend'){ if (orderCols[currentIndex].order == "ascend") {
return preKey - afterKey return preKey - afterKey;
}else{ } else {
return afterKey - preKey return afterKey - preKey;
} }
} };
/** /**
* 多列排序 先排order为1的，其他的基于已排序的数据排 * 多列排序 先排order为1的，其他的基于已排序的数据排
*/ */
multiSort = (columns)=>{ multiSort = columns => {
let {data, oldData} = this.state; let { data, oldData } = this.state;
const self = this; const self = this;
let orderCols = {},orderColslen=0; let orderCols = {},
columns.forEach(item=>{ orderColslen = 0;
if(item.orderNum){ //todo 4
columns.forEach(item => {
if (item.orderNum) {
orderColslen++; orderColslen++;
orderCols[item.orderNum] = item; orderCols[item.orderNum] = item;
} }
}) });
if(orderColslen>0){ if (orderColslen > 0) {
data = data.sort(function(a, b) { data = data.sort(function(a, b) {
return self._sortBy(a,b,orderCols,orderColslen,1); return self._sortBy(a, b, orderCols, orderColslen, 1);
}); });
}else{ } else {
data = oldData.concat(); data = oldData.concat();
} }
return data; return data;
};
}
toggleSortOrder = (order, column) => { toggleSortOrder = (order, column) => {
let { data, oldData ,columns} = this.state; let { data, oldData, flatColumns } = this.state;
let {sort} = this.props; let { sort } = this.props;
let seleObj; let seleObj;
if (!oldData) { if (!oldData) {
oldData = data.concat(); oldData = data.concat();
} }
//单列排序，清空其他列的排序 //单列排序，清空其他列的排序
if(sort.mode == 'single'){ if (sort.mode == "single") {
columns.forEach(da=>{ //todo 5
if(da.key == column.key){ flatColumns.forEach(da => {
if (da.key == column.key) {
seleObj = da; seleObj = da;
}else{ } else {
if(da.order){ if (da.order) {
da.order = 'flatscend'; da.order = "flatscend";
} }
} }
}) });
seleObj.order = order; seleObj.order = order;
//通过后端请求 //通过后端请求
if(sort.backSource && typeof sort.sortFun === "function"){ if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式 //获取排序的字段和方式
sort.sortFun([{ sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
order:order, } else {
field:seleObj.dataIndex
}]);
}else{
if (order === "ascend") { if (order === "ascend") {
data = data.sort(function(a, b) { data = data.sort(function(a, b) {
return column.sorter(a, b); return column.sorter(a, b);
@ -171,83 +188,99 @@ export default function sort(Table, Icon) {
data = oldData.concat(); data = oldData.concat();
} }
} }
}else{ } else {
seleObj = columns.find(da=>da.key == column.key); seleObj = flatColumns.find(da => da.key == column.key);
seleObj.order = order; seleObj.order = order;
if(order === "flatscend"){ if (order === "flatscend") {
this.changeOrderNum(column); this.changeOrderNum(column);
} }
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){ if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
seleObj.orderNum = this.getOrderNum(); seleObj.orderNum = this.getOrderNum();
} }
if(sort.backSource && typeof sort.sortFun === "function"){ if (sort.backSource && typeof sort.sortFun === "function") {
sort.sortFun(this.getOrderCols(columns)); sort.sortFun(this.getOrderCols(flatColumns));
}else{ } else {
data = this.multiSort(columns); data = this.multiSort(flatColumns);
} }
} }
this.setState({ this.setState({ data, oldData, flatColumns });
data,
oldData,
columns
});
}; };
//每个column上添加orderNum属性，不排序时为“”。 //每个column上添加orderNum属性，不排序时为“”。
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序 //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
//点击置为“”时，动态的设置相关column的orderNum值。并排序 //点击置为“”时，动态的设置相关column的orderNum值。并排序
renderColumnsDropdown=(columns)=>{ renderColumnsDropdown = columns => {
const prefixCls = "bee-table"; let tempColumns = [],rsColumns = [];
const {mode} = this.props.sort; tempColumns = columns.map(originColumn => {
return columns.map(originColumn => {
let iconTypeIndex = 0;
let column = Object.assign({}, originColumn); let column = Object.assign({}, originColumn);
let sorterClass = 'flat'; return this.sortColumn(column);
if(column.order === "ascend"){
iconTypeIndex = 1;
sorterClass = 'up'
}else if(column.order === "descend"){
iconTypeIndex = 2;
sorterClass = 'down'
}
let sortButton;
if (column.sorter) {
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
column.orderNum = this.getOrderNum();
}
sortButton = (
<div className={`${prefixCls}-column-sorter`}>
<span
className={`${prefixCls}-column-sorter-${sorterClass}`}
onClick={() =>{
this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);
if(column.sorterClick){
column.sorterClick(column,IconType[iconTypeIndex].type);
}
} }
>
<Icon type={IconType[iconTypeIndex].icon} />
<span >{column.orderNum}</span>
</span>
</div>
);
}
column.title = (
<span>
{column.title}
{sortButton}
</span>
);
return column;
}); });
rsColumns = this._flatToColumn(tempColumns);
return rsColumns;
};
sortColumn = column => {
const { mode } = this.props.sort;
const prefixCls = "bee-table";
let iconTypeIndex = 0;
let sorterClass = "flat";
if (column.order === "ascend") {
iconTypeIndex = 1;
sorterClass = "up";
} else if (column.order === "descend") {
iconTypeIndex = 2;
sorterClass = "down";
}
let sortButton;
if (column.sorter) {
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
column.orderNum = this.getOrderNum();
}
sortButton = <div className={`${prefixCls}-column-sorter`}>
<span className={`${prefixCls}-column-sorter-${sorterClass}`} onClick={() => {
this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
if (column.sorterClick) {
column.sorterClick(column, IconType[iconTypeIndex].type);
}
}}>
{/* <Icon type='{IconType[iconTypeIndex].icon}' /> */}
<i className={`uf ${IconType[iconTypeIndex].icon}`} />
<span>{column.orderNum}</span>
</span>
</div>;
}
column.title = <span>
{column.title}
{sortButton}
</span>;
return column;
};
_flatToColumn(flatColumns){
const colLen = flatColumns.length;
let parentIndex,rsColumns = [];
//每次渲染需要将父类的children置空，避免重复
flatColumns.forEach(item=>{
if(item.children){
item.children = [];
}
})
for(let i = colLen-1;i>=0;i--){
parentIndex = flatColumns[i].parentIndex;
if(parentIndex >= 0){
flatColumns[parentIndex].children.unshift(flatColumns[i]);
}
}
rsColumns = flatColumns.filter(item=>{
return item.parentIndex == -1
})
return rsColumns;
} }
render() { render() {
let columns = this.renderColumnsDropdown(this.state.columns.concat()); let columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
return <Table {...this.props} columns={columns} data={this.state.data} />; return <Table {...this.props} columns={columns} data={this.state.data} />;
} }
}; };