Yahoo!用戶界面博客（YUIBlog）

銳2 DataTable的表尾統計

YUI 2 DataTable中做了很多。 但它不會做的事情之一是任何一個表尾，你可能期望找到總計，平均值或其他匯總數據。 所以我擴展的DataTable添加數字數據的匯總數據。

得到它去

首先，使用它：你需要一些代碼github上 -有三個js文件，您需要所有YUI的DataTable的js文件後，在頁面上。 和你可能想改變命名空間-我們使用YAHOO.LPLT.DataTable作為擴展YAHOO.widget.DataTable 。 下面這些文件，我將解釋多一點。

設置您的DataTable正常，但有三樣東西，你需要做的就是總結工作：

1. 確保您的數據源指定要匯總的任何領域的“數字”的解析器，特別是如果你做內聯單元格編輯：

     myDataSource.responseSchema = {領域：
       {鍵：“量”，解析器：“數”}
       / *等......  * /
    ]};
   

2. 新增配​​置的columnStats的關鍵價值：在您的列定義數組的真實：

     VAR myColumnDefs = [
        {鍵：“量”的標籤：“數量”，columnStats：真} 
        / *等......  * /
    ;
   

   對於列，你想總結。 （您的'身份證'列的總數可能是不是非常有幫助！）。
3. 告訴DataTable的統計數據計算：

    myDataTable =新YAHOO.LPLT.DataTable（“exampleEl”
        myColumnDefs， 
        myDataSource， 
        {columnStats：{：真實，統計：['總和']}}
    ）;
   

   這是最簡單的方式來配置列統計，但可以添加額外的統計數據，自定義標籤，更多。

還有一個例子github上玩。

幾點：

• 頁腳會改變你的表。 所以，如果你顯示/隱藏列，他們周圍移動，添加新的，添加/刪除行，排序，或使用內聯的單元格編輯器，頁腳會更新相應的UI和統計。
• 您可以添加許多行之軀，只要你喜歡，一排每個統計。 因為它的立場，你可以有平均數，中位數，總和，最小值，最大值，範圍，標準偏差，方差，或varianceUnbiased。 配置項的“統計”是一個數組：只需添加你想這個陣列（如stats: ["min", "median", "stdev"] ）的統計。
• 表格頁腳將使用該列指定任何格式化。
• 如果你有一個paginator，你可以選擇是否統計顯示整個表或只是當前可見頁面。 添加pagedTotals: true的columnStats反對頁的統計。
• '統計'也可以在config對象數組包括對象的文字，與鍵“標籤”和“新生力量”。 fn是函數將計算統計 - 無論是像'分'或一個函數，返回一個數字的字符串。 在GitHub上的示例顯示如何，你可以做兩列“加權總”的使用數據。

實際的擴展代碼

主要文件，YAHOO_DataTable_colStats.js，增加了幾個保護性質的DataTable，一些受保護的方法，和兩個公共方法，這將重新計算和重繪表格頁腳colStatsRefresh ， colStatsGetRecordSet ，它返回所有數組記錄，或者只是那些看得見，取決於價值pagedTotals 。 第一可能是有用的，如果你進行更改的表不火有用的事件（例如直接改變底層的Recordset中的數據）;第二，如果你使用自定義匯總函數。

YAHOO_DataSource_patch.js增加了一個， parseField(key, value)到數據源的方法。 這是必要的，當你有數值數據框內嵌單元格編輯器，編輯器返回一個字符串，這是不解析自動，所以不能添加。 parseField提供在DataSource指定的解析器的訪問，編輯數據轉換。

YAHOO_util_Stats.js提供了一個的獨立YAHOO.util.Stats類包裝（排序）陣列的數字數據，並提供匯總統計。 它只依賴YAHOO.lang。 實例是一個YAHOO.util.Stats保持DataTable中的每一列是要總結，和緩存更難數學的一些，以提高性能。 統計陣列（'分'，'中位數'等），通過字符串方法是的YAHOO.util.Stats類，所以你可以很容易地添加額外的加入原型。 注意：雖然他們只有'他們的'列的數據的訪問。

最後

我敢肯定，這是行不通的，滾動的DataTable，所以即使我沒有嘗試過！ 但是，如果您發現任何問題或有想法，做請他們放在github上的問題跟踪。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！