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