antd 表格checkbox全選

如圖，首次渲染數(shù)據(jù)是點擊左側(cè)單選按鈕根據(jù)后臺返回的值設(shè)置右側(cè)多選框chechbox的默認值
后邊的操作是點擊右側(cè)的全選按鈕，查看和編輯下邊的多選框也對應(yīng)聯(lián)動這是一個樹結(jié)構(gòu)列表
我看antd上邊只有列全選，沒有行全選而我這個多選框是一行一行render出來的
這個要怎么處理

const columnsMenu = [
      {
        title: '菜單',
        key: 'NAME',
        dataIndex: 'NAME',
      },
      {
        title: '全部',
        key: 'AUTHORITY_ALL',
        dataIndex: 'AUTHORITY_ALL',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_ALL} value={record.ID} />),
      },
      {
        title: '查看權(quán)限',
        key: 'AUTHORITY_CHECK',
        dataIndex: 'AUTHORITY_CHECK',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_CHECK} value={record.ID} />),
      },
      {
        title: '編輯權(quán)限',
        key: 'AUTHORITY_EDIT',
        dataIndex: 'AUTHORITY_EDIT',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_EDIT} value={record.ID} />),
      },
    ];

  handleCheckbox=(e) => {
    console.log(`checked = ${e.target.checked}`, e.target.value);
    
    ......
  }

回答

編輯回答

夢一場

在行中的每個check都要記錄在dataSource中。

columus

const columnsMenu = [
      {
        title: '菜單',
        key: 'NAME',
        dataIndex: 'NAME',
      },
      {
        title: '全部',
        key: 'AUTHORITY_ALL',
        dataIndex: 'AUTHORITY_ALL',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_ALL', record.ID)} checked={record.AUTHORITY_ALL} value={record.ID} />),
      },
      {
        title: '查看權(quán)限',
        key: 'AUTHORITY_CHECK',
        dataIndex: 'AUTHORITY_CHECK',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_CHECK', record.ID)} checked={record.AUTHORITY_CHECK} value={record.ID} />),
      },
      {
        title: '編輯權(quán)限',
        key: 'AUTHORITY_EDIT',
        dataIndex: 'AUTHORITY_EDIT',
        render: (text, record) => (<Checkbox onChange={(e) => this.handleCheckbox(e.target.checked, 'AUTHORITY_EDIT', record.ID)} checked={record.AUTHORITY_EDIT} value={record.ID} />),
      },
    ];

handleCheckbox

handleCheckbox(checked, type, id) {
    let {dataSource} = this.props;
    dataSource = dataSource.map(data => {
        if(data.ID === id) {
            data[type] = checked;
            if(type === 'AUTHORITY_ALL') {
                data['AUTHORITY_EDIT'] = checked;
                data['AUTHORITY_CHECK'] = checked;
            } else {
                data['AUTHORITY_ALL'] = data['AUTHORITY_EDIT'] && data['AUTHORITY_CHECK'];
            }
        }
        return data;
    });
    
    dispatch({type: 'xxxx', dataSource});
}

2017年9月29日 05:28