jquery - 剑道网格 : disable row edit

Question

我有一个可编辑的网格，并希望根据条件使某些行不可编辑。

任何人都可以建议我该怎么做吗？

谢谢

Answer 1

开箱即用，没有允许控制每行版本的功能。您可以做的是在尝试编辑该行时退出编辑。

一旦单元格进入编辑模式，就会触发一个事件edit。您可以做的就是在检测到您的条件成立后立即关闭该单元格。

示例:我们有一个具有以下架构定义的网格:

schema  : {
    model: {
        fields: {
            Id       : { type: 'number' },
            FirstName: { type: 'string' },
            LastName : { type: 'string' },
            City     : { type: 'string' }
        }
    }
}

并且我们不想允许编辑 City 为 Seattle 的行。 edit 处理程序应定义为:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : true,
    edit      : function (e) {
       // e.model contains the model corresponding to the row that is being edited.
        var data = e.model;
        if (data.City === "Seattle") {
            // Close the cell (exit edition mode)
           this.closeCell();
        }
        e.preventDefault();
    },
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

问题是 edit 处理程序是在单元格实际处于编辑模式后调用的，因此关闭可能会产生一些闪烁，但在大多数情况下它应该可以工作。

第二个选项是将网格定义为不可编辑，并在条件为 true 时手动调用 editCell:

在本例中，您将网格定义为:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

然后为单元格定义一个点击处理程序:

grid.tbody.on("click", "td", function (e) {
    // Close any possible cell already in edit mode
    grid.closeCell();
    // Find data corresponding to clicked cell
    var data = grid.dataItem($(e.target).closest("tr"));
    // Check condition
    if (data.City !== "Seattle") {
        // Enter edition mode
        grid.editCell(e.target);
    }
});

我在其中检索与单击的表格单元格相对应的行的数据并检查条件。如果条件匹配，则我打开单元格。

尽管这没有闪烁，但这不是我的首选，因为您需要仔细触发save来保存单元格，尽管您说网格不可编辑，但您正在编辑它。

此处运行第一个实现的示例:http://jsfiddle.net/OnaBai/NWw7T/第二个在这里:http://jsfiddle.net/OnaBai/NWw7T/1/

对于“incell”以外的版本模式，实现相同功能的最简单方法是创建一个自定义定义的版本按钮，用于控制行是否应该进入编辑模式。