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的一个表格:
这个是由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 |