p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 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 {
display: none;
pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
.u-table:focus {
outline: none;
@ -631,7 +634,3 @@
height: 32px;
padding: 0px 16px 0 16px;
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) {
return _this6.contentTable = el;
},
tabIndex: props.tabIndex ? props.tabIndex : '0' },
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(),
_react2["default"].createElement(
'div',

16
build/TableHeader.js
View File

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

102
build/lib/bigData.js
View File

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

474
build/lib/sort.js
View File

@ -28,7 +28,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
* @param {*} Icon
*/
function sort(Table, Icon) {
var _class, _temp;
var _class, _temp, _initialiseProps;
var IconType = [{
'type': 'flat',
@ -50,214 +50,20 @@ function sort(Table, Icon) {
function SortTable(props) {
_classCallCheck(this, SortTable);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
_this.getOrderNum = function () {
var orderNum = 0;
_this.state.columns.forEach(function (item, index) {
if (item.order == 'ascend' || item.order == 'descend') {
orderNum++;
}
});
return orderNum ? orderNum : 1;
};
_initialiseProps.call(_this2);
_this.changeOrderNum = function (column) {
var columns = _this.state.columns;
var flatColumns = [];
_this2._toFlatColumn(props.columns, -1, flatColumns);
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
columns.forEach(function (col) {
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;
return _this2;
}
//默认是前端排序，值为true为后端排序
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.setState({
data: nextProps.data,
@ -265,11 +71,34 @@ function sort(Table, Icon) {
});
}
if (nextProps.columns !== this.props.columns) {
this.setState({
columns: nextProps.columns
});
var flatColumns = [];
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 当前的排序的列
@ -296,17 +125,238 @@ function sort(Table, Icon) {
//点击置为“”时，动态的设置相关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() {
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 SortTable;
}(_react.Component), _class.defaultProps = {
sort: {
mode: 'single',
backSource: false //默认是前端排序，值为true为后端排序
}
}(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
var _this3 = this;
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;
}
module.exports = exports['default'];

1
demo/demolist/Demo33.js
View File

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

7
dist/demo.css vendored
View File

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

2
src/Table.js
View File

@ -1096,7 +1096,7 @@ class Table extends Component {
return (
<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()}
<div className={`${clsPrefix}-content`}>

11
src/Table.scss
View File

@ -485,6 +485,11 @@ $checkbox-height:16px;
display:none;
pointer-events: none;
}
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}
}
.u-table:focus{
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 = {};
//避免key为undefined
if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.dataindex
}
// if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
// }
if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType(
da["filtertype"],
@ -566,11 +566,11 @@ class TableHeader extends Component {
columIndex
);
if(da.key ===undefined ){
keyTemp.key = da.dataindex+'-filterable'
keyTemp.key = keyTemp.key + '-filterable'
}
delete da.filterdropdownfocus;
}
let thDefaultObj = {};
let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){
@ -582,7 +582,7 @@ class TableHeader extends Component {
thClassName += ` ${fixedStyle}`;
if(!da.fixed){
// console.log(keyTemp.key);
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} >
{da.children}
@ -597,10 +597,9 @@ class TableHeader extends Component {
thDefaultObj = {
...da,
className:`${da.className} ${fixedStyle}`,
key:columIndex
};
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>

2
src/TableRow.js
View File

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

310
src/lib/bigData.js
View File

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

33
src/lib/dragColumn.js
View File

@ -55,17 +55,28 @@ export default function dragColumn(Table) {
onDrop=(event,data)=>{
let {dragSource,dragTarg} = data;
let {columns} = this.state;
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key);
let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
for (let index = 0; index < columns.length; index++) {
const da = columns[index];
if(da.key === dragSource.key){
columns[index] = dragTargColum;
}
if(da.key === dragTarg.key){
columns[index] = dragSourceColum;
}
}
let sourceIndex = -1,targetIndex = -1;
sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// 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({
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 {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
columns:props.columns,
};
let flatColumns = [];
this._toFlatColumn(props.columns,-1,flatColumns);
this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
}
static defaultProps = {
sort: {
mode:'single',
backSource:false //默认是前端排序，值为true为后端排序
}
};
componentWillReceiveProps(nextProps){
if(nextProps.data !== this.props.data){
this.setState({
data: nextProps.data,
oldData: nextProps.data.concat(),
});
}
if(nextProps.columns !== this.props.columns){
static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序，值为true为后端排序
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
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 ;
this.state.columns.forEach((item,index)=>{
if(item.order=='ascend' || item.order=='descend'){
/**
*column扁平化处理，适应多表头避免递归操作
*
*/
_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++;
}
})
return orderNum?orderNum:1;
}
});
return orderNum ? orderNum : 1;
};
/**
* column 当前的排序的列
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
*/
changeOrderNum = (column)=>{
let {columns} = this.state;
columns.forEach((col)=>{
if(col.orderNum>column.orderNum){
changeOrderNum = column => {
let { flatColumns } = this.state;
//todo 2
flatColumns.forEach(col => {
if (col.orderNum > column.orderNum) {
col.orderNum--;
}
if(column.key == col.key){
col.orderNum = '';
if (column.key == col.key) {
col.orderNum = "";
}
})
this.setState({columns});
}
});
this.setState({ flatColumns });
};
/**
* 获取排序字段
*/
getOrderCols = (columns)=>{
getOrderCols = columns => {
let orderCols = [];
columns.forEach(item=>{
if(item.order=='ascend'||item.order=='descend'){
orderCols.push({order:item.order,
field:item.dataIndex,
orderNum:item.orderNum
//todo 3
columns.forEach(item => {
if (item.order == "ascend" || item.order == "descend") {
orderCols.push({
order: item.order,
field: item.dataIndex,
orderNum: item.orderNum
});
}
})
});
return orderCols;
}
/**
* pre：前一条数据
* after:后一条数据
* orderType:升序、降序
*/
_sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{
};
/**
* pre：前一条数据
* after:后一条数据
* orderType:升序、降序
*/
_sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
const preKey = pre[orderCols[currentIndex].key];
const afterKey = after[orderCols[currentIndex].key];
if(preKey == afterKey && currentIndex+1<=orderColslen){
return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1);
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
if (orderCols[currentIndex].order == "ascend") {
return preKey - afterKey;
} else {
return afterKey - preKey;
}
}
};
/**
* 多列排序 先排order为1的，其他的基于已排序的数据排
*/
multiSort = (columns)=>{
let {data, oldData} = this.state;
multiSort = columns => {
let { data, oldData } = this.state;
const self = this;
let orderCols = {},orderColslen=0;
columns.forEach(item=>{
if(item.orderNum){
let orderCols = {},
orderColslen = 0;
//todo 4
columns.forEach(item => {
if (item.orderNum) {
orderColslen++;
orderCols[item.orderNum] = item;
}
})
if(orderColslen>0){
});
if (orderColslen > 0) {
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();
}
return data;
}
};
toggleSortOrder = (order, column) => {
let { data, oldData ,columns} = this.state;
let {sort} = this.props;
let { data, oldData, flatColumns } = this.state;
let { sort } = this.props;
let seleObj;
if (!oldData) {
oldData = data.concat();
}
//单列排序，清空其他列的排序
if(sort.mode == 'single'){
columns.forEach(da=>{
if(da.key == column.key){
if (sort.mode == "single") {
//todo 5
flatColumns.forEach(da => {
if (da.key == column.key) {
seleObj = da;
}else{
if(da.order){
da.order = 'flatscend';
} else {
if (da.order) {
da.order = "flatscend";
}
}
})
});
seleObj.order = order;
//通过后端请求
if(sort.backSource && typeof sort.sortFun === "function"){
if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式
sort.sortFun([{
order:order,
field:seleObj.dataIndex
}]);
}else{
sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
} else {
if (order === "ascend") {
data = data.sort(function(a, b) {
return column.sorter(a, b);
@ -171,83 +188,99 @@ export default function sort(Table, Icon) {
data = oldData.concat();
}
}
}else{
seleObj = columns.find(da=>da.key == column.key);
} else {
seleObj = flatColumns.find(da => da.key == column.key);
seleObj.order = order;
if(order === "flatscend"){
if (order === "flatscend") {
this.changeOrderNum(column);
}
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
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);
if (sort.backSource && typeof sort.sortFun === "function") {
sort.sortFun(this.getOrderCols(flatColumns));
} else {
data = this.multiSort(flatColumns);
}
}
this.setState({
data,
oldData,
columns
});
this.setState({ data, oldData, flatColumns });
};
//每个column上添加orderNum属性，不排序时为“”。
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
//点击置为“”时，动态的设置相关column的orderNum值。并排序
renderColumnsDropdown=(columns)=>{
const prefixCls = "bee-table";
const {mode} = this.props.sort;
return columns.map(originColumn => {
let iconTypeIndex = 0;
renderColumnsDropdown = columns => {
let tempColumns = [],rsColumns = [];
tempColumns = columns.map(originColumn => {
let column = Object.assign({}, originColumn);
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} />
<span >{column.orderNum}</span>
</span>
</div>
);
}
column.title = (
<span>
{column.title}
{sortButton}
</span>
);
return column;
return this.sortColumn(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() {
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} />;
}
};