鼠年全馬鐵人挑戰 - Array Example

exampleArray2.js

// 這是一個 DataTable 的表格，最左邊欄位會有 checkboxes，可以讓 User 複選。
export const tableSelectRow = (selectedEDILogIdList) => ({
  mode: 'checkbox',
  selectionHeaderRenderer: renderSelectionHeader,
  selectionRenderer: renderSelection,
  style: { backgroundColor: '#c8e6c9' },
  onSelect: (row, isSelect) => {
    if (isSelect) {
      // 這裡使用到 array 的 push 語法，意思是點選到該 row 時，把該 row 的 id，放到該陣列末端。
      selectedEDILogIdList.current.push(row.id) 
    } else {
      _.remove(selectedEDILogIdList.current, id => id === row.id)
    }
  },
  onSelectAll: (isSelect, rows) => {
    if (isSelect) {
      // 這裡用到 array 的 map 語法，意思是按下選擇該分頁的全部 row 時，nextList 會存取該分頁的全部 id。
      const nextList = rows.map(row => (row.id))
      // 這裡用到 array 的 concat 語法，意思是把其他分頁所得到的 id，跟現有的全部合併為一起。
      selectedEDILogIdList.current = _.uniq(selectedEDILogIdList.current.concat(nextList))
    } else {
      // 這裡用到 array 的 filter 語法，意思是當獲取了該分頁 row 全部的 id 之後，接著我又取消了，這時應該只會剩下其他分頁的 id。
      // 使用到 filter 來過濾且使用 includes 來判斷兩個陣列的差異。
      selectedEDILogIdList.current = selectedEDILogIdList.current.filter((item) => {
        const nextList = rows.map(row => (row.id))
        return !nextList.includes(item)
      })
    }
  },
})