kendo ui dropdownlist-如何进行手动级联？答案

【问题标题】：kendo ui dropdownlist- How to do manual Cascading?kendo ui dropdownlist-如何进行手动级联？
【发布时间】：2014-05-12 17:35:35
【问题描述】：

所以我目前正在尝试调整一些以前的代码以与动态下拉列表一起使用，问题似乎是 cascadeFrom 属性只需要一个 id。所以我需要使用另一种选择。这是我的代码：

       fieldsDiv.html(dynForms + dynFormFields);

       var appendedForms=fieldsDiv.find(".dynamicForms");
       var appendedFormFields= fieldsDiv.find(".dynamicFormFields");


       debugger;
       $(appendedForms).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering: true,
               transport: {
                   read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
               }

       }});
       $(appendedFormFields).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering:true,
               transport: {

                   read:{
                       url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                       data:function(){
                           return {formId:  $(appendedForms).val()
                           };
                       }
                   }
               }
           },
           cascadeFrom:  "appendedFormFields"
       });

如何使用与第二个下拉列表匹配的 dom 对象进行级联？我看过这段代码：

    function OnChangeOfParentCombo(e){
 var child = $('#ChildCombo').data().kendoComboBox;
 child.enable(true);
 child.dataSource.read({myFilter:this.value()});}

,here，但我不知道如何适应我的情况。

我的想法是这样的：

 $(appendedForms).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering: true,
           transport: {
               read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
           },
       change:function(){
             var formId = this.val()
             appendedFormFields.val("").data("kendoDropDownList").text("");
             var formFields = $(appendedFormFields).data("kendoDropDownList");
             formFields.dataSource.read({ formId: formId });               
       }
   }});
   $(appendedFormFields).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering:true,
           transport: {
               read:{
                   url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                   data:function(){
                       return {formId:  $(appendedForms).val()
                       };
                   }
               }
           }
       }
   });

第二个下拉列表（appendedFormFields）中数据函数的属性formId是否需要匹配formFields.dataSource.read({ formId: formId }); from the first one change function?

【问题讨论】：

标签： javascript drop-down-menu kendo-ui cascade

【解决方案1】：

添加一个更改事件，或者如果它没有为“dropdown1”选择正确的值，可以尝试一个 onclose 事件

在该更改事件中获取该选定项的值

var advertiserId = $("#AdvertiserDDL").val();

清除“dropdown2”的内容，重新读取数据源

$("#OpportunityDDL").val("").data("kendoDropDownList").text("");

    var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
    opportunity.dataSource.read({ Id: advertiserId });

编辑:: 我认为在第一个 ddl 的 change 事件上调用 JS 函数更干净

 $(appendedForms).kendoDropDownList({...

   change:function(){
     YourFunction();
}
     YourFunction() {
         var ddlID = appendedForms.val()
         appendedFormFields.val("").data("kendoDropDownList").text("");
         var formFields = $(appendedFormFields).data("kendoDropDownList");
         formFields.dataSource.read({ formId: ddlID });  
       }

不，您可以随意命名该属性，只需确保数据函数的属性与控制器中的参数匹配即可。为了安全起见，我制作了.dataSource.read({ formId: ddlID }); 不同的变量

【讨论】：

第二个下拉列表中的数据函数会发生什么情况？继承人的结构：传输：{读取：{url：“$ {pageContext.request.contextPath}”+“/newlayout/mySearchesFormFieds.do”，data：function（）{return {formId：$（appendedForms）.val（） }; } } }
它应该继续开火
嗨！这两个代码示例都应该在第一个下拉列表的 chanve 事件上？我只能在明天进行测试，然后再回复您。谢谢..
是的，因为第一个下拉列表是您“级联”的那个。读出它是，在第一个下拉列表更改时，获取它更改为的值，清除第二个下拉列表中的任何内容，读取第二个下拉列表的数据源，将第一个下拉列表 id 作为参数传递。你会注意到我将一个参数传递给 Read 函数，这本质上是 data 函数所做的，它为 read 方法带来了额外的信息。如果它不起作用，可能是因为它试图这样做两次，但我已经在项目中这样实现它并且没有遇到问题
您好似乎正在工作，但我在孩子第一次尝试从服务器获取元素时遇到错误。看来值是空的。我在这里放了一个断点：调试器；返回 {formId: $(appendedForms).val() };但它 val() 是空的，它确实考虑了所有其他选项，但我得到一个一次性错误，因为 val() 是空的。

【解决方案2】：

我发现使用 MVVM 和 HTML 声明式绑定要简单得多，看起来也更干净。您可以利用 Kendo 声明式绑定的强大功能，而不是通过 JavaScript 函数初始化每个 Kendo UI 控件。它有其局限性，但该技术涵盖了大多数用例。力量隐藏在data- 属性和kendo.bind() 方法中。

HTML：

<body>
  <select id="types" 
          data-role="dropdownlist" 
          data-option-label=" " 
          data-text-field="name" 
          data-value-field="id" 
          data-bind="source: types, value: type, events: { change: typeChange }">
  </select>
  <select id="items" 
          data-role="dropdownlist" 
          data-option-label=" " 
          data-bind="enabled: type, source: items, value: item">
  </select>
</body>

JavaScript：

var items = [
  ['Apple', 'Orange', 'Pear'],
  ['Carrot', 'Lettuce', 'Spinach']
];

var vm = kendo.observable({
  type: 0,
  item: '',
  types: [{ id: 1, name: 'Fruits'}, { id: 2, name: 'Vegetables'}],
  items: [],
  typeChange: function(e) {
    var index = e.sender.dataItem().id - 1;
    this.set('items', items[index]);
  }
});

kendo.bind($('body'), vm);

下面是上述代码的示例，它在 JSBin 中实现 manual 级联下拉列表：click here。

【讨论】：

这看起来很有趣，而且更简单，但是远程数据呢？
在远程数据场景中（使用我的示例），您只需要使用$.ajax 加载types 数组。然后，在typeChange 方法中，您将使用$.ajax 根据选定的id 检索项目，并使用返回的数据设置items observable。
有趣，谢谢，你能详细说明一下：data-bind="source: types, value: type, events: { change: typeChange }"> 两个选择吗？和 data-bind="enabled: type, source: items, value: item">
查看docs.telerik.com/kendo-ui/getting-started/framework/mvvm/…，然后查看每个绑定的文档。
谢谢，我接受了其他用户的海报，因为它目前正在工作。但我正在调查你的答案。谢谢