当前位置:Gxlcms > JavaScript > JavaScriptTable排序2.0(更新)_javascript技巧

JavaScriptTable排序2.0(更新)_javascript技巧

时间:2021-07-01 10:21:17 帮助过:5人阅读

近来还是那么忙,趁五一更新一下程序吧。
这个版本主要增加和改进了以下东西:
1,对字符串改用localeCompare来比较;
2,一次排序中能使用多个排序对象(用于值相等时再排序);
3,修正一些发现的问题;
4,改进程序结构,个人觉得是更灵活更方便了;
5,增加bool类型比较;
6,添加attribute/property的内容;
7,修正ie6/7的radio/checkbox状态恢复bug;
8,增加自定义取值函数。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

打包代码
基本步骤

1,把需要排序的行放到tbody中(程序会直接取tbody的rows);

2,把排序行放到一个数组中;

this.Rows = Map(this.tBody.rows, function(o){ return o; });

3,按需求对数组进行排序(用数组的sort方法);

this.Rows.sort(Bind(this, this.Compare, orders, 0));

4,用一个文档碎片(document.createDocumentFragment())保存排好序的行;


var oFragment = document.createDocumentFragment();
forEach(this.Rows, function(o){ oFragment.appendChild(o); });

ps:文档碎片并不是必须的,但建议使用,大量dom操作时使用文档碎片会更有效率。

5,把文档碎片插入到tbody中。

this.tBody.appendChild(oFragment);


程序说明

【排序函数】

排序就不得不说数组中sort这个方法,手册是这样介绍的:返回一个元素已经进行了排序的 Array 对象。也就是对一个数组进行排序,很多跟排序相关的操作都用到这个方法。

默认按照 ASCII 字符顺序进行升序排列,使用参数的话可以自定义排序方法,程序的Compare程序就是用来自定义排序的。
一般来说排序函数会有两个默认参数分别是两个比较对象,程序中根据需要在调用Compare时Bind了两个参数,所以会有4个参数。
要注意,排序函数必须返回下列值之一:
负值,如果所传递的第一个参数比第二个参数小。
零,如果两个参数相等。
正值,如果第一个参数比第二个参数大。

在取得比较值(后面说明)之后就进行值的比较。
程序中如果是字符串,会用localeCompare获取比较结果,否则就直接相减得到比较结果:

result = order.Compare ? order.Compare(value1, value2) ://使用自定义排序
typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);

如果Desc属性是true(倒序排序),那么在result的基础上乘以-1就能得到相反的排序了:(order.Down ? -1 : 1) * result


【获取比较值】

程序中是根据排序对象和GetValue方法从每个tr中获取比较值的。
首先通过Index(td索引)和Attri(属性)获取对应的值。
如果没有适合的属性放要比较的值的话,可以给td设一个自定义属性来放这个值(如例子中的_ext)。
对于在html中设置的自定义属性,ie可以用[x]和getAttribute来取,而ff就只能用getAttribute来获取(后面会详细说明)。
所以只需考虑ff的情况就行了,程序中用in来判断这个属性是否可以用[x]方式获取:

var td = tr.getElementsByTagName("td")[order.Index]
, at = order.Attri, data = at in td ? td[at] : td.getAttribute(at);

如果in运算是true,那么可以用关键词方式取值,否则用getAttribute来取。
取得值之后就进行比较值转换,这里会把日期用Date.parse转化成整数的形式方便比较:

switch (order.DataType.toLowerCase()) {
case "int":
return parseInt(data) || 0;
case "float":
return parseFloat(data) || 0;
case "date":
return Date.parse(data) || 0;
case "string":
default:
return data.toString() || "";
}

要注意Date.parse的参数必须符合js的日期格式(参考这里)。
ps:如果觉得添加自定义属性不符合标准,可以考虑放在title之类的属性中。


【attribute/property】

在获取比较值的时候会用in来判断是否可以用[x]方式,其实是判断该属性是属于attribute还是property。
那attribute和property到底是什么呢,有什么区别呢?这个或许很多人都没留意,或许认为是同一个东西。
要明确attribute和property是不同的东西就要先知道它们分别是什么,这个很难说得清,举些例子就明白了。
这里我们先以ff为标准,后面再说ie的区别。以div为例,查查网页制作完全手册,会找到它有以下属性:
ALIGN align
CLASS className
ID id
TITLE title
... ...
其中第一列就是attribute,第二列就是property。
attribute是dom元素在文档中作为html标签拥有的属性,property就是dom元素在js中作为对象拥有的属性。
例如在html中dom作为页面元素应该直接用class属性,对应在js中作为dom对象就必须用className属性。
由于attribute是不分大小写的,这使得大部分的attribute和property看起来会一样,使人误以为同一个东西(当然ie的责任也很大)。
还不相信的话可以用ff看看下面的例子:

test