fix: 解决合计行与排序组合使用时的问题

This commit is contained in:
huyueb 2017-09-29 15:03:06 +08:00
parent 350dc43193
commit 6f6abe5303
6 changed files with 27 additions and 22 deletions

View File

@ -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

View File

@ -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",

View File

@ -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;

View File

@ -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} />;
}
} }
};
} }

View File

@ -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}
/>;
} }
}; };
}; };