【问题标题】：checkmark not shown when selecting a row progammatically on slickGrid在 slickGrid 上以编程方式选择行时未显示复选标记
【发布时间】：2020-06-30 01:56:11
【问题描述】：

我修改了示例中的 example-checkbox-row-select.html 文件以编程方式选择一行。我添加了一个带有以下代码的按钮：

<button id="clickCheckRow" style="position:relative;height:30px">Click Check Rows</button>

和

$("#clickCheckRow").click(function() {
        let rowIndex = 5;
        selectedRowsIndexes = grid.getSelectedRows();
        selectedRowsIndexes.push(rowIndex); // add row with index 5 to selected rows indexes
        grid.updateRow(rowIndex); // update the row with index 5
        grid.invalidateRow(rowIndex); // tells that row with index 5 has changed
//            grid.invalidateRows();  // this does not work either
        grid.render(); // the invalidated rows should change, but the check mark does not show up
});

当我点击按钮时，行被选中，但复选框没有被选中。

更新：

我仍然需要重复推送到 selectedRowsIndexes

$("#clickCheckRow").click(function() {
      let rowIndex = 5;
      let selectedRowsIndexes = grid.getSelectedRows(); // using let, as suggested
      selectedRowsIndexes.push(rowIndex); // add row index to selected rows
      selectedRowsIndexes.push(rowIndex); // will not work without this duplication
      grid.setSelectedRows(selectedRowsIndexes);
});

【问题讨论】：

我认为你的代码行不通，你必须打电话给setSelectedRows() 来告知这些新选择的网格，仅仅玩数组是不够的，至少我不认为所以
谢谢，我试过了，但只有当我通过复制 selectedRowsIndexes.push(rowIndex) 行来推送新的 rowIndex 两次时它才有效。
我认为您仍在尝试通过指针更改数组，但您不应该这样做，您应该在声明数组时添加const 或let。您不需要使该行无效，至少我从未在我的代码中调用它。您可以尝试使用setTimeout 添加延迟，我不得不在某些情况下使用它，特别是如果您将它与onSelectedRowsChanged 事件组合使用，添加延迟将确保它在该事件之后发生。
我将 let 添加到我的 selectedRowsIndexes 数组中，但我仍然需要推送两次才能使其正常工作。请参阅上面的更新。
我假设您没有尝试setTimeout 延迟，但您应该尝试一下，如果这不起作用，那么我不知道，您在某处做错了什么，但是我看不出来。您应该检查您在setSelectedRows() 中使用的数组是否是正确的输出，也许执行console.log(selectedRowsIndexes.length) 并查看长度是否是预期的。我从来没有遇到过setSelectedRows 的问题，除了我有时需要使用的延迟

标签： select checkbox slickgrid checked

【解决方案1】：

我也在https://github.com/6pac/SlickGrid/issues/478上发布了这个答案但是我不知道我建议的修改是否会产生意想不到的后果。

以编程方式选择行时（例如从单击到按钮），不会选中关联的复选框。我从示例文件夹中修改了程序“example-checkbox-row-select.html”以进行测试。见下文：

<body>
    <button id="selectRow5" style="position:relative;height:30px">
      select row 5</button>

    <button id="unselectRow5" style="position:relative;height:30px">
      unselect row 5</button>

    <button id="unselectAllRows" style="position:relative;height:30px">
      unselect all rows</button>

。 . .等等

<script>
var grid;

$("#selectRow5").click(function() {
    let rowIndex = 5; // use row 5 for this example
    let selectedRowsIndexes = grid.getSelectedRows();
    selectedRowsIndexes.push(rowIndex);
    grid.setSelectedRows(selectedRowsIndexes);
});

$("#unselectRow5").click(function() {
    let rowIndex = 5; // use row 5 for this example
    let newSelectedRowsIndexes = [];
    let oldSelectedRowsIndexes = grid.getSelectedRows();
    while (oldSelectedRowsIndexes.length != 0) {
        let indexFound = oldSelectedRowsIndexes.pop();
        if (indexFound != rowIndex) {
            newSelectedRowsIndexes.push(indexFound)
        }
    }
    grid.setSelectedRows(newSelectedRowsIndexes);
});

$("#unselectAllRows").click(function() {
    grid.setSelectedRows([]);
});
</script>

1 - 启动程序，单击第一个按钮（选择第 5 行）。第 5 行被选中，但未选中复选框。通过单击复选框手动选择任何其他行时，该框将显示为选中状态。

2 - 启动程序，单击第一个按钮两次。该复选框在第二次单击时被选中。单击第二个按钮（取消选择第 5 行）。该行未选中，但未删除复选标记。单击任何其他行。复选标记现在已删除。

3 – 启动程序。单击第一个按钮两次。复选标记被选中。单击第二个按钮（取消选择第 5 行）。复选标记未被选中。单击第三个按钮（取消选择所有行）。复选标记未被选中。单击任何其他行的复选框。第 5 行的复选标记未选中。

解决方案：修改函数 handleSelectedRangesChanged(e, range) （在 slick.grid.js 的第 2683 行附近）注释行 2703 和 2705。见下文：

//  if (simpleArrayEquals(previousSelectedRows, selectedRows)) {
        trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e);
//  }

【讨论】：

2.4.21 版本的 slickGrid 解决了这个问题。非常感谢开发人员。
请注意，我们还将您上面使用的测试按钮合并到example-checkbox-row-select.html