SlickGrid复选框选择列插件“全选”答案

【问题标题】：SlickGrid Check Box Select Column Plugin "Check All"SlickGrid复选框选择列插件“全选”
【发布时间】：2015-09-03 02:49:01
【问题描述】：

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

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

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

这是插件 JS 文件中的 sn-p，用于查找要检查的标题框：

 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();
        }
    }

【问题讨论】：

您可以选择，例如，通过 jQuery，在标题行的特定单元格中选择复选框并将其设置为选中。

标签： javascript slickgrid

【解决方案1】：

按照您使用grid.setSelectedRows() 的描述设置选定的行将更新标题行中的“全选/取消全选”复选框。 “复选框选择列”插件订阅由grid.setSelectedRows() 触发的网格onSelectedRowsChanged 事件。当此事件发生时，插件调用函数handleSelectedRowsChanged(e, args)，该函数确定是否应选中“全选/取消全选”复选框并进行相应更新。

使用以下 sn-p 将选中的项目设置为空数组将清除所有复选框。

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

使用以下 sn-p 将所选项目设置为所有项目的数组将选中复选框。

//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);

如果您确实必须触发一个事件来选中/取消选中“全选/取消全选”标题复选框，那么您可以使用如下所示的内容。但是我强烈建议坚持上述方法。

//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/

【讨论】：