有时我们希望下拉菜单带有提示项,比如默认第一项是“--请选择--”;或者“--全部--”表示包含下拉菜单中的所有条件。
有两种实现方式:
第一种方式:
var json = new JsonRest({target: url}); json.query().then(function(items){ items.reverse(); // 先反转 items.push({'num' : 'null','name' : '--SELECT--'}); // 添加 items.reverse();// 再反转回来,最末变第一 var store = new Memory({data: items,idProperty: 'num'}); var os = new ObjectStore({ objectStore: store }); var select = new Select({store:os,labelAttr:"name"}); });
里面用到了reverse()方法,用unshift()方法也可以
第二种方式:var select = new Select({ store:os,required : true,labelAttr:"name",onSetStore: function() { this.options.unshift({label:'--SELECT--',value:'NULL',selected:true}); this._loadChildren(); } });
补充1:
对于FilteringSelect,第二种方式不适用。其余部分不变,只需对第一种方式微调,就能支持FilteringSelect
var select = new FilteringSelect({ store:os,value: "null",// 默认选中我们增加的空白项 labelAttr:"name",searchAttr: "name" });
补充2:
谢谢网友的提醒。上面两种方式都是通过增加option来实现,也就是新增的option也会出现在下拉菜单项中。对于菜单项中出现“--全部--”还可以理解,但是出现“--请选择--”就没意义了。我们希望“--请选择--”只是一个hint,在用户没操作该下拉菜单时显示,用户操作时消失,而且不出现在下拉项中。对于FilteringSelect可以这样做:
select.set('displayedValue','--SELECT--');但是会有个问题,会弹出“输入的值无效”的错误提示,所以还需要
select.set('state','');消除错误提示,并且结合事件处理才能完美解决。
补充3:
增加option实现“--请选择--”hint,也可以通过删除option达到“--请选择--”不显示到下拉项中的目的。Select的实现:
// 消除'--SELECT--' aspect.before(select,"toggleDropDown",function(){ this.removeOption('NULL'); // '--SELECT--'的value是'NULL' });
FilteringSelect的实现:
aspect.before(select,function(){ this.store.objectStore.remove('NULL'); this.set('displayedValue',''); });
补充4:
其实如果只想给FilteringSelect增加hint,还有更简单的方法。设置placeholder:'Quick navigation'即可。dojo在线api页的搜索框就是很好的例子。
原文链接:https://www.f2er.com/dojo/291156.html