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
我的代码里这里的列是动态生成的,所以我是这么处理的:
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是动态创建列
这样生成的动态列就可以在前台正确的进行数值排序了