Webix 中的过滤选项 combo/richselect
Filtering options in Webix combo/richselect
我想根据前一个(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
这样的事件,所以问题是 - 有没有办法过滤这些选项?
Combo 使用过滤本身来调整结果,这会禁用自定义过滤逻辑的结果。
请检查下一个片段http://webix.com/snippet/da3923b5
它使用了一些更复杂的逻辑,这里我们有一个中间数据收集。
var cDC = new webix.DataCollection({ data: cities });
现在,第一个组合过滤集合,每次当集合发生变化时,第二个组合将从集合中重新加载数据。
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"); }}
}
}
我想根据前一个(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
这样的事件,所以问题是 - 有没有办法过滤这些选项?
Combo 使用过滤本身来调整结果,这会禁用自定义过滤逻辑的结果。
请检查下一个片段http://webix.com/snippet/da3923b5
它使用了一些更复杂的逻辑,这里我们有一个中间数据收集。
var cDC = new webix.DataCollection({ data: cities });
现在,第一个组合过滤集合,每次当集合发生变化时,第二个组合将从集合中重新加载数据。
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"); }}
}
}