Merge pull request #405 from XiaoMi/hotfix/tableMemBug

Hotfix/table mem bug

components/table/body.js

@@ -32,9 +32,58 @@ let defaultRender = (text, record, index) => {
   return text
 }
 
+class Row extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      picked: false
+    }
+  }
+
+  render () {
+    const {
+      selectedRowKeys,
+      expand,
+      k,
+      parent,
+      highlightRows
+    } = this.props
+    let classNames = {
+      'table-row': true,
+      picked: selectedRowKeys.includes(k) || highlightRows.includes(k),
+      expand,
+      test: 't'
+    }
+
+    return (
+      <tr key={k} onDoubleClick={(e) => {
+        if (!k.toString()) {
+          return
+        }
+        if (highlightRows.includes(k)) {
+          highlightRows.splice(highlightRows.indexOf(k), 1)
+        } else {
+          highlightRows.push(k)
+        }
+        parent.setState({
+          highlightRows
+        })
+      }} className={prifix(classNames)}>{this.props.children}</tr>
+    )
+  }
+}
+
 export default class Body extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      pickedRows: []
+    }
+  }
+
   render () {
-    let {columns, dataSource, cbs: {addExpand}, rowSelection = { }, highlightCols} = this.props
+    let {columns, dataSource, cbs: {addExpand}, rowSelection = { }, highlightCols, advance, ...rest} = this.props
+    columns = columns.filter(item => !item.hide)
     let selectedRowKeys = rowSelection.selectedRowKeys || []
     // 表头分组
     let i = 0
@@ -62,7 +111,7 @@ export default class Body extends Component {
           // 点击后会展开的那个图标
           if (obj.type === 'expand') {
             // {/*<div key={'td-' + k + '-' + j} onClick={(e) => addExpand(e, obj)} data-index={k} data-open={false}> > </div>*/}
-            td = <Expand addExpand={addExpand} data-index={k} data-open={false} colItem={obj} index={k} rowItem={item} />
+            td = <Expand key={k} addExpand={addExpand} data-index={k} data-open={false} colItem={obj} index={k} rowItem={item} />
           } else {
             obj.render = obj.render || defaultRender
             td = obj.render(item[obj.dataIndex], item, i)
@@ -94,14 +143,31 @@ export default class Body extends Component {
         i++
         // 动态插入的组件不累加
       }
-      return <tr className={prifix('table-row', selectedRowKeys.includes(item.key) ? 'picked' : null, item.expand ? 'expanded' : null)} key={item.key || 'tr-' + k} >{tr}</tr>
+      return <Row selectedRowKeys={selectedRowKeys} k={item.key || k} expand={item.expand} key={item.key || 'tr-' + k} {...rest}>{tr}</Row>
     })
 
     return (
       <tbody className={prifix('table-tbody')}>
+        {advance && advance.prefix && this.getPrefixNodes()}
         {nodes}
         <Footer className={'table-footer'} {...this.props} />
       </tbody>
     )
   }
+
+  getPrefixNodes () {
+    const {
+      columns,
+      advance
+    } = this.props
+    return advance.prefix.map((suf, index) => {
+      return (
+        <tr className={prifix('table-row')} key={`suf-${index}`}>{
+          columns.map((item, j) => {
+            return <td className={prifix('table-col')} key={`suf-${item.dataIndex}-${index}-${j}`}>{suf[item.dataIndex]}</td>
+          })
+        }</tr>
+      )
+    })
+  }
 }

components/table/footer.js

@@ -1,57 +1,106 @@
 import React, { Component } from 'react'
