React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react antd checkbox全选 多选

react antd checkbox实现全选、多选功能

作者:a堅強的泡沫

目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下

背景

目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能。

Checkbox.Group有实现全选功能,但是对于需要遍历出来的数据(接口动态返回),这种方式不太可行。

方案

考虑都使用checkbox组件来实现,同时增加状态管理。

1、增加一个【全选】checkbox,同时遍历每一行数据的时候,为Panel组件的header属性添加checkbox选择框。

<Checkbox
  indeterminate={indeterminate}
  checked={checkAll}
  onChange={handleClickAllCheckbox}
>
  全选
</Checkbox>
const renderPanelItem = () => {
  return caseList?.map((item: CaseItem) => {
    const key = item.replay_id;
    const isChecked = selectedRowKeys?.includes(item.task_record_id); // 判断是否勾选
    return (
      <Panel
        header={
          <>
            <Checkbox
              style={{ marginRight: 5 }}
              onChange={(e) => {
                e.stopPropagation();
                handleClickItemCheckbox(isChecked, item.task_record_id);
              }}
              checked={isChecked} // 视图
            />
            <CloseCircleTwoTone twoToneColor="#f5222d" style={{ marginRight: 5 }} />
            <span>{item.task_case_name}</span>
          </>
        }
        key={key}
        extra={renderPanelExtra(item)}
      >
      // ...
      </Panel>
    );
  });
};

2、增加需要的状态

  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); // 勾选的每一行数据的id集合
  const [indeterminate, setIndeterminate] = useState(false); // 【全选】checkbox
  const [checkAll, setCheckAll] = useState(false); // 【全选】checkbox

3、当点击【全选】checkbox的时候

  const handleClickAllCheckbox = () => {
    if (!checkAll) {
      setSelectedRowKeys(
        Array.from(new Set([...selectedRowKeys, ...(caseList?.map((item: CaseItem) => item.task_record_id) || [])])),
      );
    } else {
      setSelectedRowKeys([]);
    }
    setCheckAll(!checkAll);
    setIndeterminate(false); // 全选/全不选的indeterminate为false,部分选上才为true
  };

4、当点击【每一行数据的checkbox】的时候

// 获取当前页已勾选的keys
const getCurrentCheckedList = (allKeys: number[], allData: CaseItem[]) => {
  const current: number[] = [];
  allKeys?.forEach((checkedId) => {
    allData?.forEach((c: CaseItem) => {
      if (c.task_record_id === checkedId) {
        current.push(checkedId);
      }
    });
  });
  return current;
};
// 点击每一项数据前面checkbox时
const handleClickItemCheckbox = (isChecked: boolean, taskRecordId: number) => {
  let keys;
  if (isChecked) {
    keys = selectedRowKeys.filter((id) => id !== taskRecordId);
  } else {
    keys = [...selectedRowKeys, taskRecordId];
  }
  setSelectedRowKeys(keys);
  // 更新全选checkbox的状态值
  const current = getCurrentCheckedList(keys, caseList);
  setCheckAll(current?.length === limit); // limit表示每一页展示的数量,checkAll是否为true也只是针对当前页来说
  setIndeterminate(!!current.length && current.length < limit);
};

另外,在进行翻页请求数据的时候,需要对当前页的checkAll状态值进行判断,并初始化

        // 当翻页时,初始化【全选】选项
        const currentPageCheckedList = getCurrentCheckedList(selectedRowKeys, resp_list); // resp_list表示接口返回的数据
        setCheckAll(currentPageCheckedList?.length === limit);
        setIndeterminate(!!currentPageCheckedList.length && currentPageCheckedList.length < limit);

效果图:

参考文档:antd CheckBox实现全选、多选antd checkbox全选

到此这篇关于react antd checkbox实现全选、多选功能的文章就介绍到这了,更多相关react antd checkbox全选 多选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文