完善高阶组件“"合计"

demo/demolist/Demo16.js

@@ -0,0 +1,76 @@
+/**
+*
+* @title 合计test
+* @description
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+import Sum from "../../src/lib/sum.js";
+
+const columns14 = [
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    heji: true
+  },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    render(data) {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+//合计表头
+// const columns14_ = [
+//   { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+//   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+//   {
+//     title: "年龄",
+//     dataIndex: "c",
+//     key: "c",
+//     width: 200,
+//     heji: true
+//   },
+//   {
+//     title: "操作",
+//     dataIndex: "d",
+//     key: "d"
+//   }
+// ];
+
+const data14 = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" },
+];
+
+//合计数据
+// const data14_ = [
+//   { a: "郭靖", b: "男", c: 25,d:11, key: "3" }
+// ];
+
+class Demo16 extends Component {
+  
+  render() {
+    //使用高阶组件
+    let SumTable  = Sum(Table);
+    return (
+      <SumTable
+        columns={columns14}
+        data={data14}
+        title={"我是表头"}
+      />
+    );
+  }
+}
+
+export default Demo16;

src/lib/sum.js

@@ -1,20 +1,30 @@
 import React from 'react';
 import Table from "../../src";
 
+ //创建新列存放  “合计”  字段
+ let columns2 = {};
+ columns2 = {
+ title: "合计",
+     key: "showSum",
+     dataIndex: "showSum",
+     width: "5%"
+ }
+
 var Sum =  (Table)=>{
     class SumTable extends React.Component{
         //无状态
         constructor(props){
-            super(props);
+            super(props)
         }
 
-        currentData = ()=>{
+        currentTitle = ()=>{
             return <div>{this.props.title}</div>;
         }
 
-        //合计数字列
+        //合计数字列,并将计算所得数据存储到一个obj对象中
-        currentData2 = () =>{
+        currentFooter = () =>{
             let data_2 = this.props.data;
+            //用一个对象存储合计数据，这里合计对象的属性对应每列字段
             let obj ={};
             if(Array.isArray(data_2)){
                 for(let i =0;i<data_2.length;i++){
@@ -33,21 +43,36 @@ var Sum =  (Table)=>{
             }
             //加key
             obj.key = 'sumData';
+            //设置新建列的名称
+            obj.showSum = "合计"
+            obj =[obj];
+            //添加合计行
+            let columns_sum = this.props.columns;
+            //针对多选除去多选框，即第一列，换为新建的列
+            this.props.columns[0].dataIndex == "checkbox"?columns_sum[0] = columns2:columns_sum.unshift(columns2);
+            console.log(columns_sum)
+            //除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
+            columns_sum = columns_sum.map((item,index)=>{
+                if(typeof item.render == "function"){
+                    delete item.render;
+                }
+                return item;
+            })
+            
             return <Table
             showHeader={false}
-            columns={this.props.columns}
+            columns={columns_sum}
-            data={[obj]}
+            data={obj}
             heji={true}
             />
         }
-
         render(){
             return <Table
                 columns={this.props.columns}
                 data={this.props.data}
                 heji={true}
-                title={this.currentData}
+                title={this.currentTitle}
-                footer={this.currentData2}
+                footer={this.currentFooter}
                 /> 
         }
     }