kendo ui 下拉列表 - 如何进行手动级联? [英] 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()
                       };
                   }
               }
           }
       }
   });

来自第二个下拉列表(appendedFormFields)的数据函数的属性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?

推荐答案

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

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

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

: 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 下拉列表 - 如何进行手动级联?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！