如何实现将选中CSV文件之后的所有CSV文件推入csv_files数组？

我的网页会返回如下文件列表：

date.pdf
names.csv
address.pdf
age.csv
cost.csv
budget.csv
data.pdf
race.pdf
contractors.csv

需求：

• 当用户勾选budget.csv时，将从该文件位置开始的所有.csv文件推入csv_files[]数组；
• 当用户勾选names.csv时，将包含names.csv在内及其之后的所有.csv文件推入数组；
• 核心逻辑：仅将选中的.csv文件及之后所有符合条件的文件加入数组。

现有代码片段：

const csv_files = []

$scope.listAllobjects = (err, data) => {
    $.each(data.Contents, (index, value) => {
      if (value.Key.endsWith("csv")) {
        csv_files = [];
      }
    });
}

// Handle click on selection checkbox
$("#filesobjects-table tbody").on("click", 'input[type="checkbox"]', (e1) => {
    const checkbox = e1.currentTarget;
    const $row = $(checkbox).closest("tr");
    const data = $tb.DataTable().row($row).data();
    let index = -1;

    // Prevent click event from propagating to parent
    e1.stopPropagation();

    // Find matching key in currently checked rows
    index = $scope.view.keys_selected.findIndex((e2) => e2.Key === data.Key);

    if (checkbox.checked && data.Key.endsWith("csv")) {
     console.log(selected csv)
    }
});

要实现这个需求，关键是保存完整的文件顺序，并在勾选时定位选中文件的位置，筛选出该位置之后的所有.csv文件。

步骤1：保存完整文件列表 #

首先在listAllobjects方法中，把所有文件按返回顺序保存下来，方便后续定位：

// 新增变量保存完整文件列表，保持原顺序
let allFiles = [];

$scope.listAllobjects = (err, data) => {
    // 清空数组避免残留数据
    csv_files.length = 0;
    allFiles = [];
    
    // 遍历所有文件，保存每个文件的Key
    $.each(data.Contents, (index, value) => {
        allFiles.push(value.Key);
    });
}

步骤2：修改勾选事件逻辑 #

在复选框点击事件中，找到选中文件在完整列表中的位置，从该位置开始筛选所有.csv文件：

$("#filesobjects-table tbody").on("click", 'input[type="checkbox"]', (e1) => {
    const checkbox = e1.currentTarget;
    const $row = $(checkbox).closest("tr");
    const data = $tb.DataTable().row($row).data();
    const selectedKey = data.Key;

    e1.stopPropagation();

    if (checkbox.checked && selectedKey.endsWith("csv")) {
        // 清空数组，确保每次勾选都是最新结果
        csv_files.length = 0;
        
        // 找到选中文件在完整列表中的起始索引
        const startIndex = allFiles.indexOf(selectedKey);
        
        // 从起始索引开始遍历，收集所有.csv文件
        for (let i = startIndex; i < allFiles.length; i++) {
            const file = allFiles[i];
            if (file.endsWith("csv")) {
                csv_files.push(file);
            }
        }
        
        console.log("收集到的CSV文件:", csv_files);
    } else if (!checkbox.checked) {
        // 取消勾选时清空数组，可根据需求调整逻辑
        csv_files.length = 0;
    }
});

关键说明 #

• allFiles严格保留服务器返回的文件顺序，保证定位选中文件的位置准确；
• 使用indexOf快速找到选中文件的起始点，后续遍历仅筛选.csv格式文件；
• 每次勾选前清空csv_files，避免重复添加旧数据；
• 取消勾选的逻辑可根据实际需求调整，比如保留其他勾选的结果（如果允许多选）。

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