【分享】WeX5的正確打開方式（7）——數據組件詳解

本文是【WeX5的正確打開方式】系列的第7篇文章，詳細介紹WeX5中數據組件的增刪改查以及數據定位方法。

前言

    上一篇 數據組件初探 咱們簡單介紹了數據組件的引入和底層結構以及特性，並實現了簡單的數據展現和數據改動。上一篇中簡單提到了，數據組件就是後臺數據庫表在前端的一個映射，先後端開發人員只要預約好數據組件的內容，就能夠簡單實現先後端開發的分離。既然數據組件是一個數據庫表的映射，那它的基本結構就是一張 2 維表格，舉個栗子，定義一個 html5開發工具 的數據組件，xid 爲 devtool ：

+-------+--------------------+----------------------------+---------+
| index | name               | url                        | country |
+-------+--------------------+----------------------------+---------+
|   1   | JetBrains WebStorm | https://www.jetbrains.com/ | USA     |
|   2   | Sencha Architect   | https://www.sencha.com/    | USA     |
|   3   | Justep Wex5        | http://www.wex5.com/       | CN      |
|   4   | Adobe Dreamweaver  | http://www.adobe.com/      | USA     |
|   5   | Google Web Toolkit | https://www.google.com/    | USA     |
+-------+--------------------+------------------------- --+---------+
    數據組件的 xid 就是數據庫表的名字，簡單理解就是咱們的身份證，經過xid能夠找到這個數據庫表。數據組件中還有一個 idColumn 屬性，上表中的index就是 idColumn，就是說這一列是數據庫表的 id 列，好比咱們的身份證號就是一個 id 列。再看數據組件的內容，爲了實現某個數據的增刪改查，咱們還必須定位到相應的行和列，這涉及到了數據組件的定位方法。

    下面分別介紹數據組件的定位機制和增刪改查方法。

數據定位
    首先是數據組件的定位，Wex5 中的組件實例查詢方法 comp(xid) 固然是能夠找到相應的數據組件了。另外，因爲是直接掛在 model 組件之下的，
Wex5 爲了簡化數據組件的引用，model.xid 的方法也能夠引用到數據組件。好比上文的 html5開發工具數據表，就能夠直接使用 Model.devtool 來使用。
從性能上考慮，不推薦使用 comp(xid) 的方式去查詢組件實例，由於一個應用中的組件可能不少，那遍歷查詢這一堆組件顯然是不划算的。

    獲取到數據組件以後，接下來看看如何定位到某一行，wex5 中的 API 主要有：

  1 Data.getCurrentRow(); // 獲取當前行 
  2 Data.getFirstRow();   // 獲取第一行
  3 Data.getLastRow();    // 獲取最後一行
  4 Data.next();          // 遊標移動到下一行
  5 Data.pre();           // 遊標移動到上一行
  6 Data.first();         // 遊標移動到第一行
  7 Data.last();          // 遊標移動到最後一行
  8 Data.to(row);         // 遊標移動到指定行
    獲取到某一行的時候，整一行的數據就是一個一維數組，這個時候提供列參數就能夠直接對數據進行讀寫了。

    數據定位機制中除了代碼直接定位以外，系統也會捕捉鼠標、觸屏等用戶交互操做來進行數據的定位。在界面中，若是用戶鼠標點擊或者觸屏點擊了某
一個數據行，那遊標就自動移動到那一行，不指定行參數的數據操做就會默認爲對該行的操做。要注意的是使用 tab 鍵轉移輸入焦點是不會自動進行數據
定位的。

    數據的定位就這些，使用起來是仍是很是簡單的，一般咱們也是定位數據後再進行增刪改查操做。

增刪改查

     任何一個與數據相關的程序，都離不開這「增刪改查」，數據組件固然也必需要有增刪改查幾種操做。

增：

Data.newData(option); ——– 後端新增，返回一行或者多行新增數據

Data.add(defaultValues,parent);——–前端新增一行數據，狀態須要開發者設定，defaultValues,parent參數同上；不會觸發data相關事件

刪：

Data.deleteData(rows); ——– 刪除指定行數據
Data.deleteAllData() ——– 刪除全部數據

改：

Data.setValue(col,value,row); 
Row.val(col,value);
查：

