快捷導(dǎo)航

react antd checkbox實(shí)現(xiàn)全選、多選功能

更新時(shí)間：2024年07月11日 10:28:43 作者：a堅(jiān)強(qiáng)的泡沫

目前好像只有table組件有實(shí)現(xiàn)表格數(shù)據(jù)的全選功能,如果說對(duì)于list,card,collapse等其他組件來說,需要自己結(jié)合checkbox來手動(dòng)實(shí)現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實(shí)現(xiàn)全選、多選功能,需要的朋友可以參考下

背景

目前好像只有table組件有實(shí)現(xiàn)表格數(shù)據(jù)的全選功能，如果說對(duì)于list，card，collapse等其他組件來說，需要自己結(jié)合checkbox來手動(dòng)實(shí)現(xiàn)全選功能。

Checkbox.Group有實(shí)現(xiàn)全選功能，但是對(duì)于需要遍歷出來的數(shù)據(jù)（接口動(dòng)態(tài)返回），這種方式不太可行。

方案

考慮都使用checkbox組件來實(shí)現(xiàn)，同時(shí)增加狀態(tài)管理。

1、增加一個(gè)【全選】checkbox，同時(shí)遍歷每一行數(shù)據(jù)的時(shí)候，為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、增加需要的狀態(tài)

  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); // 勾選的每一行數(shù)據(jù)的id集合
  const [indeterminate, setIndeterminate] = useState(false); // 【全選】checkbox
  const [checkAll, setCheckAll] = useState(false); // 【全選】checkbox

3、當(dāng)點(diǎn)擊【全選】checkbox的時(shí)候

全部勾選：把當(dāng)前頁的item.id和已有的selectedRowKeys一起存起來，注意id去重
取消全部勾選：setSelectedRowKeys([])
同時(shí)改變checkAll的狀態(tài)

  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、當(dāng)點(diǎn)擊【每一行數(shù)據(jù)的checkbox】的時(shí)候

首選需要判斷該行數(shù)據(jù)是否已經(jīng)被勾選上：const isChecked = selectedRowKeys?.includes(item.task_record_id);
如果已經(jīng)被勾選上了，說明需要取消勾選，則從selectedRowKeys去除掉該id；否則，為selectedRowKeys添加上該id。
考慮分頁的時(shí)候，selectedRowKeys需要存放上一頁已勾選的id 和當(dāng)前頁已勾選的id
然后再用當(dāng)前頁已勾選的id列表去判斷 checkAll 和 indeterminate【全選checkbox】的狀態(tài)值

// 獲取當(dāng)前頁已勾選的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;
};
// 點(diǎn)擊每一項(xiàng)數(shù)據(jù)前面checkbox時(shí)
const handleClickItemCheckbox = (isChecked: boolean, taskRecordId: number) => {
  let keys;
  if (isChecked) {
    keys = selectedRowKeys.filter((id) => id !== taskRecordId);
  } else {
    keys = [...selectedRowKeys, taskRecordId];
  }
  setSelectedRowKeys(keys);
  // 更新全選checkbox的狀態(tài)值
  const current = getCurrentCheckedList(keys, caseList);
  setCheckAll(current?.length === limit); // limit表示每一頁展示的數(shù)量，checkAll是否為true也只是針對(duì)當(dāng)前頁來說
  setIndeterminate(!!current.length && current.length < limit);
};

另外，在進(jìn)行翻頁請(qǐng)求數(shù)據(jù)的時(shí)候，需要對(duì)當(dāng)前頁的checkAll狀態(tài)值進(jìn)行判斷，并初始化

        // 當(dāng)翻頁時(shí)，初始化【全選】選項(xiàng)
        const currentPageCheckedList = getCurrentCheckedList(selectedRowKeys, resp_list); // resp_list表示接口返回的數(shù)據(jù)
        setCheckAll(currentPageCheckedList?.length === limit);
        setIndeterminate(!!currentPageCheckedList.length && currentPageCheckedList.length < limit);

效果圖：

參考文檔：antd CheckBox實(shí)現(xiàn)全選、多選，antd checkbox全選

到此這篇關(guān)于react antd checkbox實(shí)現(xiàn)全選、多選功能的文章就介紹到這了,更多相關(guān)react antd checkbox全選多選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: