YUI3的DataTable資料排序查詢

標籤：des   style   blog   color   os   資料   

YUI3的DataTable組件本身支援資料排序，只要在定義列的時候加上：sortable: true就可以了

這裡我們要解決的首先是遠程排序問題

遠程排序就是所有資料進行排序，而不是表格本身預設的點擊後在當頁進行排序

這個我們可以通過DataTable組件的sort方法處理

例如：

        table.after(‘sort‘, function(e) {            var page = _getCurrentPage();            var key = _getCurrentKey();            doSearch(key, page);        });    

這樣在點擊了表頭的排序後，可以調用doSearch方法

doSearch可以這樣寫

    var doSearch = function(key, page, clearsort) {        var param = _getParam();        var field = ‘‘;        var asc = true;        if (clearsort == true) {            table.set(‘sortBy‘, ‘‘);        }        else {            var sort = table.get(‘sortBy‘);            if (sort != null && sort[0] != null) {                for (var p in sort[0]) {                    field = p;                    asc = sort[0][p] == 1 ? true : false;                }            }        }        var configuration = {            method: ‘POST‘,            data: Y.mix({ key: key, page: page, sort: field, asc: asc, method: ‘search‘}, param),            on: {                complete: function(o) {                    var data = Y.JSON.parse(o.data.responseText);                    table.set(‘data‘, data.items);                }            }        };        var io = new Y.IO({ emitFacade: true, bubbles: true });        io.send(‘Search.ashx‘, configuration);    };

這裡_getParam方法是擷取使用者選擇的查詢參數，clearsort參數是當使用者點擊了重新整理、查詢等按鈕時，要清除掉排序標記
後台代碼根據擷取的參數進行排序查詢

我在實際開發中遇到一個問題：當後台返回的某一列資料類型是string，但裡面又有數值資料時，如果要依據數值的大小排序如何處理

實際上，後台在進行sql查詢時已經通過sql處理過了，將此列中能轉換為數值的先轉換為數值型排序，不能轉換的變為最小值（我的邏輯裡最小值就當0處理了），然後先根據數值結果排序，再根據本身文本排序，但問題是，資料轉到前台後，此列的排序仍然是錯誤的

而且，根據不同的瀏覽器，這個排序結果還異常的不同，有的瀏覽器是按照返回結果進行行顯示的，有的是混亂的順序

我嘗試讓DataTable不進行排序事件的預設執行命令的方法無效，本來考慮在後台將能轉成數值型的在輸出JSON時轉成數值型

最後還是採用了這個辦法：

DataTable的列定義時支援自訂排序函數，我們這麼寫：

   var sortfunc = function(a, b, desc) {        var sort = table.get(‘sortBy‘);        var field;        for (var p in sort[0]) {            field = p;        }                var avalue = a.get(field);        var bvalue = b.get(field);        var order;        if (!isNaN(avalue) && !isNaN(bvalue)) {            order = parseFloat(avalue) > parseFloat(bvalue) ? 1 : -1;        }        else {            order = avalue > bvalue ? 1 : -1;        }        return desc ? -order : order;    };

在排序時進行處理，先判斷是否能轉換成數值型，能的話用數值型排序，不能用預設排序

然後在定義的列裡，指定該列的sortFn為sortfunc

My Code裡這裡的列是動態產生的，所以我是這麼處理的：

        var newcolumn = eval(data.header);        newcolumn.each(function(k, v) {　　　　　　　k.sortFn = unsortfunc;
        });......        table = new Y.DataTable({            columns: newcolumn.concat(columns),            scrollable: ‘x‘,            width: ‘100%‘,            data: []        }).render(‘#tablearea‘);

其中columns是固定列，newcolumn是動態建立列
這樣產生的動態列就可以在前台正確的進行數值排序了