(八) Select控件的使用
继续前一篇,让其他的filter也动起来,首先让下拉列表动起来。
![(八) Select控件的使用 (八) Select控件的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg0NC8wMGEyOTU3NmVmNDZkNDZiYTE2YjEwZmYyMzk5NjQ4Yy5wbmc=)
fiori比较不同于其他的js框架,不能在html页面调用方法的时候直接传参数给controller,这就尴尬了。所以每次有点击事件的地方,几乎都会用到获取当前所点击项的index,然后再用index去数据里找到所选项。然后就是上一篇提到的filter的用法了。
后边的判断,一定要加上,这个应该是Select控件的bug,选择all触发change方法后,值并不能准确的给出来。
下拉列表,在fiori中控件的名称为Select,可以先看下用法https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Select/preview。都完成之后的controller代码结构如下,之后把代码分块对应到这张图上。标识部分是新增的两个方法。
Select控件功能比较独立,单独声明一个model, ageModel。考虑到用户选择了某个年龄之后,有可能想查看全部结果,所以列表应该是可逆的。为了达到可逆效果,在数据源中this.ages中默认添加all选项。
修改一下getTableData方法,将age字段提取出来,让setAges方法加工一下,然后把this.ages数据放到ageModel中。
看下setAges方法如何加工的。首先肯定是要去重(for循环部分),如果在this.ages数组中未发现当前的年龄,则给年龄添加一个index构成对象,push到this.ages数组中。Select控件的model就搞定了。
然后把数据绑定到页面上,这步和table的操作很像。此处必须要给控件的id属性赋值,fiori开发中经常会用到id属性。按照table的方式给items赋值,selectedKey属性表示默认选中项,这里默认选中第0项。<core:Item>用来显示下拉选项。
运行应该能看到一下效果。如果没看到,检查下之前的步骤。
fiori比较不同于其他的js框架,不能在html页面调用方法的时候直接传参数给controller,这就尴尬了。所以每次有点击事件的地方,几乎都会用到获取当前所点击项的index,然后再用index去数据里找到所选项。然后就是上一篇提到的filter的用法了。
后边的判断,一定要加上,这个应该是Select控件的bug,选择all触发change方法后,值并不能准确的给出来。
一切搞定,运行下。