首页 > 代码库 > YUI3的DataTable数据排序查询

YUI3的DataTable数据排序查询

2024-07-11 12:49:28   215人阅读

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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/a.get(field);        var bvalue = http://www.mamicode.com/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

我的代码里这里的列是动态生成的，所以我是这么处理的：

        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是动态创建列
这样生成的动态列就可以在前台正确的进行数值排序了


联系
我们