JS对表格排序(支持对序号,数字,字母,日期)
2013-12-29 18:02
597 查看
JS对表格排序(支持对序号,数字,字母,日期)
前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSortTable/1.0/demo/index.html 但是看了下他们的JS源码 有点复杂 所以自己试着写了一个简单点的,同样也能实现相应的功能,且相对于他们来讲 多添加了一个"按日期排序的功能" , 目前对日期的格式 支持两种格式:一种是2013/12/29 另外一种是:2013-12-29 。其他的日期未做处理,其实对表格排序 特别对字母排序刚开始有点纠结,看了下kissy组件源码 感觉他们那样处理有点复杂 所以自己也是google下 发下JS有一种方法可以比较本地的字母的方法 ----- localeCompare。
什么是localeCompare?
根据官方定义: 确定两个字符串在当前区域设置中是否相等。(当然字母可以转换成字符串进行比较)。
语法如下:
stringVar.localeCompare(stringExp[, locales][, options]) 。
stringVar
必需。 要比较的第一个字符串。 这可能是 String 对象或字符串文本。
stringExp
必需。 要比较的第二个字符串。
locales
可选。 包含一种或多种语言或区域设置标记的区域设置字符串数组。 如果包含多个区域设置字符串,请以降序优先级对它们进行排列,确保首个条目为首选区域位置。 如果省略此参数,则使用 JavaScript 运行时的默认区域设置。
options
可选。 包含指定比较选项的一个或多个特性的对象。
下面可以先来看看效果吧!
View Code
Demo下载
前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSortTable/1.0/demo/index.html 但是看了下他们的JS源码 有点复杂 所以自己试着写了一个简单点的,同样也能实现相应的功能,且相对于他们来讲 多添加了一个"按日期排序的功能" , 目前对日期的格式 支持两种格式:一种是2013/12/29 另外一种是:2013-12-29 。其他的日期未做处理,其实对表格排序 特别对字母排序刚开始有点纠结,看了下kissy组件源码 感觉他们那样处理有点复杂 所以自己也是google下 发下JS有一种方法可以比较本地的字母的方法 ----- localeCompare。
什么是localeCompare?
根据官方定义: 确定两个字符串在当前区域设置中是否相等。(当然字母可以转换成字符串进行比较)。
语法如下:
stringVar.localeCompare(stringExp[, locales][, options]) 。
stringVar
必需。 要比较的第一个字符串。 这可能是 String 对象或字符串文本。
stringExp
必需。 要比较的第二个字符串。
locales
可选。 包含一种或多种语言或区域设置标记的区域设置字符串数组。 如果包含多个区域设置字符串,请以降序优先级对它们进行排列,确保首个条目为首选区域位置。 如果省略此参数,则使用 JavaScript 运行时的默认区域设置。
options
可选。 包含指定比较选项的一个或多个特性的对象。
下面可以先来看看效果吧!
/** * JS对表格排序(支持按序号,日期,字母,数字排序)。 * @constructor {KSortTable} * @date 2013-12-26 * @author tugenhua * @email 879083421@qq.com */ function KSortTable(options) { this.config = { tableElem : '.J_table', //表格容器 sortableElem : '.sortable', // 点击对象 callback : null // 排序好后的回调函数 }; this.cache = { trArrs : [] // 存放tbody下的所有tr }; this.init(options); } KSortTable.prototype = { constructor : KSortTable, init: function(options){ this.config = $.extend(this.config,options || {}); var self = this, _config = self.config, _cache = self.cache; $(_config.sortableElem).each(function(index,item){ $(item).unbind('click'); $(item).bind('click',function(e){ var tagParent = $(this).closest(_config.tableElem), tagAttr = $(this).attr("data-sorttable"); // 判断table元素是否有属性 data-sorttable = 'true' 没有的话 不做任何事情 if($(tagParent).attr('data-sorttable') == 'true') { self._curStyle($(this)); var index = $(_config.sortableElem,tagParent).index($(this)); // 排序函数 self._sortMethod(index,tagAttr,tagParent,$(this)); } }); }); }, /* * 点击对当前添加样式 */ _curStyle: function(item) { var self = this; !$(item).hasClass('st-active') && $(item).addClass("st-active").siblings().removeClass("st-active"); if(!$(item).hasClass('data-reverse')) { $(item).addClass('data-reverse'); }else { $(item).removeClass('data-reverse'); } }, /* * 排序方法 做了type的判断 * 目前暂支持 数字 字符串 日期的比较 */ _sortMethod: function(index,tagAttr,tagParent,tagElem) { var self = this, _config = self.config, _cache = self.cache; var tbody = $(tagParent)[0].tBodies[0]; for(var i = 0, ilen = tbody.rows.length; i < ilen; i++) { _cache.trArrs[i] = tbody.rows[i]; } if(tagAttr == 'number') { _cache.trArrs.sort(function (td1, td2){ if($(tagElem).hasClass('data-reverse')) { return td1.cells[index].innerHTML - td2.cells[index].innerHTML; }else { return td2.cells[index].innerHTML - td1.cells[index].innerHTML } }); }else if(tagAttr == 'string') { _cache.trArrs.sort(function(td1,td2){ var str1 = td1.cells[index].innerHTML, str2 = td2.cells[index].innerHTML; if($(tagElem).hasClass('data-reverse')) { return str1.localeCompare(str2); }else { return str2.localeCompare(str1); } }); }else if(tagAttr == 'date') { _cache.trArrs.sort(function (td1, td2){ var str1 = td1.cells[index].innerHTML, str2 = td2.cells[index].innerHTML; if($(tagElem).hasClass('data-reverse')) { return Date.parse(str1.replace(/-/g,'/')) - Date.parse(str2.replace(/-/g,'/')); }else { return Date.parse(str2.replace(/-/g,'/')) - Date.parse(str1.replace(/-/g,'/')); } }); } //把排序后的tr 重新插入tbody for(var j =0; j < _cache.trArrs.length; j++ ) { tbody.appendChild(_cache.trArrs[j]); } // 排序完 回调 _config.callback && $.isFunction(_config.callback) && _config.callback(); } }; /* JS初始化 */ $(function(){ new KSortTable({}); });
View Code
Demo下载
相关文章推荐
- 对表格按日期或数字或字母进行排序的js
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- 改进jquery.tablesorter.js 支持中文表格排序
- jquery tablesorter.js 支持中文表格排序改进
- js/jq 数组去重,数组(数字/字母)排序,json合并
- JS实现table表格数据排序(可支持动态数据+分页效果)
- 常用正则表达式及JS中验证文本框中文、数字、字母、日期
- JavaScript对表格或元素按文本,数字或日期排序的方法
- flex DataGrid按数字顺序,字母,日期顺序排序
- JS表格排序(支持正向,逆向,以及类型判断)
- JavaScript对表格或元素按文本,数字或日期排序的方法
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- js数组排序,根据数组中对象的某一属性进行排序 支持数字和字符串的排序,也支持按两个属性进行排序
- jquery tablesorter.js 支持中文表格排序改进
- js表格排序实例分析(支持int,float,date,string四种数据类型)
- js表格排序(支持int,float,date,string四种数据类型)
- tablesorter.js表格排序使用方法(支持中文排序)
- js表格排序实例分析(支持int,float,date,string四种数据类型)
- js 表格排序 支持 中英文 , 可选择不排序的行