bee-table/demo/demolist/Demo12.js

/**
*
* @title 全选功能
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
*
*/


import React, { Component } from 'react';
import Table from '../../src';
import Checkbox from "bee-checkbox";

const columns12 = [
  {
    title: "名字",
    dataIndex: "a",
    key: "a",
    width: 100
  },
  {
    title: "性别",
    dataIndex: "b",
    key: "b",
    width: 100
  },
  {
    title: "年龄",
    dataIndex: "c",
    key: "c",
    width: 200,
    sorter: (a, b) => a.c - b.c
  },
  {
    title: "武功级别",
    dataIndex: "d",
    key: "d"
  }
];

const data12 = [
  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];

const defaultProps12 = {
  prefixCls: "bee-table",
  multiSelect: {
    type: "checkbox",
    param: "key"
  }
};
class Demo12 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedAll:false,
      checkedArray: [
        false,
        false,
        false,
      ],
      data: data12
    };
  }
  onAllCheckChange = () => {
    let self = this;
    let checkedArray = [];
    let listData = self.state.data.concat();
    let selIds = [];
    // let id = self.props.multiSelect.param;
    for (var i = 0; i < self.state.checkedArray.length; i++) {
      checkedArray[i] = !self.state.checkedAll;
    }
    // if (self.state.checkedAll) {
    //   selIds = [];
    // } else {
    //   for (var i = 0; i < listData.length; i++) {
    //     selIds[i] = listData[i][id];
    //   }
    // }
    self.setState({
      checkedAll: !self.state.checkedAll,
      checkedArray: checkedArray,
      // selIds: selIds
    });
    // self.props.onSelIds(selIds);
  };
  onCheckboxChange = (text, record, index) => {
    let self = this;
    let allFlag = false;
    // let selIds = self.state.selIds;
    // let id = self.props.postId;
    let checkedArray = self.state.checkedArray.concat();
    // if (self.state.checkedArray[index]) {
      // selIds.remove(record[id]);
    // } else {
      // selIds.push(record[id]);
    // }
    checkedArray[index] = !self.state.checkedArray[index];
    for (var i = 0; i < self.state.checkedArray.length; i++) {
      if (!checkedArray[i]) {
        allFlag = false;
        break;
      } else {
        allFlag = true;
      }
    }
    self.setState({
      checkedAll: allFlag,
      checkedArray: checkedArray,
      // selIds: selIds
    });
    // self.props.onSelIds(selIds);
  };
  renderColumnsMultiSelect(columns) {
    const { data,checkedArray } = this.state;
    const { multiSelect } = this.props;
    let select_column = {};
    let indeterminate_bool = false;
    // let indeterminate_bool1 = true;
    if (multiSelect && multiSelect.type === "checkbox") {
      let i = checkedArray.length;
      while(i--){
          if(checkedArray[i]){
            indeterminate_bool = true;
            break;
          }
      }
      let defaultColumns = [
        {
          title: (
            <Checkbox
              className="table-checkbox"
              checked={this.state.checkedAll}
              indeterminate={indeterminate_bool&&!this.state.checkedAll}
              onChange={this.onAllCheckChange}
            />
          ),
          key: "checkbox",
          dataIndex: "checkbox",
          width: "5%",
          render: (text, record, index) => {
            return (
              <Checkbox
                className="table-checkbox"
                checked={this.state.checkedArray[index]}
                onChange={this.onCheckboxChange.bind(this, text, record, index)}
              />
            );
          }
        }
      ];
      columns = defaultColumns.concat(columns);
    }
    return columns;
  }
  render() {
    let columns = this.renderColumnsMultiSelect(columns12);
    return <Table columns={columns} data={data12} />;
  }
}
Demo12.defaultProps = defaultProps12;

export default Demo12;