JavaScript条件生成对象逻辑问题：新手求助实现修改记录输出

需求目标 #

• 选中新项时，输出包含该id且enable为true的记录；
• 同时存在新增选中项和取消选中项时，输出包含所有对应id及对应enable状态的完整修改记录。

当前问题 #

现有代码仅能捕获新增选中的项并设置enable: true，无法捕获取消选中的项，也无法正确统计修改记录总数（length字段）、输出取消项的enable: false状态。

现有代码 #

<script>
  var old_data = []; // Define a variable to store previously selected data

  function modalTable() {
    console.log("TABLE MODAL");
    const getToken = localStorage.getItem("token");
    var new_edit_data = {
      draw: 1,
      length: 0,
      server: "argp",
      data: []
    };

    var tablefor4 = $("#example_04").DataTable({
      ajax: {
        url: "http://192.168.03.30:6000/api/message/all", // Fake API
        headers: {
          'Authorization': 'Bearer ' + getToken
        },
        dataSrc: function (response) {
          console.log("DATA MODAL TABLE", response.data);
          return response.data;
        },
      },
      destroy: true,
      columns: [
        { data: "sf", title: "sf" },
        { data: "code", title: "code" },
        { data: "subcode", title: "subcode" },
        { data: "msgtext", title: "msgtext" }, 
        { data: "description", title: "description" },    
        {
          data: null,
          title: "Alarm/Event Setting",
          render: function (data, type, row) {
            var switchId = 'customSwitch_' + row.id; // Assuming you have an 'id' field in your data
            var switchHTML = '<div class="custom-control custom-switch">';
            var isChecked = row.argp ? 'checked' : ''; // Check if rowData.argp is true and add the checked attribute if so
            switchHTML += '<input type="checkbox" class="custom-control-input" id="' + switchId + '" ' + isChecked + '>';
            switchHTML += '<label class="custom-control-label" for="' + switchId + '">Selected</label>';
            switchHTML += '</div>';
            return switchHTML;
          },
          createdCell: function (td, cellData, rowData, row, col) {
          var switchId = 'customSwitch_' + rowData.id; // Assuming you have an 'id' field in your data
          var switchElement = $(td).find('#' + switchId);
          var previousArgpValue = rowData.argp; // Store the previous argp value
          switchElement.change(function () {
            if ($(this).is(':checked')) {
              rowData.argp = true;
            } else {
              rowData.argp = false;
            }
            var selectedRows = tablefor4.rows({ selected: true }).data();
            var newSelectedData = selectedRows.filter(function(row) {
              return row.argp === true && !old_data.some(function(prevRow) {
                return prevRow.id === row.id;
              });
            }).map(function(row) {
              return { id: row.id, enable: true };
            });
            old_data = selectedRows.toArray(); // Update previously selected data
            new_edit_data.data = new_edit_data.data.concat(newSelectedData); // Combine newly selected data
            new_edit_data.length = new_edit_data.data.filter(function(row) {
              return row.enable === true;
            }).length;

            // If previously selected data was modified in the new selection, revert the argp value
            if (!old_data.some(function(prevRow) {
              return prevRow.id === rowData.id && prevRow.enable === previousArgpValue;
            })) {
              rowData.argp = previousArgpValue;
            }

            console.log("Selected Rows (new):", new_edit_data);
            console.log("old_data:", old_data);
          });
        }


        },
      ]
    });

    tablefor4.draw();
  }
</script>

解决方案 #

核心修改点 #

1. 正确初始化old_data：在数据加载完成后，保存所有行的id和原始选中状态argp，而非仅保存选中行。
2. 对比新旧状态捕获所有变更：每次复选框切换时，对比当前行的新状态与old_data中的旧状态，分别处理选中/取消操作。
3. 修正length计算逻辑：length为所有修改记录的总数，而非仅选中项数量。
4. 移除错误的状态回滚代码：原代码中的回滚逻辑会导致行状态无法正常更新，需删除。

修改后的完整代码 #

<script>
  var old_data = []; // 存储所有行的原始选中状态

  function modalTable() {
    console.log("TABLE MODAL");
    const getToken = localStorage.getItem("token");
    var new_edit_data = {
      draw: 1,
      length: 0,
      server: "argp",
      data: []
    };

    var tablefor4 = $("#example_04").DataTable({
      ajax: {
        url: "http://192.168.03.30:6000/api/message/all", // Fake API
        headers: {
          'Authorization': 'Bearer ' + getToken
        },
        dataSrc: function (response) {
          console.log("DATA MODAL TABLE", response.data);
          // 初始化old_data：保存所有行的id和原始argp状态
          old_data = response.data.map(row => ({ id: row.id, argp: row.argp }));
          return response.data;
        },
      },
      destroy: true,
      columns: [
        { data: "sf", title: "sf" },
        { data: "code", title: "code" },
        { data: "subcode", title: "subcode" },
        { data: "msgtext", title: "msgtext" }, 
        { data: "description", title: "description" },    
        {
          data: null,
          title: "Alarm/Event Setting",
          render: function (data, type, row) {
            var switchId = 'customSwitch_' + row.id;
            var isChecked = row.argp ? 'checked' : '';
            return `
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="${switchId}" ${isChecked}>
                <label class="custom-control-label" for="${switchId}">Selected</label>
              </div>
            `;
          },
          createdCell: function (td, cellData, rowData, row, col) {
            var switchId = 'customSwitch_' + rowData.id;
            var switchElement = $(td).find('#' + switchId);
            
            switchElement.change(function () {
              // 更新当前行的argp状态
              const newArgp = $(this).is(':checked');
              rowData.argp = newArgp;

              // 找到当前行在old_data中的记录
              const oldRow = old_data.find(item => item.id === rowData.id);
              if (!oldRow) return;

              // 对比新旧状态，生成修改记录
              let changeRecord = null;
              if (newArgp && !oldRow.argp) {
                // 从未选中变为选中
                changeRecord = { id: rowData.id, enable: true };
              } else if (!newArgp && oldRow.argp) {
                // 从选中变为未选中
                changeRecord = { id: rowData.id, enable: false };
              }

              // 如果有变更记录，添加到new_edit_data
              if (changeRecord) {
                // 先移除该id已有的修改记录（避免重复）
                new_edit_data.data = new_edit_data.data.filter(item => item.id !== rowData.id);
                new_edit_data.data.push(changeRecord);
                // 更新length为修改记录的总数
                new_edit_data.length = new_edit_data.data.length;
              }

              // 更新old_data中的状态
              oldRow.argp = newArgp;

              console.log("完整修改记录:", new_edit_data);
              console.log("更新后的状态记录:", old_data);
            });
          }
        },
      ]
    });

    tablefor4.draw();
  }
</script>

验证场景 #

1. 选中新项：new_edit_data.data会新增一条{id: xxx, enable: true}的记录，length为1；
2. 取消已有选中项：new_edit_data.data会新增一条{id: xxx, enable: false}的记录，length为1；
3. 混合操作（选中两项+取消一项）：new_edit_data.data包含三条记录（两个enable: true，一个enable: false），length为3。

内容的提问来源于stack exchange，提问作者code_freshgirl