WeX5 開發(fā)賬目分類設置頁

    賬目分類設置頁實現(xiàn)新增、修改、刪除賬目分類的功能。編輯時下拉選擇賬目類型、輸入分類名稱。用一個W文件實現(xiàn)。

1、新建頁面文件classSetting.w

在“新建W向導”中選擇模板“移動→標準→標準頁面”，文件名輸入classSetting。在頁面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-32所示。

圖1-32  賬目分類設置頁面構成

2、增加賬目類型、賬目分類數(shù)據(jù)

賬目類型是下拉選擇的數(shù)據(jù)，所以需要提供賬目類型數(shù)據(jù)，用于下拉選擇。賬目類型分為收入和支出，是靜態(tài)數(shù)據(jù)，因此使用data組件；賬目分類則需要使用數(shù)據(jù)組件baasData，通過調用后端服務，獲取賬目分類表中的數(shù)據(jù)。表1-12列出了數(shù)據(jù)組件屬性的設置方法。

表1-12  分類設置頁數(shù)據(jù)組件屬性說明

3、制作賬目分類列表

在賬目分類設置頁面中，一條條賬目分類數(shù)據(jù)以列表的形式展現(xiàn)出來。使用列表組件list實現(xiàn)列表展現(xiàn)。在list組件中，使用下拉組件select進行賬目類型的下拉選擇，使用input組件實現(xiàn)賬目分類名稱的輸入。界面設計如圖1-33.所示

圖1-33  賬目分類設置頁設計界面

表1-13列出了展現(xiàn)組件屬性的設置方法。

表1-13  分類設置頁展現(xiàn)組件屬性說明

新增刪除賬目分類數(shù)據(jù)classSetting.js中的代碼

       Model.prototype.newBtnClick = function(event) {   // 新增分類數(shù)據(jù)并給出默認值

              this.comp("classData").newData({

                     "defaultValues" :[ {

                            "fID" :justep.UUID.createUUID(),

                            "fType" :"支出"

                     } ]

              });

       };

       Model.prototype.deleteBtnClick = function(event) {   // 刪除list當前行數(shù)據(jù)

              var row = event.bindingContext.$object;

              this.comp("classData").deleteData(row);

       };