WeX5 开发账目列表
账目列表功能以列表的形式列出账目信息，显示出每笔账目的分类、金额、备注和日期。用一个W文件实现。
1、新建应用
开发App的完整过程参考1.3.2 开发过程一节。首先新建一个应用acc。
2、新建页面文件list.w
在“新建W向导”中选择模板 “移动→标准→标准页面”，文件名输入list。在页面中将放入数据组件和展现组件，如图1-26.
图1-26 账目列表页面构成
3、增加账目数据
在账目列表页面中，要显示出账目表中的数据，就需要使用数据组件baasData，通过调用后端服务，获取账目表中的数据，用于账目列表的显示。表1-7列出了数据组件属性的设置方法。
表1-7 账目列表页数据组件属性说明
组件 | 父组件 | 属性 | 属性值 | 说明 |
baasData | model | xid | accountData | 账目数据 |
tableName | account | 单击右侧按钮弹出选择 | ||
idColumn | fID | 选择后自动带出 | ||
url | /justep/account | 选择后自动带出 | ||
queryAction | queryAccount | 选择后自动带出 | ||
saveAction | saveAccount | 选择后自动带出 | ||
autoLoad | true | 自动加载数据 | ||
autoNew | false | 不自动新增数据 | ||
limit | 5 | 刷新一次加载5条数据 | ||
directDelete | true | 直接删除数据表中的记录 |
4、制作账目列表
在账目列表页面中，一条条账目使用列表的形式展现出来。使用列表组件list实现列表展现，配合滚动视图组件scrollview实现上滑加载更多，下拉重新加载数据的功能。在list组件中使用output组件显示账目信息。整体界面设计如图1-27.所示。参照图1-28.所示的嵌套层次摆放展现组件。
图1-27 账目列表页设计界面
图1-28 展现组件嵌套层次关系
参照表1-8设置各展现组件的属性。
表1-8 账目列表页展现组件属性说明
组件 | 父组件 | 属性事件 | 值 | 说明 |
scrollView | content1 | xid | scrollView1 | 滚动视图 |
list | scrollView1下第2个div | xid | list1 | 账目列表 |
data | accountData | 关联账目数据 | ||
row | list下的li | xid | row1 | 行组件，分为两列 |
col | row1 | xid | col1 | 用来放账目信息的列 |
内有两行，每行各有两列，形成田字格，在最里面的列中放output显示账目信息 | ||||
col | row1 | xid | col2 | 用来放删除按钮的列 |
class | x-col x-col-fixed | 设置固定列宽 | ||
width | 50px; | 设置 | ||
output | col1下的第一行第一列 | xid | output1 |
|
bind-ref | ref('fClass') | 绑定账目分类列 | ||
style | font-size:x-large; | 显示大字体 | ||
bind-style | {'color': val('fType') == '收入' ? 'green' : 'brown'} | 收入显示绿色、支出显示红棕色 | ||
output | col1下的第一行第二列 | xid | output1 |
|
bind-ref | ref('fMoney') | 绑定金额列 | ||
style | font-size:x-large; | 显示大字体 | ||
bind-style | {'color': val('fType') == '收入' ? 'green' : 'brown'} | 收入显示绿色、支出显示红棕色 | ||
output | col1下的第二行第一列 | xid | output1 |
|
bind-ref | ref('fDescription') | 绑定备注列 | ||
output | col1下的第二行第二列 | xid | output1 |
|
bind-ref | ref('fDate') | 绑定日期列 | ||
账目列表中的展现组件的绑定属性和Hello World App中的设置不同。同样是绑定data组件的列，但是写法不同，在HelloWorld App中是这样的：$model.data1.ref("name")，在账目列表中是这样的ref('fClass')，原因是账目列表中的output组件是放在list组件中的。$model.data1.ref("name")表示取data组件当前行的name列，ref('fClass')表示取list组件当前行的fClass列。