feat: 为合计功能增加列可配置,并且完善文档

This commit is contained in:
huyueb 2017-09-29 16:03:20 +08:00
parent 6f6abe5303
commit c9f839b7f2
5 changed files with 35 additions and 27 deletions

View File

@ -30,6 +30,7 @@ const columns13 = [
dataIndex: "c", dataIndex: "c",
key: "c", key: "c",
width: 200, width: 200,
sumCol:true,
sorter: (a, b) => a.c - b.c sorter: (a, b) => a.c - b.c
}, },
{ {

View File

@ -29,7 +29,7 @@ const format3 = "YYYY-MM-DD HH:mm:ss";
const dateInputPlaceholder = "选择日期"; const dateInputPlaceholder = "选择日期";
const dateInputPlaceholder2 = "选择年月"; const dateInputPlaceholder2 = "选择年月";
class Demo15 extends React.Component { class Demo14 extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -41,7 +41,7 @@ class Demo15 extends React.Component {
address: "96, 77, 89", address: "96, 77, 89",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-15 15:24:48" TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "1", key: "1",
@ -50,7 +50,7 @@ class Demo15 extends React.Component {
address: "90, 70, 80", address: "90, 70, 80",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-15 15:24:48" TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "2", key: "2",
@ -59,7 +59,7 @@ class Demo15 extends React.Component {
address: "80, 60, 80", address: "80, 60, 80",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-15 15:24:48" TimePicker: "2017-09-14 14:24:48"
}, },
{ {
key: "3", key: "3",
@ -68,7 +68,7 @@ class Demo15 extends React.Component {
address: "120, 60, 90", address: "120, 60, 90",
datepicker: "2017-06-12", datepicker: "2017-06-12",
MonthPicker: "2017-02", MonthPicker: "2017-02",
TimePicker: "2017-09-15 15:24:48" TimePicker: "2017-09-14 14:24:48"
} }
], ],
count: 4 count: 4
@ -255,4 +255,4 @@ class Demo15 extends React.Component {
} }
} }
export default Demo15; export default Demo14;

File diff suppressed because one or more lines are too long

View File

@ -38,7 +38,7 @@ Table拓展功能方法
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- | | ------ | ---------- | -------- | ---- |
| sorter | 排序函数,可以自定义 | Function | 无 | | sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |

View File

@ -18,18 +18,23 @@ let sum = Table => {
currentFooter = () => { currentFooter = () => {
let data_2 = this.props.data; let data_2 = this.props.data;
let columns_sum = clonedeep(this.props.columns); let columns_sum = clonedeep(this.props.columns);
let sumCol_index;
//用一个对象存储合计数据,这里合计对象的属性对应每列字段 //用一个对象存储合计数据,这里合计对象的属性对应每列字段
for (let i = 0; i < columns_sum.length; i++) {
if (columns_sum[i].sumCol) {
sumCol_index = columns_sum[i].dataIndex;
break;
}
}
debugger;
let obj = {}; let obj = {};
obj[sumCol_index] = 0;
if (Array.isArray(data_2)) { if (Array.isArray(data_2)) {
for (let i = 0; i < data_2.length; i++) { for (let i = 0; i < data_2.length; i++) {
for (let item in data_2[i]) { if (typeof data_2[i][sumCol_index] == "number") {
if (typeof obj[item] === "undefined") { obj[sumCol_index] += data_2[i][sumCol_index];
obj[item] = data_2[i][item]; } else {
} else if (typeof data_2[i][item] == "number") { obj[sumCol_index] = "";
obj[item] += data_2[i][item];
} else {
obj[item] = "";
}
} }
} }
} }
@ -37,26 +42,28 @@ let sum = Table => {
obj.showSum = "合计"; obj.showSum = "合计";
obj = [obj]; obj = [obj];
//将设置的和用户传入的合并属性 //将设置的和用户传入的合并属性
// if (columns_sum[0].dataIndex === "checkbox") { // if (columns_sum[0].dataIndex === "checkbox") {
// columns_sum[1] = Object.assign({}, columns_sum[1], columns2); // columns_sum[1] = Object.assign({}, columns_sum[1], columns2);
// } else { // } else {
columns_sum[0] = Object.assign({}, columns_sum[0], columns2); columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
// } // }
//除去列为特殊渲染的避免像a标签这种html代码写入到合计中 //除去列为特殊渲染的避免像a标签这种html代码写入到合计中
columns_sum.map((item, index) => { columns_sum.map((item, index) => {
if (typeof item.render == "function") { if (typeof item.render == "function") {
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 return (
columns={this.props.columns} <Table
data={this.props.data} columns={this.props.columns}
footer={this.currentFooter} data={this.props.data}
/>; footer={this.currentFooter}
/>
);
} }
}; };
}; };