Kendo Grid：禁用行编辑

Posted 2023-05-07

【中文标题】Kendo Grid：禁用行编辑

【英文标题】：Kendo Grid : disable row edit

【发布时间】：2013-08-09 04:49:15

【问题描述】：

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

谁能告诉我该怎么做。

谢谢

【问题讨论】：

看看这个解决方案***.com/questions/15893199/…

【参考方案1】：

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

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

示例：我们有一个具有以下schema 定义的网格：

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

第二个选项是将网格定义为不可编辑，如果条件为真，则手动调用editCell：

在这种情况下，您将grid 定义为：

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

然后为单元格定义一个click 处理程序：

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

我在哪里检索与单击的表格单元格对应的row 的data 并检查条件。如果条件匹配，那么我打开单元格。

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

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

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

【讨论】：

谢谢，OnaBai 您的第一个解决方案节省了我的时间。除了闪烁问题，我们还可以使用“BeforeEdit”事件。它非常适合我。

【参考方案2】：

对我来说，我想防止用户在尝试添加新行时双击其他行。例如，考虑以下代码：

var IDS = 
    myGrid: "#my-grid",

    addRowBtn: "#add-btn",
    deleteRowBtn: "#delete-btn",
    saveRowBtn: "#save-btn",
    cancelRowBtn: "#cancel-btn",
;

var Grids = 
    MyGrid: null,
    //...
;

然后在初始化函数中我创建一个事件处理函数来响应双击事件：

function initMyGrid() 
    $(IDS.myGrid).kendoGrid(
        selectable: true,
        scrolable: true,
        sortable: false,
        columns: [
             field: "FirstName", title: "First Name", width: "20%", attributes:  tabindex: "1"  ,
             field: "LastName", title: "Last Name", width: "60%", attributes:  tabindex: "2"  
        ]
    );
    //...
    Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) 
        Grids.MyGrid.editCell($(this));
    );

然后我在PageState中创建了一个值来测试：

var PageState = 
    // ...
    AddingRow: false
;

因此，当用户单击按钮添加新行时，我会阻止他们单击以编辑任何其他行：

function addNewRow() 
    PageState.AddingRow = true;

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) 
        if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") 
            Grids.RulesGrid.closeCell();
        
    );
    // ...

此外，每当用户保存行或取消添加新行时，我都会重新启用双击事件：

function saveRow() 
    PageState.AddingRow = false;

    // Allow user to edit other records now
    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) 
        Grids.MyGrid.editCell($(this));
    );
    // ...

HTH。