带有条件禁用控件的内联编辑

Posted 2023-05-07

【中文标题】带有条件禁用控件的内联编辑

【英文标题】：Inline editing with conditionally disabled controls

【发布时间】：2014-09-03 13:32:42

【问题描述】：

我正在使用 Telerik Kendo UI 网格。我已将其配置为使用网格内联编辑。我有一个有趣的要求。其中一列是一个复选框，它定义了某些控件是否可编辑。即当勾选列 E、F、G 是只读的而其他列是可编辑的。未勾选时，B、C 列是可编辑的，而其他列是只读的。

我已经成功实现了这一点，但我想改进它。我已经实现了它，以便禁用控件。但是，如果控件更改为显示模式等标签，我更愿意。

function gridEdit(e) 
            setRowStatus(e.container, e.model.IsCustomJob);           
        

  function setRowStatus(c, isSpecificSH) 
            changeControlStatusNumeric(c, 'ColumnB', !IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnC', !IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnE', IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnF', IsCustomJob);
            changeControlStatusDropDown(c, 'ColumnG', IsCustomJob);
        

 function changeControlStatusNumeric(c, name, isEnabled) 
            var ctrl = c.find("input[name='" + name + "']").data("kendoNumericTextBox");
            ctrl.enable(isEnabled);
            if (!isEnabled) 
                ctrl.value('');
            
        

如下所示，我的实现存在的问题是，用户不太清楚哪些项目是可编辑的，哪些项目是不可编辑的。这就是为什么我想将禁用的控件更改为标签或者完全隐藏它们。 Grid API 中是否有实现此功能的功能...或者我应该使用 jquery 实现此功能？

勾选时：

未勾选时：

【参考方案1】：

我建议为应该禁用的列创建自定义编辑器，然后有条件地附加只读内容而不是编辑器，例如像这样：

网格：

$("#grid").kendoGrid(
    dataSource: dataSource,
    pageable: true,
    height: 430,
    toolbar: ["create"],
    columns: [
        field: "ProductName",
        title: "Product Name"
    , 
        field: "Category",
        title: "Category",
        width: "160px",
        editor: categoryDropDownEditor,
        template: "#=Category.CategoryName#"
    , 
        field: "UnitPrice",
        title: "Unit Price",
        format: "0:c",
        width: "120px"
    , 
        command: ["edit", "destroy"]
    ],
    editable: "inline"
);

编辑：

function categoryDropDownEditor(container, options) 
    // if model is set to disabled we don't show an editor
    if (options.model.disabled) 
        $("<span>" + options.model.get(options.field).CategoryName + "</span>").appendTo(container);
        return;
    ;

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList(
        autoBind: false,
        dataSource: 
            type: "odata",
            transport: 
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
            
        
    );

您可以在 changeControlStatusNumeric 函数中设置 model.disabled 属性，或者如果您不想在模型中添加其他字段，您可以将 CSS 类添加到容器并在自定义编辑器中进行检查。

(demo)

【讨论】：

感谢您的详细解答。必须做一个自定义编辑器有点矫枉过正，但我​​想这是唯一的方法。