(七) Fiori经典布局介绍之Employee List

今天来说下Fiori 官方推荐的布局之一，Employee List， 其实也就是个简单的列表，点击进入详情页面。看下例子：https://sapui5.hana.ondemand.com/test-resources/sap/ui/core/demokit/tutorial/navigation/09/webapp/index.html#/employees 。我们来做个稍微复制点的，加个Filter bar，看起来稍微高大上点，像下面这个样子。

来看下页面分解，大概有这么几部分构成。

1. 整个页面的header，这个不用自己搞，直接加个title就可以了。
2. Filter bar，几个过滤条件的组合，search支持live search。
3. Table的Tool bar，包含描述性文字和操作按钮。
4. Table的表头。
5. 数据列表，点击条目会跳到详细页面。Table的item。
   

开干，创建个项目先，结构如下。很简单，新建目录下增加了mock的目录，及用来存放列表表的假数据mock.js文件。

在mock.js文件中添加下列代码。

由于需要用到Filter bar，所以要配置一下需要引用的库。如下，在view.mxl中，添加红色部分的两行代码，引入这两个库。

一切准备就绪，开始垒页面，首先添加Filter bar。建议参考https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.comp.sample.filterbar.example1/preview代码自己堆一个试试。也可以直接将以下代码敲到content标签中。（这里只包含了search field，Field_1和Field_3，具体filter的个数可根据实际情况自行添加。图中红线划掉的部分，表示本节不需要）

Filter bar有了，下一步就是Table了。参考https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Table/preview，或者下图红圈，先把Table组件加上。这里又出现了数据绑定的新形式，直接将数组绑定到页面的方式。注意table items属性的写法，此处把数组和items相匹配。

然后是Tool bar。

再然后，表头。

再再然后，列表的条目。由于controller对tableModel进行了重命名，所以每个属性前都要加重命名的名称。

在Table中，表头是固定的文字，所以存入i18n中，理论上项目是默认支持多语言的。

静态页面搞定，再来看看controller。如图：

首先引入两个模块，一个是自带的Filter模块，另一个是自建的mock。 -> 3，4行

将这两个模块作为参数传入 -> 5 行

在初始化方法onInit中，声明一个叫tableModel的JSONModel -> 10行

将model绑定到页面，就是id为items_table的table，并重命名为tableModel。 -> 11行（由此也可以看出，一个页面是可以绑定n多model的）

getTableData方法，获取之前写好的假数据（数组），并把数据绑定给刚刚声明的model。此处不要弄混了，流程应该是这样的，data -> model -> view。

至此，运行应该可以看到效果了，和第一张图一样就对了。但是Filter还不能用。

让filter起作用，在search field中输入内容时，下方的列表动态的显示出过滤结果。

在view.xml文件中，我们已经给SearchField 的liveChange属性赋值为liveSearch，所以在controller中添加liveSearch方法，根据五个字段的值进行过滤如下：

刷新，在search field中输入内容，列表就会把过滤后的结果显示出来。例如，输入y，baby和candy两人的名字中含有y。也可以输入电话号码进行过滤。

就到这里，后续会把其他过滤方式加上，并且点击条目进入详细页面。