WeX5 开发账目分类设置页
账目分类设置页实现新增、修改、删除账目分类的功能。编辑时下拉选择账目类型、输入分类名称。用一个W文件实现。
1、新建页面文件classSetting.w
在“新建W向导”中选择模板“移动→标准→标准页面”，文件名输入classSetting。在页面中将放入数据组件和展现组件，如图1-32所示。
图1-32 账目分类设置页面构成
2、增加账目类型、账目分类数据
账目类型是下拉选择的数据，所以需要提供账目类型数据，用于下拉选择。账目类型分为收入和支出，是静态数据，因此使用data组件；账目分类则需要使用数据组件baasData，通过调用后端服务，获取账目分类表中的数据。表1-12列出了数据组件属性的设置方法。
表1-12 分类设置页数据组件属性说明
组件 | 父组件 | 属性 | 属性值 | 说明 |
baasData | model | xid | classData | 账目分类数据，从detail.w中复制 |
autoLoad | true | 自动加载数据 | ||
autoNew | false | 不自动新增数据 | ||
limit | -1 | 获取全部账目分类数据 | ||
directDelete | true | 直接删除数据表中的记录 | ||
data | model | xid | typeData | 账目类型数据，从list.w中复制 |
3、制作账目分类列表
在账目分类设置页面中，一条条账目分类数据以列表的形式展现出来。使用列表组件list实现列表展现。在list组件中，使用下拉组件select进行账目类型的下拉选择，使用input组件实现账目分类名称的输入。界面设计如图1-33.所示
图1-33 账目分类设置页设计界面
表1-13列出了展现组件属性的设置方法。
表1-13 分类设置页展现组件属性说明
组件 | 父组件 | 属性事件 | 值 | 说明 |
list | content1 | xid | list1 | 账目分类列表 |
data | classData | 关联账目分类数据 | ||
row | list下的li | xid | row1 | 行组件，分为三列 |
col | row1 | xid | col1 | 用来放账目类型下拉组件 |
col | row1 | xid | col2 | 用来放账目分类名称输入框 |
col | row1 | xid | col3 | 用来放删除按钮 |
class | x-col x-col-fixed | 设置固定列宽 | ||
width | 50px; | 设置 | ||
select | col1 | xid | select1 | 账目类型下拉组件 |
bind-ref | ref('fType') | 绑定类型列 | ||
bind-options | $model.typeData | 下拉数据关联账目类型数据 | ||
bind-optionsValue | fType | 选择后取fType列的值，写入classData | ||
input | col2 | xid | input1 | 账目分类名称输入框 |
bind-ref | ref('fClass') | 绑定账目分类列 | ||
button | col3 | xid | deleteBtn | 删除账目分类按钮 |
icon | icon-android-close | 设置按钮图标 | ||
class | btn btn-link btn-only-icon | 设置按钮样式 | ||
onClick | deleteBtnClick | 删除list当前行账目分类 | ||
button | titleBar1的right部分 | xid | newBtn | 新增账目分类按钮 |
icon | icon-android-add | 设置按钮图标 | ||
class | btn btn-link btn-only-icon | 设置按钮样式 | ||
onClick | newBtnClick | 新增账目分类 | ||
button | titleBar1的right部分 | xid | saveBtn | 保存按钮 |
icon | icon-android-checkmark | 设置按钮图标 | ||
class | btn btn-link btn-only-icon | 设置按钮样式 | ||
onClick | {operation:'classData.save'} | 调用classData的保存操作，保存数据至数据库 |
新增删除账目分类数据classSetting.js中的代码
Model.prototype.newBtnClick = function(event) { // 新增分类数据并给出默认值
this.comp("classData").newData({
"defaultValues" :[ {
"fID" :justep.UUID.createUUID(),
"fType" :"支出"
} ]
});
};
Model.prototype.deleteBtnClick = function(event) { // 删除list当前行数据
var row = event.bindingContext.$object;
this.comp("classData").deleteData(row);
};