feat: 为合计功能增加列可配置,并且完善文档
This commit is contained in:
parent
6f6abe5303
commit
c9f839b7f2
|
@ -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
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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
|
@ -38,7 +38,7 @@ Table拓展功能方法
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| ------ | ---------- | -------- | ---- |
|
| ------ | ---------- | -------- | ---- |
|
||||||
| sorter | 排序函数,可以自定义 | Function | 无 |
|
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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 if (typeof data_2[i][item] == "number") {
|
|
||||||
obj[item] += data_2[i][item];
|
|
||||||
} else {
|
} else {
|
||||||
obj[item] = "";
|
obj[sumCol_index] = "";
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -45,18 +50,20 @@ let sum = Table => {
|
||||||
//除去列为特殊渲染的,避免像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 (
|
||||||
|
<Table
|
||||||
columns={this.props.columns}
|
columns={this.props.columns}
|
||||||
data={this.props.data}
|
data={this.props.data}
|
||||||
footer={this.currentFooter}
|
footer={this.currentFooter}
|
||||||
/>;
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue