剑道ui：如何在comboBox数据绑定事件中删除绑定到某个comboBox的数据源的dataItem

我有一个网格，在其中的某个列中，我使用columns.editor函数创建了一个组合框编辑UI。 我的目标是，每当用户在填充新创建的网格记录时，从组合框中选择某个值时，该值将被忽略 从下一条记录组合框的列表选项中删除

我尝试过的一件事如下所示：

function equipmentDropDownEditor(container, options) {
    var equipmentComboBox = $('<input id="equipmentDropDownEditor" required data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataSource: equipmentTypesDS,
            dataBound: function(e) {

              var equipmentData = e.sender.dataSource.data();

              if(currentlyInsertedEquipmentTypes.length > 0){

                for(var i=0;i<currentlyInsertedEquipmentTypes.length;i++){

                    $.each( equipmentData, function( index, selectedEquipmentData ) {

                            if (selectedEquipmentData.name == currentlyInsertedEquipmentTypes[i]){

                                  var dataItem = e.sender.dataSource.at(index);
                                  console.log("dataItem: " + dataItem.name + " is being removed");
                                  e.sender.dataSource.remove(dataItem);

                            }
                    });
                }

              }

            }
        });
}

}))

---剑道格网代码：

                    $("#popup_equipment").kendoGrid({  
                        dataSource: {
                            schema:{
                                model:{
                                    id: "equipment_type_id",
                                    fields:{
                                        equipment_type_id: { editable: false },
                                        name: { }, //validation: {required: true}, defaultValue: "LAPTOP", 
                                        items:{ type: "number", defaultValue:1, validation: { required: true, min: 1} }
                                    }
                                }
                            }
                        },
                        toolbar: ["create"],
                        columns: [
                            { field: "name", title: "εξοπλισμός", width: "300px", editor: equipmentDropDownEditor, template: "#=name#" },
                            { field: "items", title:"πλήθος", width: "80px"},
                            { command: ["destroy"], title: " ", width: "100px" }
                        ],
                        //editable: "inline",//true,
                        editable:{confirmation: false},
                        scrollable: false,
                        selectable: false
                     });

[编辑2]

$("#popup_equipment").kendoGrid({
    dataSource: {
        schema:{
            model:{
                id: "equipment_type_id",
                fields:{
                    equipment_type_id: { editable: false },
                    name: { }, //validation: {required: true}, defaultValue: "LAPTOP", 
                    items:{ type: "number", defaultValue:1, validation: { required: true, min: 1} }
                }
            }
        }
    },
    toolbar: ["create"],
    columns: [
        { field: "name", title: "εξοπλισμός", width: "60%", editor: equipmentDropDownEditor, template: "#=name#" },
        { field: "items", title:"πλήθος", width: "20%"},
        { command: ["destroy"], title: " ", width: "20%" }
    ],
    editable:{confirmation: false},
    scrollable: false,
    selectable: false,
    save: function(e){
        console.log("GRID SAVE EVENT! ", e);
        var equipment_name = e.values.name;
        equipmentTypesDS.get(equipment_name).used = true;
        console.log("equipmentTypesDS", equipmentTypesDS);
        console.log("END OF GRID SAVE EVENT!");
    }
});




function equipmentDropDownEditor(container, options) {
    var equipmentComboBox = $('<input id="equipmentDropDownEditor" required data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataSource: equipmentTypesDS,
        });
}


var equipmentTypesDS=  new kendo.data.DataSource({

    transport: {
        read: {
            url: "api/equipment_types",
            type: "GET",
            data: {
                //"equipment_category": 1
            },
            dataType: "json"
        }
    },
    schema: {
        data: "data",
        total: "total",
        model:{
            id: "name"
        }
    },
    filter: { field: "used", operator: "neq", value: true }
});

