代码之家 › 专栏 › 技术社区 › Austin T French

从数组数组动态创建剑道下拉列表

kendo-dropdown kendo-ui jquery

0

Austin T French · 技术社区 · 5 年前

我有一个存储在变量中的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正确实例化所有对象?

0 回复 | 直到 5 年前

1

2

Richard 5 年前

数组中项的属性可能存在一些问题。添加元素的一种更安全的方法是 .appendTo 而不是 innerHTML 串联

根据问题中显示的“修改后的数据”,以下内容应构成三个剑道下拉菜单。

  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