kendo ui dropdownlist如何手动级联？ [英] kendo ui dropdownlist- How to do manual Cascading?

问题描述

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

So im currently trying to adapt some previous code to use with dynamic dropdownlists, the problem seems to be that the cascadeFrom property only takes an id. So i need to use another alternative. Here's my code:

       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对象进行级联？
我看过这个代码：

How can i use the dom object matching the second dropdownlist for the cascading? I've seen this code:

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

，这里，但是我不能跟随我如何适应我的情况。

,here, but im not following how do i adapt to my case.

以下是我认为的原因：

 $(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()
                       };
                   }
               }
           }
       }
   });

从第二个下拉列表（addsFormFields）的数据函数中的属性formId需要匹配 formFields.dataSource.read（{formId：formId}）;从第一个更改函数？

Does the property formId from the data function from the second dropdownlist (appendedFormFields) needs to match the formFields.dataSource.read({ formId: formId }); from the first one change function?

推荐答案

添加更改事件或者尝试onclose事件if它没有为dropdown1提取正确的值

Add a change event or maybe try an onclose event if it isn't picking up the correct value to "dropdown1"

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

On that change event get the value of that selected item

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

清除dropdown2的内容并重新读取数据源

clear the contents of "dropdown2" and re read the data source

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

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

EDIT ::
我认为调用JS函数更改事件第一个ddl

: I think it's cleaner to call a JS function on the change event of the 1st ddl

 $(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}）; 不同的变量

No you can name that property whatever you want, just make sure the property of the data function matches the parameter in the controller. Just to be safe I make .dataSource.read({ formId: ddlID }); different variables

这篇关于kendo ui dropdownlist如何手动级联？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！