fix: 解决合计行与排序组合使用时的问题
This commit is contained in:
parent
350dc43193
commit
6f6abe5303
|
@ -10,7 +10,7 @@ import Table from "../../src";
|
||||||
import Checkbox from "bee-checkbox";
|
import Checkbox from "bee-checkbox";
|
||||||
import multiSelect from "../../src/lib/multiSelect.js";
|
import multiSelect from "../../src/lib/multiSelect.js";
|
||||||
import sort from "../../src/lib/sort.js";
|
import sort from "../../src/lib/sort.js";
|
||||||
import Sum from "../../src/lib/sum.js";
|
import sum from "../../src/lib/sum.js";
|
||||||
|
|
||||||
const columns13 = [
|
const columns13 = [
|
||||||
{
|
{
|
||||||
|
@ -54,7 +54,6 @@ class Demo13 extends Component {
|
||||||
render() {
|
render() {
|
||||||
let multiObj = {
|
let multiObj = {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
param: "key"
|
|
||||||
};
|
};
|
||||||
let ComplexTable = multiSelect(sum(sort(Table)));
|
let ComplexTable = multiSelect(sum(sort(Table)));
|
||||||
return (
|
return (
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -34,6 +34,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.5",
|
"classnames": "^2.2.5",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
"object-path": "^0.11.3",
|
"object-path": "^0.11.3",
|
||||||
"shallowequal": "^0.2.2",
|
"shallowequal": "^0.2.2",
|
||||||
"tinper-bee-core": "^0.1.6",
|
"tinper-bee-core": "^0.1.6",
|
||||||
|
|
|
@ -115,6 +115,7 @@ $table-move-in-color: $bg-color-base;
|
||||||
&-expand-icon {
|
&-expand-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
import React, { Component } from 'react';
|
import Icon from "bee-icon";
|
||||||
import Icon from 'bee-icon';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 参数:prefixCls,默认bee-table,用于设置图标的样式
|
* 参数:prefixCls,默认bee-table,用于设置图标的样式
|
||||||
|
@ -17,13 +16,13 @@ export default function sort(Table) {
|
||||||
}
|
}
|
||||||
toggleSortOrder = (order, column) => {
|
toggleSortOrder = (order, column) => {
|
||||||
let { sortOrder, data, oldData } = this.state;
|
let { sortOrder, data, oldData } = this.state;
|
||||||
let ascend_sort = function (key) {
|
let ascend_sort = function(key) {
|
||||||
return function (a, b) {
|
return function(a, b) {
|
||||||
return a.key - b.key;
|
return a.key - b.key;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
let descend_sort = function (key) {
|
let descend_sort = function(key) {
|
||||||
return function (a, b) {
|
return function(a, b) {
|
||||||
return b.key - a.key;
|
return b.key - a.key;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -35,11 +34,11 @@ export default function sort(Table) {
|
||||||
oldData = data.concat();
|
oldData = data.concat();
|
||||||
}
|
}
|
||||||
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);
|
||||||
});
|
});
|
||||||
} else if (order === "descend") {
|
} else if (order === "descend") {
|
||||||
data = data.sort(function (a, b) {
|
data = data.sort(function(a, b) {
|
||||||
return column.sorter(b, a);
|
return column.sorter(b, a);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -50,10 +49,10 @@ export default function sort(Table) {
|
||||||
data: data,
|
data: data,
|
||||||
oldData: oldData
|
oldData: oldData
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
renderColumnsDropdown(columns) {
|
renderColumnsDropdown(columns) {
|
||||||
const { sortOrder } = this.state;
|
const { sortOrder } = this.state;
|
||||||
const prefixCls = this.props.prefixCls || 'bee-table';
|
const prefixCls = this.props.prefixCls || "bee-table";
|
||||||
return columns.map(originColumn => {
|
return columns.map(originColumn => {
|
||||||
let column = Object.assign({}, originColumn);
|
let column = Object.assign({}, originColumn);
|
||||||
let sortButton;
|
let sortButton;
|
||||||
|
@ -93,8 +92,8 @@ export default function sort(Table) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
let columns = this.renderColumnsDropdown(this.props.columns).concat();
|
let columns = this.renderColumnsDropdown(this.props.columns.concat());
|
||||||
return <Table{...this.props} columns={columns} data={this.state.data}/>;
|
return <Table {...this.props} columns={columns} data={this.state.data} />;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import clonedeep from "lodash.clonedeep";
|
||||||
|
|
||||||
//创建新列存放 “合计” 字段
|
//创建新列存放 “合计” 字段
|
||||||
let columns2 = {
|
let columns2 = {
|
||||||
|
@ -16,7 +17,7 @@ let sum = Table => {
|
||||||
//合计数字列,并将计算所得数据存储到一个obj对象中
|
//合计数字列,并将计算所得数据存储到一个obj对象中
|
||||||
currentFooter = () => {
|
currentFooter = () => {
|
||||||
let data_2 = this.props.data;
|
let data_2 = this.props.data;
|
||||||
let columns_sum = this.props.columns;
|
let columns_sum = clonedeep(this.props.columns);
|
||||||
//用一个对象存储合计数据,这里合计对象的属性对应每列字段
|
//用一个对象存储合计数据,这里合计对象的属性对应每列字段
|
||||||
let obj = {};
|
let obj = {};
|
||||||
if (Array.isArray(data_2)) {
|
if (Array.isArray(data_2)) {
|
||||||
|
@ -42,16 +43,20 @@ let sum = Table => {
|
||||||
columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
|
columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
|
||||||
// }
|
// }
|
||||||
//除去列为特殊渲染的,避免像a标签这种html代码写入到合计中
|
//除去列为特殊渲染的,避免像a标签这种html代码写入到合计中
|
||||||
columns_sum = columns_sum.map((item, index) => {
|
columns_sum.map((item, index) => {
|
||||||
if (typeof item.render == "function") {
|
if (typeof item.render == "function") {
|
||||||
delete item.render;
|
item.render = '';
|
||||||
}
|
}
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
return <Table showHeader={false} columns={columns_sum} data={obj} />;
|
return <Table showHeader={false} columns={columns_sum} data={obj} />;
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
return <Table {...this.props} footer={this.currentFooter} />;
|
return <Table
|
||||||
|
columns={this.props.columns}
|
||||||
|
data={this.props.data}
|
||||||
|
footer={this.currentFooter}
|
||||||
|
/>;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue