SlickGrid复选框

分析

        1、先在columns首列添加复选框；

        2、在SlickGrid注册刚添加的复选框；

        3、添加复选框变化事件；

        4、注册按钮点击事件，点击获取已选中的行。

展示

代码

复选框样式（CSS）

.slick-cell-checkboxsel {
    background: #f0f0f0;
    border-right-color: silver;
    border-right-style: solid;
}

创建grid（HTML）

<div id="myGrid" class="slic-container" style="width:100%;height:300px;"></div>

创建grid（JavaScript）

var grid;
var data = [];
var options = {
    editable: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false,
    gridMenu: {iconCssClass: "sgi sgi-menu sgi-17px"}
};
var checkboxSelector = new Slick.CheckboxSelectColumn({cssClass: "slick-cell-checkboxsel"});
var columns = [  // 创建columns
    checkboxSelector.getColumnDefinition(),
    {"id": 0, "name": "A", "field": 0, "width": 100},
    {"id": 1, "name": "B", "field": 1, "width": 100},
    {"id": 2, "name": "C", "field": 2, "width": 100},
    {"id": 3, "name": "D", "field": 3, "width": 100},
    {"id": 4, "name": "E", "field": 4, "width": 100}
]

document.addEventListener("DOMContentLoaded", function() {
    for (var i = 0; i < 100; i++) {  // 生成数据
        var d = (data[i] = {});
        d[0] = "Row " + i;
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);  // 创建grid
    grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
    grid.registerPlugin(checkboxSelector);  // 注册复选框

    grid.onSelectedRowsChanged.subscribe(function (e, args) {  // 复选框变化事件
        var sortedSelectedRows = args.rows.sort(function (a, b) { return a - b });
        console.log(sortedSelectedRows);  // 打印已选中的行
    });
});

点击按钮（HTML）

<button id="showSelect">showSelect</button>

按钮点击事件（JavaScript）

document.querySelector("#showSelect").addEventListener('click', function() {  // 注册点击事件
    var selectedRowsIndexes = grid.getSelectedRows();
    console.log(selectedRowsIndexes);  // 打印已选中的行
});