Webix组合/richselect中的筛选选项

Filtering options in Webix combo/richselect

本文关键字：筛选 选项 richselect 组合 Webix      更新时间：2023-10-04

我想根据上一个组合（richselect控件）中的选定值（或某个组ID）设置第二个组合中的选项：

rows:[
    { 
      view:"richselect", label:"Country",             
      id:'rich_1', value:1,
      options:countries, 
      on:{onChange:function(newv){
        $$("combo_1").getList().filter( function(obj){                  
          if (obj.country == newv) console.log(obj.value);
          return obj.country == newv;
        });
      }}
    },
    { 
      view:"combo", id:"combo_1", label:"Name",   
      options:cities              
    }
]

代码段

过滤功能是有效的，但我发现选项在显示时会令人耳目一新。我没有为组合找到像onBeforeShow这样的事件，所以问题是——有办法过滤这些选项吗？

组合使用过滤本身来调整结果，这将禁用自定义过滤逻辑的结果。

请检查下一个片段http://webix.com/snippet/da3923b5
它使用了更复杂的逻辑，这里我们有一个中间数据收集。

var cDC=新的webix。DataCollection（｛data:citys｝）；

现在，第一个组合过滤集合，每次集合更改时，第二个组合都会从集合中重新加载数据。

webix.ui({
  rows:[
    { 
      view:"richselect", label:"Country",             
      id:'rich_1', value:0,
      options:countries, 
      on:{
        onChange:function(newv){
          cDC.filter( function(obj){                  
            if (obj.country == newv) console.log(obj.value);
            return obj.country == newv;
          });
        }
      }
    },
    { 
      view:"combo", id:"combo_1", label:"City",   
      options:{ data: cDC }
    }
  ]
});

如果你感兴趣，combo有onBeforeShow事件处理程序以及

{ 
  view:"combo", id:"combo_1", label:"City",   
  options:{ 
    data: cDC, 
    on:{ onBeforeShow:function(){ webix.message("show"); }}
   }
}
相关文章：