Data組件基礎01：列、初始化加載狀態、行對象和游標 · wex5

## Data組件基礎01：列、初始化加載狀態、行對象和游標 **一、Data的xid** Data組件是前端model上的數據核心，xid是Data組件的唯一標識，它的命名規則必須符合JS變量命名規則，因為Data組件為簡化感知組件引用data的寫法直接在model上使用xid存放了Data的對象實例，這樣引用數據就可以使用model.xid的方式了，當然同樣也支持model.comp(xid)的常規寫法； <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="fruitData.ref('fName')"/> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="comp('fruitData').ref('fName')"/> 兩種寫法是等效的，但是顯然第一種方式更簡單直接 **二、Data的列** * Data組件的列定義列定義包括：name、type、label， name：列的唯一標識 type：列的數據類型，取自范圍：String、Integer、Long、Float、Double、Decimal、Boolean、Date、Time、DateTime label：列顯示名稱，當沒有定義時，label為name 另外Data組件上還有一個重要的屬性idColumn，用來指定Data數據中行ID的表示列，可以理解為關系型數據庫中表上定義的key關系 <div xid="fruitData" component="$UI/system/components/justep/data/data" idColumn="fID" autoLoad="true"> <column label="ID" name="fID" type="String"/> <column label="顯示名稱" name="fName" type="String"/> <column label="重量" name="fWeight" type="Double"/> <data> [{"fName":"蘋果","fID":"apple","fWeight":100}, {"fName":"梨","fID":"pear","fWeight":80}, {"fName":"西瓜","fID":"watermelon","fWeight":1800}, {"fName":"香蕉","fID":"banana","fWeight":3600}] </data> </div> 相關的屬性和API： ~~~ 屬性：? Data.defCols：存放列的定義信息 Data.idColumn ~~~ 代碼示例： var data = this.comp('fruitData'); var IDColDef = data.defCols[data.idColumn];//獲取ID列的定義 alert(data.idColumn+' label:'+IDColDef.label+',name:'+IDColDef.name+',type:'+IDColDef.type); ~~~ 取值賦值相關API: Data.getValue(col,row); Data.setValue(col,value,row); Row.val(col,value); ~~~ 獲取數據時會根據列定義進行數據的轉換，目前支持string—>Integer、Long、Float、Double、Decimal、Date、Time、DateTime轉化，當轉換失敗時返回Data.ErrorValue對象，通過ErrorValue.value可以獲取原值代碼示例： var data = this.comp('fruitData'); //給fWeight設置字符數據 data.setValue('fWeight','200'); var v = data.getValue('fWeight'); alert('fWeight:('+typeof(v)+')'+v); //給fWeight設置字符數據'abc'非有效的數值字符串 data.setValue('fWeight','abc'); v = data.getValue('fWeight'); alert('fWeight:'+v+','+v.value); [![dataJS1](https://box.kancloud.cn/2015-09-23_560180053d79c.png)](https://box.kancloud.cn/2015-09-23_560180053d79c.png)?[![dataJS2](https://box.kancloud.cn/2015-09-23_5601800b2803e.png)](https://box.kancloud.cn/2015-09-23_5601800b2803e.png) ~~~ 獲取列顯示名相關API： Data.label(col); Row.label(col); ~~~ <label bind-text="fruitData.label('fName')"/> ~~~ 獲取行ID相關API: Data.getRowID(row); Data.getValue(Data.idColumn); Row.getID(); ~~~ 代碼示例： //三種方式獲取行ID var data = this.comp('fruitData'); var v = data.getValue(data.idColumn); var crow = data.getCurrentRow(); var id1 = data.getRowID(crow); var id2 = crow.getID(); alert('rowid:'+id1+','+v+','+id2); * 列類型和規則的關系當列的type為Integer、Long、Float、Double、Decimal、Date、Time、DateTime時會增加數據格式的規則校驗； <div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label20"> <label class="x-label" bind-text="fruitData.label('fWeight')"/> <input component="$UI/system/components/justep/input/input" class="form-control x-edit" bind-ref="fruitData.ref('fWeight')"/> </div> fruitData的fWeight列type為Double，當輸入非數字時會出現錯誤提示 [![DataType](https://box.kancloud.cn/2015-09-23_5601800b7d8a8.png)](https://box.kancloud.cn/2015-09-23_5601800b7d8a8.png) * 列類型和input組件的關系列類型和Input組件同樣有著密切關系，不同類型會影響input的行為和展現，當列的type為Integer、Long、Float、Double、Decimal時，Input組件會自動加上輸入控制，只允許輸入數字類型；當列的type為Date、Time、DateTime時，Input組件會啟用日期時間選擇器進行數據修改 [![datetime](https://box.kancloud.cn/2015-09-23_56018011c90c6.png)](https://box.kancloud.cn/2015-09-23_56018011c90c6.png) **三、初始化加載狀態** Data組件上有兩個關于初始化加載狀態屬性：autoLoad、autoNew，表示當功能頁面打開后data組件的狀態，兩個屬性是互斥的；當autoLoad=true時，Data組件在model的onModelConstructing時執行open操作，當autoNew=true時，Data組件在model的onModelConstructing時執行newData操作；注：data定義的靜態數據需要autoLoad=true才進行加載，否則需要主動調用open方法加載 **四、Data的行對象** Data組件上的數據是二維表結構，即行列結構，上面介紹了列現在我們來看看行對象首先Data組件的數據存放在Data.datas上，Data.datas是可觀察的數組（關于可觀察的數組請查閱數據綁定的文章，這里我們就把他理解成簡單的數組），數組上的每一個項就是行。通過行上擴展parent和children，很輕松就擴展出了Tree型數據結構（關于data的tree我們后面文章再詳細介紹）。 [![rows](https://box.kancloud.cn/2015-09-23_560180123c6dc.png)](https://box.kancloud.cn/2015-09-23_560180123c6dc.png) 通過上圖我們能看到調試器中datas存放的行對象實例 ~~~ Data.Row常用API： Row.ref(col);---------獲取對應列的可觀察數據對象，主要使用在感知組件的bind-ref Row.val(col);---------獲取對應列的值，等價于Data.getValue(col,row) Row.label(col);-------獲取對應列的顯示名 Row.index();----------獲取行的索引號 Row.parent();---------獲取行的父 Row.children();-------獲取行的子 ~~~ **五、Data的數據游標** Data組件的游標指的就是Data組件的當前行，即：Data.currentRow，所有API和組件數據引用在沒有顯示指定行參數時使用的都是當前游標行 ~~~ 相關API： Data.getCurrentRow();---------獲取當前行 Data.to(row);-----------------滾動游標 Data.first();-----------------游標到首行 Data.last();------------------游標到末尾行 Data.next();------------------游標到下一行 Data.pre();-------------------游標到前一行 ~~~ 案例通過Data.getCurrentRow()指定list組件中當前行的樣式使用class：x-currentRow <div component="$UI/system/components/justep/list/list" class="x-list" data="fruitData"> <div class="x-list-template"> <div component="$UI/system/components/bootstrap/row/row" class="row" bind-css="{'x-currentRow':$object==$model.fruitData.getCurrentRow()}" style="padding: 6px 0;"> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fID')"/> </div> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fName')"/> </div> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fWeight')"/> </div> </div> </div> </div> 下圖為運行效果： [![row](https://box.kancloud.cn/2015-09-23_560180129730e.png)](https://box.kancloud.cn/2015-09-23_560180129730e.png)[![row1](https://box.kancloud.cn/2015-09-23_56018013056b7.png)](https://box.kancloud.cn/2015-09-23_56018013056b7.png)