WeX5 开发账目分类设置页

    账目分类设置页实现新增、修改、删除账目分类的功能。编辑时下拉选择账目类型、输入分类名称。用一个W文件实现。

1、新建页面文件classSetting.w

在“新建W向导”中选择模板“移动→标准→标准页面”，文件名输入classSetting。在页面中将放入数据组件和展现组件，如图1-32所示。

图1-32  账目分类设置页面构成

2、增加账目类型、账目分类数据

账目类型是下拉选择的数据，所以需要提供账目类型数据，用于下拉选择。账目类型分为收入和支出，是静态数据，因此使用data组件；账目分类则需要使用数据组件baasData，通过调用后端服务，获取账目分类表中的数据。表1-12列出了数据组件属性的设置方法。

表1-12  分类设置页数据组件属性说明

3、制作账目分类列表

在账目分类设置页面中，一条条账目分类数据以列表的形式展现出来。使用列表组件list实现列表展现。在list组件中，使用下拉组件select进行账目类型的下拉选择，使用input组件实现账目分类名称的输入。界面设计如图1-33.所示

图1-33  账目分类设置页设计界面

表1-13列出了展现组件属性的设置方法。

表1-13  分类设置页展现组件属性说明

新增删除账目分类数据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);

       };