从数组的数组动态创建 Kendo 个下拉列表
Dynamically Create Kendo Drop Down Lists from Array of Arrays
我有一个存储在变量中的 Web 服务的数组列表。
如果我使用一个数组或 1 个对象的列表,它就可以工作。
如果我使用任何长度超过 1 个数组的列表,只有最后生成的下拉列表有效。数据似乎丢失了,因为我无法单击控件并查看项目。
检查控制台中的对象不显示数据。
Javascript / Jquery 函数如下所示:
for (var i = 0; i < $scope.filters.data.length; i++) {
var control = $scope.filters.data[i];
var optionName = control.Name
if (control.UiType == "SingleSelect") {
var controlName = "selectFilterFor" + optionName.trim();
var selectControl = $scope.getSingleSelect(optionName, controlName);
$(".search-panel-fields")[0].innerHTML += selectControl;
var selectorName = "#" + controlName;
//$(controlName).kendoDropDownList().data("kendoDropDownList");
$(selectorName).kendoDropDownList({
dataTextField: "Name",
dataValueField: "Value",
dataSource: control.Attributes,
dataBound: onDataBound,
//index: 0,
optionLabel: { Name: "", Value: "" }
});
}
}
我认为 DOM 可能太慢了,但添加了 setTimeout(function() {//updateDom }, 1000);没有效果。
我还在 dataBound 事件上添加了一些日志记录,看看它是否一切正常:
dataBound: function (e) {
console.log('data is bound: ' + control.Name);
console.log(e.sender.dataItems());
},
还有带有数据数组的元素。我现在特别要避免额外的网络呼叫。
JSON 数据的快速修改版本:
{"JSON":[{"SHORT":"AREA","Name":"Areas","UIOGLItrol":{"Name":"Area","UiType":"SingleSelect"},"Attributes":[{"Name":"BuildWEZL Area A","Value":"A","FieldType":null,"IsActive":true},{"Name":"9611","Value":"9611","FieldType":null,"IsActive":true}]},{"SHORT":"HAVOCSAYOR","Name":"HAVOCSAYORs","UIOGLItrol":{"Name":"HAVOCSAYOR","UiType":"SingleSelect"},"Attributes":[{"Name":"NO HAVOCSAYOR","Value":"ND","FieldType":null,"IsActive":true},{"Name":"BUILDWEZL","Value":"BLD","FieldType":null,"IsActive":true},{"Name":"MARIL","Value":"MAR","FieldType":null,"IsActive":true},{"Name":"SAMMARAL","Value":"ELE","FieldType":null,"IsActive":true},{"Name":"GENERAL","Value":"GEN","FieldType":null,"IsActive":true},{"Name":"GUILDMENTATION","Value":"INS","FieldType":null,"IsActive":true},{"Name":"PARTS","Value":"MECH","FieldType":null,"IsActive":true},{"Name":"MANA DELIVERY","Value":"PDL","FieldType":null,"IsActive":true},{"Name":"PROJECT MANAGEMENT","Value":"PMGT","FieldType":null,"IsActive":true},{"Name":"MEGAUTIL","Value":"STR","FieldType":null,"IsActive":true},{"Name":"OGLISTTERMION","Value":"OGLI","FieldType":null,"IsActive":true},{"Name":"PIPWEZL","Value":"PIP","FieldType":null,"IsActive":true},{"Name":"ANTLERS","Value":"QC","FieldType":null,"IsActive":true}]},{"SHORT":"ItemISION","Name":"Itemisions","UIOGLItrol":{"Name":"Itemision","UiType":"SingleSelect"},"Attributes":[{"Name":"Item - (Placeholder)","Value":"-","FieldType":null,"IsActive":true},{"Name":"Item A","Value":"A","FieldType":null,"IsActive":true},{"Name":"Item B","Value":"B","FieldType":null,"IsActive":true},{"Name":"Item C","Value":"C","FieldType":null,"IsActive":true},{"Name":"Item D","Value":"D","FieldType":null,"IsActive":true},{"Name":"Item E","Value":"E","FieldType":null,"IsActive":true},{"Name":"Item F","Value":"F","FieldType":null,"IsActive":true},{"Name":"Item G","Value":"G","FieldType":null,"IsActive":true},{"Name":"Item H","Value":"H","FieldType":null,"IsActive":true},{"Name":"Item J","Value":"J","FieldType":null,"IsActive":true},{"Name":"Item K","Value":"K","FieldType":null,"IsActive":true},{"Name":"Item 00","Value":"00","FieldType":null,"IsActive":true},{"Name":"Item 01","Value":"01","FieldType":null,"IsActive":true},{"Name":"Item 02","Value":"02","FieldType":null,"IsActive":true},{"Name":"Item 03","Value":"03","FieldType":null,"IsActive":true},{"Name":"Item 04","Value":"04","FieldType":null,"IsActive":true},{"Name":"Item 05","Value":"05","FieldType":null,"IsActive":true},{"Name":"Item 06","Value":"06","FieldType":null,"IsActive":true},{"Name":"Item 07","Value":"07","FieldType":null,"IsActive":true},{"Name":"Item 08","Value":"08","FieldType":null,"IsActive":true},{"Name":"Item 09","Value":"09","FieldType":null,"IsActive":true},{"Name":"Item 10","Value":"10","FieldType":null,"IsActive":true},{"Name":"Item I","Value":"I","FieldType":null,"IsActive":true},{"Name":"Item 11","Value":"11","FieldType":null,"IsActive":true}]}],"Response Payload":{"EDITOR_OGLIFIG":{"text":"[{\"SHORT\":\"AREA\",\"Name\":\"Areas\",\"UIOGLItrol\":{\"Name\":\"Area\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"BuildWEZL Area A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"9611\",\"Value\":\"9611\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"HAVOCSAYOR\",\"Name\":\"HAVOCSAYORs\",\"UIOGLItrol\":{\"Name\":\"HAVOCSAYOR\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"NO HAVOCSAYOR\",\"Value\":\"ND\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"BUILDWEZL\",\"Value\":\"BLD\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MARIL\",\"Value\":\"MAR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"SAMMARAL\",\"Value\":\"ELE\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GENERAL\",\"Value\":\"GEN\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GUILDMENTATION\",\"Value\":\"INS\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PARTS\",\"Value\":\"MECH\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MANA DELIVERY\",\"Value\":\"PDL\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PROJECT MANAGEMENT\",\"Value\":\"PMGT\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MEGAUTIL\",\"Value\":\"STR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"OGLISTTERMION\",\"Value\":\"OGLI\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PIPWEZL\",\"Value\":\"PIP\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"ANTLERS\",\"Value\":\"QC\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"ItemISION\",\"Name\":\"Itemisions\",\"UIOGLItrol\":{\"Name\":\"Itemision\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"Item - (Placeholder)\",\"Value\":\"-\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item B\",\"Value\":\"B\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item C\",\"Value\":\"C\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item D\",\"Value\":\"D\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item E\",\"Value\":\"E\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item F\",\"Value\":\"F\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item G\",\"Value\":\"G\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item H\",\"Value\":\"H\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item J\",\"Value\":\"J\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item K\",\"Value\":\"K\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 00\",\"Value\":\"00\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 01\",\"Value\":\"01\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 02\",\"Value\":\"02\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 03\",\"Value\":\"03\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 04\",\"Value\":\"04\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 05\",\"Value\":\"05\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 06\",\"Value\":\"06\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 07\",\"Value\":\"07\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 08\",\"Value\":\"08\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 09\",\"Value\":\"09\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 10\",\"Value\":\"10\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item I\",\"Value\":\"I\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 11\",\"Value\":\"11\",\"FieldType\":null,\"IsActive\":true}]}]","mode":"application/json"}}}
如何Kendo正确实例化所有对象?
您可能对数组中项目的属性有一些疑问。
添加元素的更安全方法是 .appendTo
而不是 innerHTML
连接
根据问题中显示的 'modified data',以下应构建三个 kendo 下拉菜单。
response.JSON.forEach (control =>
{ if (control.UIOGLItrol.UiType == "SingleSelect")
{
var controlId = "selectFilterFor" + control.Name;
$("<input>", {id:controlId, name:control.Name, class:"ssInput", type:"text"})
.appendTo(".search-panel-fields");
$("#"+controlId).kendoDropDownList({
dataTextField: "Name",
dataValueField: "Value",
dataSource: control.Attributes,
dataBound: onDataBound,
optionLabel: { Name:"", Value:"" }
});
}
});
看到这个Dojo
我有一个存储在变量中的 Web 服务的数组列表。
如果我使用一个数组或 1 个对象的列表,它就可以工作。
如果我使用任何长度超过 1 个数组的列表,只有最后生成的下拉列表有效。数据似乎丢失了,因为我无法单击控件并查看项目。
检查控制台中的对象不显示数据。
Javascript / Jquery 函数如下所示:
for (var i = 0; i < $scope.filters.data.length; i++) {
var control = $scope.filters.data[i];
var optionName = control.Name
if (control.UiType == "SingleSelect") {
var controlName = "selectFilterFor" + optionName.trim();
var selectControl = $scope.getSingleSelect(optionName, controlName);
$(".search-panel-fields")[0].innerHTML += selectControl;
var selectorName = "#" + controlName;
//$(controlName).kendoDropDownList().data("kendoDropDownList");
$(selectorName).kendoDropDownList({
dataTextField: "Name",
dataValueField: "Value",
dataSource: control.Attributes,
dataBound: onDataBound,
//index: 0,
optionLabel: { Name: "", Value: "" }
});
}
}
我认为 DOM 可能太慢了,但添加了 setTimeout(function() {//updateDom }, 1000);没有效果。
我还在 dataBound 事件上添加了一些日志记录,看看它是否一切正常:
dataBound: function (e) {
console.log('data is bound: ' + control.Name);
console.log(e.sender.dataItems());
},
还有带有数据数组的元素。我现在特别要避免额外的网络呼叫。
JSON 数据的快速修改版本:
{"JSON":[{"SHORT":"AREA","Name":"Areas","UIOGLItrol":{"Name":"Area","UiType":"SingleSelect"},"Attributes":[{"Name":"BuildWEZL Area A","Value":"A","FieldType":null,"IsActive":true},{"Name":"9611","Value":"9611","FieldType":null,"IsActive":true}]},{"SHORT":"HAVOCSAYOR","Name":"HAVOCSAYORs","UIOGLItrol":{"Name":"HAVOCSAYOR","UiType":"SingleSelect"},"Attributes":[{"Name":"NO HAVOCSAYOR","Value":"ND","FieldType":null,"IsActive":true},{"Name":"BUILDWEZL","Value":"BLD","FieldType":null,"IsActive":true},{"Name":"MARIL","Value":"MAR","FieldType":null,"IsActive":true},{"Name":"SAMMARAL","Value":"ELE","FieldType":null,"IsActive":true},{"Name":"GENERAL","Value":"GEN","FieldType":null,"IsActive":true},{"Name":"GUILDMENTATION","Value":"INS","FieldType":null,"IsActive":true},{"Name":"PARTS","Value":"MECH","FieldType":null,"IsActive":true},{"Name":"MANA DELIVERY","Value":"PDL","FieldType":null,"IsActive":true},{"Name":"PROJECT MANAGEMENT","Value":"PMGT","FieldType":null,"IsActive":true},{"Name":"MEGAUTIL","Value":"STR","FieldType":null,"IsActive":true},{"Name":"OGLISTTERMION","Value":"OGLI","FieldType":null,"IsActive":true},{"Name":"PIPWEZL","Value":"PIP","FieldType":null,"IsActive":true},{"Name":"ANTLERS","Value":"QC","FieldType":null,"IsActive":true}]},{"SHORT":"ItemISION","Name":"Itemisions","UIOGLItrol":{"Name":"Itemision","UiType":"SingleSelect"},"Attributes":[{"Name":"Item - (Placeholder)","Value":"-","FieldType":null,"IsActive":true},{"Name":"Item A","Value":"A","FieldType":null,"IsActive":true},{"Name":"Item B","Value":"B","FieldType":null,"IsActive":true},{"Name":"Item C","Value":"C","FieldType":null,"IsActive":true},{"Name":"Item D","Value":"D","FieldType":null,"IsActive":true},{"Name":"Item E","Value":"E","FieldType":null,"IsActive":true},{"Name":"Item F","Value":"F","FieldType":null,"IsActive":true},{"Name":"Item G","Value":"G","FieldType":null,"IsActive":true},{"Name":"Item H","Value":"H","FieldType":null,"IsActive":true},{"Name":"Item J","Value":"J","FieldType":null,"IsActive":true},{"Name":"Item K","Value":"K","FieldType":null,"IsActive":true},{"Name":"Item 00","Value":"00","FieldType":null,"IsActive":true},{"Name":"Item 01","Value":"01","FieldType":null,"IsActive":true},{"Name":"Item 02","Value":"02","FieldType":null,"IsActive":true},{"Name":"Item 03","Value":"03","FieldType":null,"IsActive":true},{"Name":"Item 04","Value":"04","FieldType":null,"IsActive":true},{"Name":"Item 05","Value":"05","FieldType":null,"IsActive":true},{"Name":"Item 06","Value":"06","FieldType":null,"IsActive":true},{"Name":"Item 07","Value":"07","FieldType":null,"IsActive":true},{"Name":"Item 08","Value":"08","FieldType":null,"IsActive":true},{"Name":"Item 09","Value":"09","FieldType":null,"IsActive":true},{"Name":"Item 10","Value":"10","FieldType":null,"IsActive":true},{"Name":"Item I","Value":"I","FieldType":null,"IsActive":true},{"Name":"Item 11","Value":"11","FieldType":null,"IsActive":true}]}],"Response Payload":{"EDITOR_OGLIFIG":{"text":"[{\"SHORT\":\"AREA\",\"Name\":\"Areas\",\"UIOGLItrol\":{\"Name\":\"Area\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"BuildWEZL Area A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"9611\",\"Value\":\"9611\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"HAVOCSAYOR\",\"Name\":\"HAVOCSAYORs\",\"UIOGLItrol\":{\"Name\":\"HAVOCSAYOR\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"NO HAVOCSAYOR\",\"Value\":\"ND\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"BUILDWEZL\",\"Value\":\"BLD\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MARIL\",\"Value\":\"MAR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"SAMMARAL\",\"Value\":\"ELE\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GENERAL\",\"Value\":\"GEN\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GUILDMENTATION\",\"Value\":\"INS\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PARTS\",\"Value\":\"MECH\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MANA DELIVERY\",\"Value\":\"PDL\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PROJECT MANAGEMENT\",\"Value\":\"PMGT\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MEGAUTIL\",\"Value\":\"STR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"OGLISTTERMION\",\"Value\":\"OGLI\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PIPWEZL\",\"Value\":\"PIP\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"ANTLERS\",\"Value\":\"QC\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"ItemISION\",\"Name\":\"Itemisions\",\"UIOGLItrol\":{\"Name\":\"Itemision\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"Item - (Placeholder)\",\"Value\":\"-\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item B\",\"Value\":\"B\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item C\",\"Value\":\"C\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item D\",\"Value\":\"D\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item E\",\"Value\":\"E\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item F\",\"Value\":\"F\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item G\",\"Value\":\"G\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item H\",\"Value\":\"H\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item J\",\"Value\":\"J\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item K\",\"Value\":\"K\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 00\",\"Value\":\"00\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 01\",\"Value\":\"01\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 02\",\"Value\":\"02\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 03\",\"Value\":\"03\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 04\",\"Value\":\"04\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 05\",\"Value\":\"05\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 06\",\"Value\":\"06\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 07\",\"Value\":\"07\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 08\",\"Value\":\"08\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 09\",\"Value\":\"09\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 10\",\"Value\":\"10\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item I\",\"Value\":\"I\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 11\",\"Value\":\"11\",\"FieldType\":null,\"IsActive\":true}]}]","mode":"application/json"}}}
如何Kendo正确实例化所有对象?
您可能对数组中项目的属性有一些疑问。
添加元素的更安全方法是 .appendTo
而不是 innerHTML
连接
根据问题中显示的 'modified data',以下应构建三个 kendo 下拉菜单。
response.JSON.forEach (control =>
{ if (control.UIOGLItrol.UiType == "SingleSelect")
{
var controlId = "selectFilterFor" + control.Name;
$("<input>", {id:controlId, name:control.Name, class:"ssInput", type:"text"})
.appendTo(".search-panel-fields");
$("#"+controlId).kendoDropDownList({
dataTextField: "Name",
dataValueField: "Value",
dataSource: control.Attributes,
dataBound: onDataBound,
optionLabel: { Name:"", Value:"" }
});
}
});
看到这个Dojo