Fatal编程技术网
  • javascript/
  • Javascript 剑道ui下拉列表-如何进行手动级联？

Javascript 剑道ui下拉列表-如何进行手动级联？

javascript drop-down-menu kendo-ui

Javascript 剑道ui下拉列表-如何进行手动级联？,javascript,drop-down-menu,kendo-ui,cascade,Javascript,Drop Down Menu,Kendo Ui,Cascade,因此，我目前正在尝试修改一些以前的代码以用于动态dropdownlists，问题似乎是cascadeFrom属性只需要一个id。因此我需要使用另一种替代方法。这是我的密码： fieldsDiv.html(dynForms + dynFormFields); var appendedForms=fieldsDiv.find(".dynamicForms"); var appendedFormFields= fieldsDiv.find(".dynamic

因此，我目前正在尝试修改一些以前的代码以用于动态dropdownlists，问题似乎是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"
       });
如何使用与第二个dropdownlist匹配的dom对象进行级联？ 我看到了以下代码：

    function OnChangeOfParentCombo(e){
 var child = $('#ChildCombo').data().kendoComboBox;
 child.enable(true);
 child.dataSource.read({myFilter:this.value()});}
，但我不明白如何适应我的情况

以下是我的想法：

 $(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()
                       };
                   }
               }
           }
       }
   });
第二个dropdownlist（appendedFormFields）中数据函数的属性formId是否需要与
formFields.dataSource.read（{formId:formId}）匹配；从第一个一次更改功能开始？

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

在该更改事件上获取所选项目的值

var advertiserId = $("#AdvertiserDDL").val();
清除“dropdown2”的内容并重新读取数据源

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

    var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
    opportunity.dataSource.read({ Id: advertiserId });
编辑：： 我认为在第一个ddl的更改事件上调用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}）不同的变量
我发现使用MVVM和HTML声明性绑定更简单，看起来更干净。不必通过JavaScript函数初始化每个剑道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>



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:.中实现了手动级联下拉列表。
第二个下拉列表中的“我的数据”函数会发生什么变化？以下是结构：传输：{read:{url:“${pageContext.request.contextPath}”+“/newlayout/mySearchesFormFieds.do”，数据：function（）{return{formId:$（appendedForms.val（）}；}}}它应该继续燃烧嗨！这两个代码示例都应该位于第一个下拉列表的chanve事件上？我只能明天测试一下然后再给你回复。谢谢..是的，因为第一个下拉列表是您“层叠而来”的下拉列表。读取它将是，在第一个下拉列表更改时，获取它更改为的值，清除第二个下拉列表中的任何内容，读取第二个下拉列表的数据源，并将第一个下拉列表id作为参数传递。您会注意到我正在向Read函数传递一个参数，这基本上就是data函数所做的，它为Read方法带来了额外的信息。如果它不起作用，可能是因为它尝试了两次，但我已经在项目中这样实现了它，并且没有出现问题。它似乎起作用了，但在孩子第一次尝试从服务器获取元素时，我遇到了一个错误。看起来这个值是空的。我在这里放了一个断点：调试器；返回{formId:$（appendedForms）.val（）}；但是如果val（）是空的，它确实考虑了所有其他选项，但是我得到了一个一次性错误，因为val（）是空的。这看起来很有趣，而且更简单，但是远程数据呢？在远程数据场景中（使用我的示例），您只需要使用
$加载
类型
数组。ajax
。然后，在
typeChange
方法中，您将使用
$.ajax
根据所选
id
检索项目，并使用返回的数据设置
项目
可观察。有趣的是，谢谢，您能否详细说明这两个选择的行：data bind=“source:types，value:type，events:{change:typeChange}”？和data bind=“enabled:type，source:items，value:item”>签出并查看每个绑定的文档。谢谢，我接受了另一个用户海报，因为它目前正在工作。但我正在调查你的答案。谢谢