javascript - 如何对带有复选框的表格进行排序

Question

我有一个问题，我正在尝试对包含一些数据和复选框的表格进行排序。排序适用于数据，但不适用于复选框。

这是我尝试过的：这是一种按序列号排序的方法

sortBySerial(key) {
let sorted = [...this.state.jobRequestArray]
const asc = this.state.serialNumberOrder === 'asc';

this.setState({
  sortTable: true,
  showArrowSerialNumber: true,
  showArrowDetail: false,
  showArrowStatus: false,
  showArrowStatusDate: false
})
sorted.sort((a, b) => {
  if (a[key] < b[key]) {
    this.switch();

    return asc ? -1 : 1;
  } else if (a[key] > b[key]) {

    this.switch();

    return asc ? 1 : -1;
  } else {

    return 0;
  }

});
if (asc) {
  this.setState({
    showArrowSerialNumberAsc: true,
    serialNumberOrder: 'desc'
  })
} else {
  this.setState({
    showArrowSerialNumberAsc: false,
    serialNumberOrder: 'asc'
  })
}
this.setState({
  jobRequestArray: sorted
})}

这是方法 switch() ，对于该方法，我要做的是在对表进行排序时，与 requestReworkArray 中的内容（从复选框检查值）和复选框值进行比较。

例如，如果我单击值为 1 的复选框，并且未选中另一个值为 2 的复选框，那么当我排序时。此方法将再次进行比较并在良好位置进行选中和未选中，但似乎不起作用。

switch() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
this.state.requestReworkArray.map((currentRequest) => {

 if (!checkboxes[0].checked && this.state.sortTable) {
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].name !== "print") {
        if (checkboxes[i].value !== currentRequest) {
         
        checkboxes[i].checked = false
        } else {  
      
          checkboxes[i].checked = true
        }

      }
    }
  }

});}

这是我的桌子：

<tr key={index} >

                <td><input type="checkbox"
                  name={index}
                  id={index}
                  key={index}
                  defaultChecked={currentJobs.status === "ERROR" ? this.checkStatusError(currentJobs.serialNumber, index) : false}
                  onClick={this.addingItem}
                  value={currentJobs?.serialNumber}

                ></input><span className="ml-4">{currentJobs?.serialNumber}</span></td>
                <td>{currentJobs.status === "CREATED" ? t('Status.1') : currentJobs.status === "IN_PRODUCTION" ? t('Status.2') :
                  currentJobs.status === "ERROR" ? t('Status.8') : currentJobs.status === "PRODUCED" ? t('Status.4') :
                    currentJobs.status === "CLOSED" ? t('Status.5') : currentJobs.status === "CANCELLED" ? t('Status.10') : null}</td>
                <td>{moment(currentJobs?.statusDate).format("YYYY-MM-DD HH:mm:ss")}</td>
                <td>{currentJobs?.detail}</td>
              </tr>

我希望我足够清楚，并提前感谢您的帮助！

标签： javascriptreactjsbootstrap-4