本文是【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 的手把手操作教學，也簡單分析了一下底層的實現。小 茄才疏學淺，文中若有不當之處，萬望指正！