[在slickGrid上以编程方式选择行时未显示复选标记

问题描述 投票:0回答:1

我修改了示例中的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);
});
select checkbox slickgrid checked
1个回答
0
投票

我也在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);
//  }
© www.soinside.com 2019 - 2024. All rights reserved.