+import prifix from './prefix'
+import { Decimal } from 'decimal.js'
 
 class Footer extends Component {
   getSum (item) {
     const {
-      dataSource
+      dataSource = [],
+      advance: {
+        suffix = [],
+        prefix = []
+      }
     } = this.props
-    return dataSource.length > 0 ? dataSource.map(dataItem => dataItem[item.dataIndex]).reduce((pre, next) => pre + next) : 0
+    let res = [
+      ...prefix,
+      ...dataSource,
+      ...suffix
+    ].map(data => data[item.dataIndex])
+
+    let total = new Decimal(0)
+    res.forEach((item, index) => {
+      total = total.plus(new Decimal(item))
+    })
+    return total.valueOf()
   }
 
   getSumNodes () {
     const {
       columns
     } = this.props
     const tds = columns.map((item, index) => {
+      let key = 'sum-' + index
       if (item.type === 'number') {
         return (
-          <td>
+          <td className={prifix('table-col')} key={key}>
             {this.getSum(item)}
           </td>
         )
       }
       if (index === 0) {
         return (
-          <td>合计</td>
+          <td key='sum-name'>合计</td>
         )
       }
-      return <td />
+      return <td className={prifix('table-col')} key={key} />
     })
-    return <tr>{tds}</tr>
+    return <tr className={prifix('table-row')} key='sum-nodes'>{tds}</tr>
+  }
+
+  getAveNum (item) {
+    const {
+      dataSource = [],
+      advance: {
+        suffix = [],
+        prefix = []
+      }
+    } = this.props
+    let data = [
+      ...prefix,
+      ...dataSource,
+      ...suffix
+    ]
+    return new Decimal(this.getSum(item)).dividedBy(data.length).toFixed(2).valueOf() * 1
   }
+
   getAveNodes () {
     const {
-      columns,
-      dataSource
+      columns
     } = this.props
     const tds = columns.map((item, index) => {
+      let key = 'ave-' + index
       if (item.type === 'number') {
-        let num = this.getSum(item) / dataSource.length
-
         return (
-          <td>
-            {Math.round(num * 100) / 100}
+          <td key={key}>
+            {this.getAveNum(item)}
           </td>
         )
       }
       if (index === 0) {
         return (
-          <td>均值</td>
+          <td className={prifix('table-col')} key={key}>均值</td>
         )
       }
-      return <td />
+      return <td className={prifix('table-col')} key={key} />
+    })
+    return <tr className={prifix('table-row')} key='ave-nodes'>{tds}</tr>
+  }
+  getSuffixNodes () {
+    const {
+      columns,
+      advance
+    } = this.props
+
+    return advance.suffix.map((suf, index) => {
+      let key = 'suf-' + index
+      return (
+        <tr className={prifix('table-row')} key={key}>{
+          columns.map((item, j) => {
+            return <td className={prifix('table-col')} key={`${key}-${item.dataIndex}-${index}-${j}`}>{suf[item.dataIndex]}</td>
+          })
+        }</tr>
+      )
     })
-    return <tr>{tds}</tr>
   }
 
   render () {
@@ -62,6 +111,7 @@ class Footer extends Component {
 
     return (
       <React.Fragment >
+        {advance && advance.suffix && this.getSuffixNodes()}
         {dataSource.length > 0 && advance && advance.sum && this.getSumNodes()}
         {dataSource.length > 0 && advance && advance.avg && this.getAveNodes()}
       </React.Fragment>

components/table/header.js

@@ -16,17 +16,15 @@ class Sorter extends Component {
   }
 
   sortDsec = () => {
-    if (!this.reversed) {
-      let {index, columns, name, kname} = this.props
-      let sorter = columns[index].sorter
-      let {cbs: {resetData}, dataSource} = this.props
+    let {index, columns, name, kname} = this.props
+    let sorter = columns[index].sorter
+    let {cbs: {resetData}, dataSource} = this.props
 
-      dataSource.sort(sorter)
-      dataSource.reverse()
-      resetData(dataSource)
-      this.reversed = true
-      window.localStorage.setItem(name + '-sorter', [kname, 1])
-    }
+    dataSource.sort(sorter)
+    dataSource.reverse()
+    resetData(dataSource)
+    this.reversed = true
+    window.localStorage.setItem(name + '-sorter', [kname, 1])
   }
 
   render () {
@@ -104,6 +102,7 @@ export default class Header extends Component {
     if (headerColumns && headerColumns.length > 1) {
       nodes = headerColumns.map((columns, k) => {
         let tr = []
+        columns = columns.filter(item => !item.hide)
         for (let i = 0; i < columns.length; i++) {
           tr.push(<GroupCell {...this.props} item={columns[i]} index={i} contextMenu={this.contextMenu} key={columns[i].key} />)
         }