SlickGrid点击/双击事件

分析

        SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击，捕获到点击事件之后，修改表格数据，然后使用grid.updateRow方法将修改后的数据更新到表格中。

展示

 代码

创建grid（HTML）

<!--创建grid-->
<div id="myGrid" class="slick-container" style="width:600px;height:500px;"></div>

创建grid（JavaScript）

// 五角星样式
function priorityFormatter(row, cell, value, columnDef, dataContext) {
    const count = value === 'Low' ? 1 : value === 'Medium' ? 2 : 3;
    let icon = '';
    for (let i = 0; i < count; i++) {
        icon += '<span class="sgi sgi-star-outline"></span>';
    }
    return icon;
}

var grid;
var data = [];
var columns = [  // 创建columns
    {id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: Slick.Editors.Text},
    {id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false},
    {id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false, formatter: priorityFormatter}
];

var options = {
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    rowHeight: 30
};

document.addEventListener("DOMContentLoaded", function() {
    for (var i = 0; i < 100; i++) {  // 创建数据
        var d = (data[i] = {});
        d["title"] = "Task " + i;
        d["priority"] = "Medium";
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
});

注册点击事件

// 注册点击事件
grid.onClick.subscribe(function (e) {
    var cell = grid.getCellFromEvent(e);
    if (grid.getColumns()[cell.cell].id == "priority") {
        if (!grid.getEditorLock().commitCurrentEdit()) {
            return;
        }
        // 修改表格数据
        var states = {"Low": "Medium", "Medium": "High", "High": "Low"};
        data[cell.row].priority = states[data[cell.row].priority];
        grid.updateRow(cell.row);  // 将修改后的数据更新到表格
        e.stopPropagation();
    }
});

注册双击事件

// 注册双击事件
grid.onDblClick.subscribe(function (e) {
    var cell = grid.getCellFromEvent(e);
    if (grid.getColumns()[cell.cell].id == "priority") {
        if (!grid.getEditorLock().commitCurrentEdit()) {
            return;
        }
        // 修改表格数据
        var states = {"Low": "Medium", "Medium": "High", "High": "Low"};
        data[cell.row].priority = states[data[cell.row].priority];
        grid.updateRow(cell.row);  // 将修改后的数据更新到表格
        e.stopPropagation();
    }
});