$（“弹出式设备”）.kendoGrid({
数据源：{
模式：{
型号：{
id:“设备类型id”，
字段：{
设备类型标识：{可编辑：false}，
名称：{}，//验证：{required:true}，默认值：“LAPTOP”，
项：{type:“number”，defaultValue:1，验证：{required:true，min:1}
}
}
}
},
工具栏：[“创建”]，
栏目：[
{字段：“名称”，标题：“εξοπλισμός”，宽度：“60%”，编辑器：设备下拉编辑器，模板：“#=名称#”}，
{字段：“项目”，标题：“πλήθος”，宽度：“20%”，
{命令：[“销毁”]，标题：，宽度：“20%”
],
可编辑：{确认：错误}，
可滚动：false，
可选：false，
保存：功能（e）{
log（“网格保存事件！”，e）；
var设备名称=e.values.name；
equipmentTypesDS.get（设备名称）.used=true；
控制台日志（“设备类型SDS”，设备类型SDS）；
log（“网格保存事件结束！”）；
}
});
功能设备下拉编辑器（容器、选项）{
变量设备组合框=$（''）
.appendTo（容器）
kendoComboBox先生({
自动绑定：错误，
数据来源：equipmentTypesDS，
});
}
var equipmentTypesDS=新的kendo.data.DataSource({
运输：{
阅读：{
url:“api/设备类型”，
键入：“获取”，
数据：{
//“设备类别”：1
},
数据类型：“json”
}
},
模式：{
数据：“数据”，
总计：“总计”，
型号：{
id:“姓名”
}
},
筛选器：{field:“used”，运算符：“neq”，值：true}
});

我建议采用不同的方法。不要拆下滤芯，而是将其过滤掉

示例：我使用城市列表（插入的设备）定义了一个数据源，如下所示：

var cityDS = new kendo.data.DataSource ({
    data : [
        { City : "Seattle", used : false },
        { City : "Tacoma", used : false },
        { City : "Kirkland", used : false },
        { City : "Redmond", used : false },
        { City : "London", used : false },
        { City : "Philadelphia", used : false },
        { City : "New York", used : false },
        { City : "Boston", used : false }
    ],
    schema : {
        model : {
            id : "City"
        }
    },
    filter: { field: "used", operator: "eq", value: false }
});

如您所见，我添加了一个名为

used

的字段，该字段仅表示该

City

是否已被使用。我将它设置为这个数据源的

id

。此外，我设置了一个

过滤器

，表示我只希望

使用的
id相等（
eq
）的过滤器设置为
false

编辑器功能基本上属于您：

function cityDropDownEditor(container, options) {
    var equipmentComboBox = $('<input required data-text-field="City" data-value-field="City" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoComboBox({
        autoBind: false,
        dataSource: cityDS
    });
}

如果不使用任何元素启动网格，这可能会起作用，否则必须方便地初始化
used
字段。它可能需要一些额外的代码来处理案例，如更改
城市
，但根据您的描述，情况似乎并非如此

您可以在这里看到这条消息：
你好，OnaBai，谢谢您的快速回复。不幸的是，我在将你的解决方案应用到我的案例中时遇到了一个问题。我的缺点是我没有引用与问题相关的全部代码，我只是在上面的问题中添加了一些代码。您可以看到将绑定到网格组合框的数据源。我不是创建数据的人。我通过发出API请求来获得它们。根据我所检查的，kendo数据源文档没有提供向数据源添加新字段的方法。如果是这样的话，还有其他解决问题的方法吗？他们没有提到如何添加字段，因为在JavaScript中，您不需要声明字段，您可以随时进行声明。由于您没有收到
已使用的
，您可以假定，如果记录未定义，则是因为未使用
城市
。检查我修改过的JSFIDLE，显示以下内容：（请检查
neq
到
true
的条件是否匹配这两个条件，如果它为false，并且未定义）。我遵循了您的示例，但每次按下向下箭头进行选择时，都会触发保存事件，因此“已使用”对于位于列表中我最终选择的项目上方的每个项目，属性都设置为true。因此，许多项目被过滤，尽管它们不应该被过滤。在您的情况下，保存事件不会被触发。。知道是什么导致了这种行为吗？谢谢！我无法重现您在按下向下箭头时所说的“保存”执行情况。您使用的是哪种版本模式（弹出、内联等）？你能分享一些复制你所说内容的代码吗？我的JSFIDLE会发生这种情况吗？在[EDIT 2]下面，您可以看到我的新代码。我使用内联编辑模式。从组合框中选择项目有两种方法。第一种方法是用鼠标打开列表并选择合适的项目。另一种方法是按下键盘的向下箭头并导航到正确的项目，在列表中逐个传递其上方的项目。在第二种情况下，当我按下向下箭头时，网格的保存事件被触发，代码cityDS.get（city）.used=true；被执行。因此，如果我想选择列表中的第五个项目，我会为上面的所有四个项目设置used属性。
function cityDropDownEditor(container, options) {
    var equipmentComboBox = $('<input required data-text-field="City" data-value-field="City" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoComboBox({
        autoBind: false,
        dataSource: cityDS
    });
}

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : "popup",
    pageable  : true,
    toolbar: [ "create" ],
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200, editor : cityDropDownEditor }
    ],
    save : function(e) {
        console.log("e", e);
        var city = e.model.City;
        cityDS.get(city).used = true;
    }
}).data("kendoGrid");