Question

我知道我可以循环遍历行并获取所有id并通过数组将行设置为选中。

var rows = [];
      for (var i = 0; i < _grid.getDataLength(); i++) {
        rows.push(i);
      }
      _grid.setSelectedRows(rows);

但是，如何以编程方式触发事件来检查/取消选中选择/取消选择所有行的标题复选框？

这是插件JS文件中的片段，用于查找要检查的标题框：

 function handleHeaderClick(e, args) {
        if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
            // if editing, try to commit
            if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return;
            }

            if ($(e.target).is(":checked")) {
                var rows = [];
                for (var i = 0; i < _grid.getDataLength(); i++) {
                    rows.push(i);
                }
                _grid.setSelectedRows(rows);
            }
            else {
                _grid.setSelectedRows([]);
            }
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    }

Answer 1

使用grid.setSelectedRows()设置所选行将更新“选择/取消全选”。标题行中的复选框。 “复选框选择列”＆＃39;插件订阅由onSelectedRowsChanged触发的网格grid.setSelectedRows()事件。当此事件发生时，插件调用函数handleSelectedRowsChanged(e, args)，该函数确定是否选择/取消选择全部＆＃39;应检查复选框并相应地更新它。

使用以下代码段将所选项目设置为空数组将清除所有复选框。

//Select no rows - clear the header checkbox
grid.setSelectedRows([]);

使用以下代码段将所选项目设置为所有项目的数组将选中该复选框。

//Select all rows - will check header checkbox
//Generate an array of all rows ids from the grid data
var rows = [];
for (var i = 0; i < grid.getDataLength(); i++) {
    rows.push(i);
}
//Set selected rows on grid
grid.setSelectedRows(rows);

如果你真的必须触发一个事件来检查/取消选中＆＃39;选择/取消全选＆＃39;标题复选框然后您可以使用类似下面的内容。但是，我强烈建议坚持上述方法。

//Determine if the checkbox is currently checked
var currentlyChecked = $('#myGrid').find('.slick-header-column:first-child').find('input').prop('checked')

//Set to reverse of current i.e. !currentlyChecked
$('#myGrid').find('.slick-header-column:first-child').find('input').prop('checked', !currentlyChecked).trigger('click');

以下小提示为每种选择项目的方法提供了按钮。

http://jsfiddle.net/z83fjth4/

SlickGrid复选框选择列插件“全部检查”

1 个答案: