取消选择数据表行后如何正确删除数组中的索引或值？

Posted 2023-03-11

【中文标题】取消选择数据表行后如何正确删除数组中的索引或值？

【英文标题】：How properly remove an index or value in a array after deselect datatables row?

【发布时间】：2018-10-29 19:31:52

【问题描述】：

我正在通过连续选择然后将 Id 附加到隐藏字段中来处理示例 jQuery DataTables。不知何故，一旦我取消选择所选索引或值的行，也必须在隐藏字段的值中删除。但它反复或重复的Id。如何使用 javascript 正确实现删除数组中的项目。

数据：

第 1 行：ID：50 第 2 行：编号：55 第 3 行：ID：60

JS：

var dataTable = null;
var assignedTo = [];

 dataTable = $("#table").DataTable( ... );

        dataTable.off("select").on("select",
            function(e, dt, type, indexes) 
                dataTable.rows('.selected').every(function(rowIndex) 

                    assignedTo.push(dataTable.row(rowIndex).data().Id);

                    $("#AssignedTo").val(JSON.stringify(assignedTo));
                );
            );

        dataTable.off("deselect").on("deselect",
            function(e, dt, type, indexes) 
                dataTable.rows( selected: false ).every(function(rowIndex) 

                    assignedTo.splice(rowIndex, 1);

                    $("#AssignedTo").val(JSON.stringify(assignedTo));
                );
            );

输出：如果我选择第 1 行和第 2 行

值="[50, 55]"

输出：如果我取消选择第 2 行，那么

值="[50]"

输出：如果我取消选择所有行，那么

值="[]"

【问题讨论】：

一个工作代码 sn-p 在这里真的很有帮助 =)

取消选择需要执行相同的选择逻辑。如果取消选择该元素，dataTables.rows('.selected') 将返回所有仍被选中的记录，您可以重建完整的数组。不要尝试从字符串中删除元素。重建它

@Taplar 你是什么意思？

对选择逻辑执行与取消选择逻辑完全相同的操作。

@Taplar 抱歉，它不起作用。它只是像这样附加或乘以 Id，value="[50, 55, 55]"

【参考方案1】：

var dataTable = $("#table").DataTable( ...
);

function rebuildAssignedToValue(e, dt, type, indexes) 
  //make a new result array each time
  var assignedTo = [];
  
  //push all the selected value to the array
  dataTable.rows('.selected').every(function(rowIndex) 
    assignedTo.push(dataTable.row(rowIndex).data().Id);
  );
  
  //update the value once
  $("#AssignedTo").val(JSON.stringify(assignedTo));


//reuse the common method for both events
dataTable.off("select").on("select", rebuildAssignedToValue);
dataTable.off("deselect").on("deselect", rebuildAssignedToValue);