我有一个网格，在某些列中，我使用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);
}
});
}
}
}
});
}
我创建了一个名为“currentInsertedEquipmentTypes”的全局数组变量，其中包含了所有用户已经选择的值 （例如，如果用户在网格内创建了2条记录，并在第一个和“工作站”选项的组合框中选择了“laptop”选项 在第二组合框中 - > CurrentlyInsertedEquipmentTypes = [“laptop”，“workstation”]）。
在组合框dataBound事件中，我检查用户是否已经选择了值（currentlyInsertedEquipmentTypes.length＆gt; 0） 如果他有，我在绑定的dataSource中找到相应的对象，然后将其删除，以便它在下一个记录的组合框列表中不可用。 即使删除了数据项，这也是整个事情崩溃的地方。
我错过了删除数据项后应该做的事情吗？我应该以某种方式将数据源重新绑定到组合框吗？ 任何帮助将不胜感激。
[编辑]
----组合框数据源代码
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"
}
}）;
---剑道网格代码：
$("#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 }
});
答案 0 :(得分：1)
我建议采用不同的方法。而不是删除元素过滤掉它。
示例：我定义了一个带有城市列表（您的插入设备）的数据源，如下所示：
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是否已被使用。我将其设置为此DataSource的id。另外，我设置filter说我只想要used 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
});
}
但没有dataBound或任何其他事件处理程序。
最后在保存记录的Grid中，我filter列表中的那个城市。类似的东西：
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");
如果您在没有元素的情况下启动Grid，则可能会有效，否则您必须方便地初始化used字段。它可能需要一些额外的代码来处理案例，因为更改City但是从您的描述来看，似乎并非如此。
你可以在这里看到这个：http://jsfiddle.net/OnaBai/ZH4aD/