具有内联可编辑列表的剑道网格

Posted 2023-05-07

【中文标题】具有内联可编辑列表的剑道网格

【英文标题】：Kendo grid with inline editable list

【发布时间】：2015-08-06 01:49:17

【问题描述】：

我需要实现一个带有可编辑条目的网格。实体字段之一是字符串列表。例如，它是一个订单列表，每个订单可能有多个跟踪号。所以我需要它来实现一个支持显示实体列表、添加和删除项目的能力的小部件。而且（最重要的是）它必须在剑道网格中工作。

所以我已经构建了一个示例小部件......

(function (jQuery) 

var ui = kendo.ui;
var Widget = ui.Widget;

var TrackingNumbersList = Widget.extend(
    addEntryToList: function (event, value) 
        if (value == undefined) 
            var value = this.valueInput.val();
            if (value != null && value != "") 
                this.addEntryToList(event, value);
            
         else 
            this.domElement.find("div#valuesContainer").append($j("<div valueContainer></div>").html(value));
            this.valueInput.val('');
        
    ,
    clear: function () 
        this.domElement.find("div[valueContainer]").remove();
    ,
    renderInterface: function () 
        var that = this;

        this.domElement.append("<div id='valuesContainer'></div>");
        this.valueInput = $j("<input id='txtValue' type='text' />");

        this.domElement.append(
        $j("<div></div>").append(this.valueInput)
        .append($j("<input type='button' value='Add' />").click($j.proxy(that.addEntryToList, that)))
        .append($j("<input type='button' value='Delete all' />").click($j.proxy(that.clear, that)))
        );
    ,
    init: function (element, options) 
        this.domElement = $j(element);
        this.renderInterface();
        Widget.fn.init.call(this, element, options);
        this.element = element;
    ,

    options:  name: "TrackingNumbersList" ,
    value: function () 
        var result = [];
        this.domElement.find("div[valueContainer]").each(function (index, el) 
            result.push($j(el).html());
        );
        return result;
    ,
    value: function (val) 
        this.clear();
        var that = this;
        $j(val).each(function (index, value) 
            that.addEntryToList(null, value);
        );
    
);
ui.plugin(TrackingNumbersList);)(jQuery);

现在我想问是否有人知道如何让这些东西在 Kendo Grid 中工作。感谢任何帮助。

【参考方案1】：

如果我理解正确，kendo multi select control 应该可以完成这项工作。我认为在剑道网格中使用会更容易

【讨论】：

我更想了解如何构建一个可以在 Kendo Grid 中正常工作的小部件。我真的很想明白这一点。

【参考方案2】：

尝试使用网格内联编辑的 EditorTemplate，这可能会解决您的问题

【讨论】：

给出一些示例代码，以便其他用户更清楚地理解

【参考方案3】：

您可以像这样使用Editing-inline。您可以在剑道网格中添加、编辑和删除记录。