Data組件基礎02：規則、數據遍歷查找 · wex5

## Data組件基礎02：規則、數據遍歷查找 **一、Data組件的規則** Data組件提供了規則執行的機制，在data上可以定義：計算、只讀、必填、約束等規則，規則都是以表達式的形式給出，表達式計算結果為true時只讀、必填生效，約束表達式計算結果=true時數據有效 Data只讀上下文包括： $model : 前端model對象 $data : data組件對象表達式上下文包括： $model : 前端model對象 $data : data組件對象 $row : 計算的行對象 $rowID : 計算的行ID $col : 列名注：對于整個data只有只讀的規則，必填和約束規則只有數據進行修改后才會觸發 [![rule](https://box.kancloud.cn/2015-09-23_560181fe09e7a.png)](https://box.kancloud.cn/2015-09-23_560181fe09e7a.png) <rule>  <readonly <expr >true</expr> </readonly>  <col name="fString"> <required> <expr>true</expr> <message>請填寫fString</message> </required> </col>  <col name="fInteger"> <constraint> <expr>val('fInteger')>50</expr> <message>Integer必須大于50</message> </constraint> </col>  <col name="fDecimal"> <readonly> <expr>true</expr> </readonly> <calculate>  <expr>$model.slaveData?$model.slaveData.sum('fDecimal',$row):0</expr> </calculate> </col> </rule> Data組件的約束規則其實是提供了擴展能力的(如：email等)，有興趣的可以研究一下“/UI2/system/components/justep/data/js/rules.js” 后續的進階篇中會作介紹 **二、數據遍歷和查找** Data組件數據遍歷方式有兩種，一種使用游標滾動方式，另一種使用Data.each()函數。下面詳細介紹這兩種方式的差異和使用方式游標滾動方式，這種方式由于刺激了當前行的變化，所有綁定當前行的數據感知組件都會進行變化渲染相關API： Data.getFirstRow();——-獲取第一行 Data.getLastRow();——–獲取最后一行 Data.next();————–游標移動到下一行 Data.pre();—————游標移動到上一行 Data.first();————–游標移動到第一行 Data.last();—————游標移動到最后一行 Data.to(row);————-游標移動到指定行全數據游標滾動數據遍歷代碼實例： var data = this.comp('fruitData'); var lRow = data.getLastRow(), row, names = []; data.first(); do { row = data.getCurrentRow(); names.push(data.val('fName')); data.next(); } while (lRow != row); alert(names); Data.each(callback)遍歷，這種方式不刺激游標變化，不刺激感知組件更新，性能比游標方式高很多 Data.each(callback)函數參數callback是遍歷的回調函數，執行時給定的this是行對象 callback = function(param){ param.data;//遍歷的data對象 param.row;//遍歷到的行對象 param.index;//行的索引 param.cancel;//是否結束遍歷，當修改cancel為true時結束遍歷 } 全數據each遍歷代碼實例： var data = this.comp('fruitData'); var names = []; data.each(function(param){ names.push(param.row.val('fName')); }); alert(names); Data組件上還提供了一個函數eachAll，這個函數主要用于遍歷從Data所有數據，在主從情況下的從Data上使用each遍歷數據行只能遍歷到和當前主數據相關的從數據行，eachAll的使用和each一致這里就不再介紹了。關于數據查找Data組件提供了find函數來支持 find函數參數： cols：列名列表 values：值列表 first：是否只是返回第一條，即查找到第一條符合條件的數據就返回，默認值：false caseInsensitive：匹配時忽略大小寫，默認值：false partialKey：模糊匹配，即數據中包含需要匹配字符就算匹配成功，默認值：false all： data所有數據查找，當是從Data時all==false只查找和主關聯的行數據，默認值：false find函數根據cols和values匹配查找返回符合行數組，當沒有匹配數據時返回[]數組，如：cols=[‘fName’],value=[‘蘋果’]查找的就是Row.val(‘fName’)===’蘋果’的行數據查找代碼實例： //查找fID中包含"E"或者"e"的第一條數據 var rows = this.comp('fruitData').find(['fID'],['e'],true,true,true); if(rows.length<=0) alert('沒有符合條件數據'); else alert(rows[0].val('fName')); //查找fName="蘋果"，fWeight=100的數據 var rows = this.comp('fruitData').find(['fName','fWeight'],['蘋果',100]); if(rows.length==0) alert('沒有符合條件數據'); 當有其他數據查找需求時可以使用each函數實現 **三、聚合運算** Data組件上提供了常用的統計函數，count、sum、avg、min、max這些函數都是基于前端data數據的，沒有加載到前端data中的數據不包括在計算中，注：返回的數值精度受js的number精度影響這些函數使用都很簡單，所有函數上都有一個filterCallback參數，可以傳入過濾數據的回調方法，filterCallback需要返回boolean，為true時行有效，回調函數給出參數event，{‘data':data對象，row：行}，當沒有給出filterCallback參數時統計data的全部數據前端統計函數代碼實例： //統計mainData中記錄數 var count = this.comp('mainData').count(); //統計mainData中fName姓“李”的記錄數 var count = this.comp('mainData').count(function(ev){ var v = ev.data.getValue('fName',ev.row); return v.indexOf('李')==0; }); //統計mainData中年齡fAge合計 var sum = this.comp('mainData').sum('fAge'); //統計mainData中fName姓“李”的年齡fAge合計 var sum = this.comp('mainData').sum('fAge',function(ev){ var v = ev.data.getValue('fName',ev.row); return v.indexOf('李')==0; }); //統計mainData中年齡fAge平均值 var avg = this.comp('mainData').avg('fAge'); //統計mainData中fName姓“李”的年齡fAge平均值 var avg = this.comp('mainData').avg('fAge',function(ev){ var v = ev.data.getValue('fName',ev.row); return v.indexOf('李')==0; }); //統計mainData中年齡fAge最小值 var min = this.comp('mainData').min('fAge'); //統計mainData中fName姓“李”的年齡fAge最小值 var avg = this.comp('mainData').min('fAge',function(ev){ var v = ev.data.getValue('fName',ev.row); return v.indexOf('李')==0; }); //統計mainData中年齡fAge最大值 var min = this.comp('mainData').max('fAge'); //統計mainData中fName姓“李”的年齡fAge最大值 var avg = this.comp('mainData').max('fAge',function(ev){ var v = ev.data.getValue('fName',ev.row); return v.indexOf('李')==0; }); 除了前端的統計函數，Data組件也支持有后端提供統計結果，通過Data組件刷新時返回后端統計結果，統計值使用userdata方式返回（關于userdata將在第四節介紹） data組件提供Data.getAggregateValue(name)獲取后端返回統計值，name為統計值定義的名稱案例展示（DataTables組件footer顯示前后臺統計結果，注意：案例中使用的是BizData） [![3](https://box.kancloud.cn/2015-09-23_560181fe69911.png)](https://box.kancloud.cn/2015-09-23_560181fe69911.png)[![count2](https://box.kancloud.cn/2015-09-23_560181feca6cf.png)](https://box.kancloud.cn/2015-09-23_560181feca6cf.png)[![sum1](https://box.kancloud.cn/2015-09-23_560181ff37a93.png)](https://box.kancloud.cn/2015-09-23_560181ff37a93.png) 運行效果： [![4](https://box.kancloud.cn/2015-09-23_560181ff94942.png)](https://box.kancloud.cn/2015-09-23_560181ff94942.png) **四、擴展數據** Data組件不光可以加載行列數據，同時也提供了加載擴展數據的能力，這就是data組件userdada擴展數據的機制。在data組件加載的數據上增加userdata數據， json數據格式如下： { "@type" : "table", "rows" : [...], "userdata" : { "DEMO_TABLE1Count" : 148 } } 同時提供了相關的API： Data.getUserData(name,row);—————-獲取擴展數據，name為擴展數據的名稱，row為指定的行，當沒有指定row時為data的擴展數據 Data.setUserData(name,value,row);———-設置擴展數據上面介紹的后端統計就是通過這個機制實現的