0

clipboard.png
如图,首次渲染数据是点击左侧单选按钮根据后台返回的值设置右侧多选框chechbox的默认值
后边的操作是 点击右侧的全选按钮,查看和编辑下边的多选框也对应联动 这是一个树结构列表
我看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: '查看权限',
        key: 'AUTHORITY_CHECK',
        dataIndex: 'AUTHORITY_CHECK',
        render: (text, record) => (<Checkbox onChange={this.handleCheckbox} checked={record.AUTHORITY_CHECK} value={record.ID} />),
      },
      {
        title: '编辑权限',
        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);
    
    ......
  }

1个回答

1

在行中的每个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: '查看权限',
        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: '编辑权限',
        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});
}

撰写答案

Planets