Data.getValue(col,row); 
Row.val(col);
     仍是用上一篇 數據組件初探 來做示範，增長几個按鈕，各按鈕方法以下：

  1 // 增
  2 Model.prototype.myAdd = function(event) {
  3     var data = this.data1;
  4     data.add({
  5         name : 'God Usopu',
  6         height : 180,
  7         weight : 70
  8     });
  9 };
 10 // 刪
 11 Model.prototype.myDelete = function(event) {
 12     var data = this.comp('data1');
 13     var row = data.getLastRow();
 14     data.deleteData(row);
 15 };
 16 // 改
 17 Model.prototype.myModify = function(event) {
 18     var data = this.comp('data1');
 19     var row = data.getLastRow();
 20     data.setValue("name", "changed", row);
 21 };
 22 // 查
 23 Model.prototype.mySearch = function(event) {
 24     var data = this.comp('data1');
 25     var lRow = data.getLastRow(), row, results = [];
 26     data.first();
 27     do {
 28         row = data.getCurrentRow();
 29         if (data.val('height') > 180) {
 30             results.push(data.val('name'));
 31         }
 32         data.next();
 33     } while (lRow != row);
 34     alert(results);
 35 };
 36
    效果：
  

    上面這個案例的操做都是在最後一行進行的，假如按照上文中的數據定位移動遊標的話，就能夠實如今任意位置的增刪改查了。

後端數據組件baasData

    以前的文章中，案例使用的都是data組件，而不是後端數據組件baasData，若是須要與後端數據庫進行交互的話，就必須使用baasData組件進行開發了
。

相比data組件，baasData增長了與後臺的交互接口：

    

    tableName、url與queryAction、saveAction 這幾項區別於Data組件的核心屬性。tableName也就是數據庫中的數據庫表，url是服務地址，還有兩個
Action分別是系統自帶的對數據庫的查詢操做和保存操做。WeX5中也能夠經過代碼調用後端服務：

  1 justep.Baas.sendRequest({
  2     "url" : "/服務的地址",
  3     "action" : "須要的操做",
  4     "async" : false,
  5     "params" : {參數列表},
  6     "success" : function(data) {
  7         if(data != null){
  8             // data operation
  9         }
 10     }
 11 });
    本質上都是經過XHR來進行先後端通訊的，好比說記事本案例中的查詢：

   

    實質上發送的 XHR 請求是這樣的：

  

    你也能夠用原生的 XHR 來請求一下，效果是同樣同樣的：

  1 var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
  2 request.onreadystatechange = function() { // 狀態發生變化時，函數被回調
  3     if (request.readyState === 4) { // 成功完成
  4         // 判斷響應結果:
  5         if (request.status === 200) {
  6             // 成功，經過responseText拿到響應的文本:
  7             console.log(request.responseText);
  8         } else {
  9             // 失敗，根據響應碼判斷失敗緣由:
 10             console.log(request.status);
 11         }
 12     } else {
 13         // HTTP請求還在繼續...
 14     }
 15 }
 16 // 發送請求:
 17 request.open('POST', '/baas/justep/account/queryAccount');
 18 request.send('{p: "just test"}');
    本身實現 XHR 請求有多繁瑣，上述代碼已經體現得淋漓盡致了，先後端的小夥伴們要約定好請求的參數，萬一後端同窗一時興起一不注意改了後端接
口，你 send 過去的參數就報廢了。而 WeX5 定義了一套規則，對於普通數據庫的查詢能夠即時調用，若是你有更高要求，也能夠去自定義 action，WeX5
也提供先後端一體的解決方案。有興趣的同窗能夠看看官方文檔介紹：http://docs.wex5.com/net-develop-4/

後端交互

    與後端交互的時候，除了增刪改查以外，還有【保存】和【刷新】兩個操做。

保存：

Data.saveData(option) ——- 業務數據保存方法，向後端提交修改的數據，包括從Data數據

刷新：

Data.refreshData(option)  —- 業務數據刷新，會刺激從data級聯刷新
Data.open()  —- 加載數據行爲和refreshData一致，只是當Data.isLoaded()==false時執行數據加載
Data.loadNextPageData(option)  —- 加載下一頁的數據
Data.loadAllPageData(option)  —- 在分頁狀態加載全部數據
Data.loadPageData(pageIndex,option)  —- 分頁模式下加載第N頁數據，參數pageIndex指定須要加載的頁，limit!=-1時可使用
Data.loadData(data,append,parent,index)  —- 加載數據到Data

上面各方法的參數請參考API文檔，在此再也不贅述。

這些 API 也封裝了先後端交互以及數據綁定的操做，更新數據庫的同時能夠觸發前端界面的自動刷新，這也就是前幾章說的數據界面雙向綁定了。在數據
表格展現比較多的場合，雙向綁定纔是王道啊！

總結     本篇詳細介紹了數據組件的經常使用操做，包括數據的增刪改查、先後端交互的CRUD，不單有 WeX5 的手把手操做教學，也簡單分析了一下底層的實現。小 茄才疏學淺，文中如有不當之處，萬望指正！