js高级表格排序 教程&使用方法

2007-04-13 06:43 | Army

大致看了下以前几位达人的写的东西,还有些不完善的地方,最近研究Ajax,发现了一些好东西,写篇心得出来~

这个是由Nicholas C. Zakas的例子改写而来,高效易读且兼容,增加了对图像等其它非基本类型的支持。接口易用性也很方便,即使不懂js的人也能轻松使用,而且也很灵活,不在表格上锁死,页面上任意一个地方都能通过id调用来对其排序。

源代码请往下翻。如果想研究里面的东西的,我也写了比较详尽的注释以便阅读,另外再阐述下相关的算法。

使用方法:
源码无需任何修改,直接复制即可,建议放在head区,最好单独存一个js文件然后在head区引用进来。
然后为每个要排序的表格设置一个id,比如此例中的tb_1。记得这个table需要thead和tbody元素,否则dom节点解析会出错。thead里放一行标题,建议用th,然后为每个th加入以下属性:onclick="sortTable('tb_1', *)" style="cursor:pointer;",第2个style是为了让鼠标指上去发生变化(变成手指),第1个是点击事件。
其中tb_1即是这个table的ID,紧随的*符号是列号,第1个th就用0,第2个用1……以此类推。默认的这种属性是按字母排列的,如果这列是整数排列的话请加入第3个参数'int',就像这样:onclick="sortTable('tb_1', *, 'int')" style="cursor:pointer;",如果带有小数请用参数'float',如果是日期请用'date'。
另外不是以上类型的比较时——比如图片排序——请在每个图片前加入隐藏div域,例子请看本例,隐藏div的方法是将它设置display:hidden;即可。这样图片便按照隐藏div域里的文字内容排序。

想研究代码的人读下思想:
基本注释都很完善了。设置id的目的就是为了在点击标题发生事件时传入这个table的id参数,在js里获取这个id从而找到这个table的dom节点,然后通过相应节点访问方法把每行tr的指针存入一个数组,对数组进行排序。值得注意的是排完顺序的数组不是直接把tr指针写入文件,这样会大大增加开销;而是创建了一个文档碎片放入排好顺序的内容后在appand到tbody上。注意这里数组存的是tr节点,由于节点都是指针引用,因此可以直接附上而无需先删除原有tr再增加了。
还值得一说的就是数组的sort方法,它接受一个函数参数,用这个可以指定排序方法。这个参数很神奇,我也是第一次看到这种方式的调用,好用且古怪的感觉……

例子,这里借用了FF9的一个表格:

代码 英文名 日文名 作用 Gil
EC
1
Potion ポーション 平时回复100HP,战斗时回复150HP 50
ED
2
Hi-Potion ハイポーション 平时回复300HP,战斗时回复450HP 200
EE
3
Ether エーテル 平时回复100MP,战斗时回复150MP 500
EF
4
Elixir エリクサー 单体HP MP全回复 0
F0
5
Phoenix Down フェニックスの尾 复活,治愈战斗不能状态 150
F1
6
Echo Screen やまびこ草 治愈沉默状态 50
F2
10
Soft 金の针 治愈石化状态 100
F3
7
Antidote 毒消し 治愈猛毒状态 50
F4
8
Eye Drops 目药 治愈黑暗状态 50
F5
11
Magic Tag おふだ 治愈僵尸状态 150
F6
13
Vaccine ワクチン 治愈病毒状态 100
F7
6
Remedy 万能药 治愈所有不良状态(除僵尸,发狂状态) 300
F8
12
Annoyntment 迷惑チン 治愈迷惑效果 150
F9
15
Phoenix Pinion フェニックスの羽 治愈战斗不能状态,只能战斗中使用.给Eiko(エーコ)装备能学会不死鸟能力 300
FA
14
Dark Matter ダークマター 当饰品装备,力+3\魔力+2.战斗中使用固定伤害9999 0
FB
14
Gysahl Green ギザールの野菜 治愈发狂,只限战斗使用.在地图画面有陆行鸟脚印的地方可以唤出陆行鸟 80
FC
16
Dead Pepper デッドペッパー 陆行鸟挖隐藏宝物,飞上空中花园时需要,战斗中使用对敌伤害:数量*30 0
FD
17
Tent テント 帐篷,在平原或记录点召唤mog使用,恢复全体一半HP、MP.战斗中使用对敌附加各种不良状态 800
FE
12
Ore 原石 恢复少量HP,只能在战斗中使用.是合成其他宝石的重要材料,是完成精灵事件的必须道具 0