谈谈排序表格

2005-06-30 09:34 | aptx

名称	装备	范围	攻击力	价格	场所
パチンコ	〇 〇 〇 Ｘ	１体	5	30	マド
ボウガン	〇 〇 〇 Ｘ	１体	12	80	マド
ショットガン	〇 〇 〇 Ｘ	１组	22	180	マド
リベットガン	〇 〇 〇 Ｘ	１体	29	280	エルニニョ
Ｗチェーンソー	〇 Ｘ 〇 Ｘ	１体	38	430	エルニニョ
しばやき砲	〇 〇 〇 Ｘ	１体	48	600	ハトバ
４４マグナム	〇 〇 〇 Ｘ	１体	61	850	サースティ,タイシャー
ブーメランスパナ	Ｘ 〇 Ｘ Ｘ	１体	55	1300	ハトバ
ミニバルカン	〇 〇 〇 Ｘ	１组	75	2000	デルタ.リオ,タイシャー
ひぼたんのドス	〇 Ｘ 〇 Ｘ	１体	80	1750	バザースカ
電撃ムチ	Ｘ Ｘ 〇 Ｘ	１体	89	2500	非卖品
バーナーガン	〇 〇 〇 Ｘ	１体	102	2900	デルタ.リオ
ちょうおんぱ銃	〇 〇 〇 Ｘ	１体	110	3400	イスラポルト
さんでっぽう	〇 〇 〇 Ｘ	１体	115	3800	イスラポルト
ブラストハンマー	Ｘ Ｘ 〇 Ｘ	１体	130	5000	モロ.ポコ东面的野外商店
ランボーの弓矢	〇 Ｘ 〇 Ｘ	１体	125	4400	非卖品
ＳＭＧグレネード	〇 〇 〇 Ｘ	１组	118	4990	タイシャー
フリーズガン	〇 〇 〇 Ｘ	１体	133	6000	タイシャー
レーザーライフル	〇 Ｘ 〇 Ｘ	１体	148	7700	モロ.ポコ,デスクルス
オニぼうちょう	〇 Ｘ 〇 Ｘ	１体	160	8800	デスクルス
ニトロシャワー	Ｘ Ｘ 〇 Ｘ	全体	175	16000	非卖品
ガルシアガン	〇 Ｘ 〇 Ｘ	１体	190	12000	非卖品
リモコンスパナ	Ｘ 〇 Ｘ Ｘ	１体	145	9000	デスクルス
ロケットパンチ	〇 Ｘ 〇 Ｘ	１体	210	17550	人間ビレッジ,デスクルス
ビームブリザード	〇 〇 〇 Ｘ	１组	195	2000	メルトタウン
ブロイラーボンベ	Ｘ Ｘ 〇 Ｘ	１组	240	-	非卖品
ハウリング砲	〇 〇 〇 Ｘ	１体	235	25000	人間ビレッジ
ＴＮＴパラノイヤ	Ｘ Ｘ 〇 Ｘ	全体	220	28800	非卖品
シザーハンド	Ｘ 〇 〇 Ｘ	１体	211	18000	非卖品
ラッシャーマイク	〇 〇 〇 Ｘ	１体	158	8000	非卖品
水中銃	〇 〇 〇 Ｘ	１体	95	1200	非卖品
オメガブラスター	〇 〇 〇 Ｘ	１体	250	29800	非卖品
レーザーバズーカ	〇 〇 〇 Ｘ	全体	225	30000	非卖品
ポチガン	Ｘ Ｘ Ｘ 〇	１体	35	250	エルニニョ
ポチバーナー	Ｘ Ｘ Ｘ 〇	１体	55	480	サースティ,イスラポルト
ポチバルカン	Ｘ Ｘ Ｘ 〇	１组	75	1100	バザースカ,イスラポルト
ポチバズーカ	Ｘ Ｘ Ｘ 〇	１体	90	1550	デルタ.リオ,イスラポルト
ポチレーザー	Ｘ Ｘ Ｘ 〇	１体	120	2400	スワン
ポチソニック	Ｘ Ｘ Ｘ 〇	１体	155	3900	タイシャー
ポチランチャー	Ｘ Ｘ Ｘ 〇	１组	160	5500	モロ.ポコ
ポチブリザード	Ｘ Ｘ Ｘ 〇	１体	200	7000	非卖品
ポチキャノン	Ｘ Ｘ Ｘ 〇	１体	235	15000	メルトタウン
ポチサンダー	Ｘ Ｘ Ｘ 〇	１组	190	10500	デスクルス
ポチウィング	Ｘ Ｘ Ｘ 〇	１组	205	16000	人間ビレッジ

记得有人曾经说过：“技术教程的最大受益者是谁？是编写者自己”。这句话给我的感触很深。做专题也好，写攻略也罢，或许自己所做的没有任何物质或精神上的回报，但是却在无形中提高着自己。

注意，此文主要谈谈思路和个别细节（不同的语言是不相通的，程序语言尤是如此。太多的东西都必须亲自深入研究才能领会），可能比较杂，不过有时间我会重新整理的。排序表格大体应该分为三个步骤：读取、排序、输出。所以我首先定义了一个SortTable类，然后又定义了3个静态方法，分别是SortTable.read()、SortTable.sort()、SortTable.output()，三个方法分别对应上述的三个步骤。

读取——SortTable.read()：所谓的表格排序其实是给表格某列单元格排序，然后再根据排好序后的原表格单元格所在的行数重新输出表格的HTML（这个地方不太好用语言描述，需要自己揣摩领悟）。在排序之前必须先把该列的单元格数据逐个读出来。这就会产生两个问题：

1. 表格内的数据很可能会分为两种，字符串型和数字型。并且两种数据很可能会混在一起。所以必须把它们分开并用两个数组分别存放
2. 我们需要的数据是单元格内的innerText，而不是innerHTML，FireFox是没有innerText的……

第一个没什么难的，代码如下

这里有一句比较特殊，那就是 StrTemp = StrTemp + "#" + i; ，这句的意思是取单元格的第一个字符然后加上这个单元格的行数，并用#作为分隔符。详细原因下面会提到。

第二个便是FireFox比较欠扁的地方了，对这种情况通常是创建一个Range对象，然后获取它的值

幸运的是，这是整个程序里唯一一个需要考虑兼容性的地方。

排序——SortTable.sort()：这里也有两点需要注意：

1. Array的sort方法有个局限性，就是它是把数组的元素作为字符来看待的。例如对于这种(3,5,2,4,8,23,18,13)数字数组，用sort排序之后结果会是(13,18,2,23,3,4,5,8)，而不是(2,3,4,5,8,13,18,23)。也就说，数字必须单独排序，（这就是为什么在读取单元格数据时要把字符串和数字分开装）。这里我用的冒泡法。

   

2. ArrStr[i] = ArrStr[i].match(re).toString().slice(1);这句可能不太好理解。对于这种句子，最好使用alert一步步的测试。如果随便alert一个ArrStr的元素，你会发现它们的结构都是这样的：字符串#数字。其中的字符串显然就是单元格中的数据，#后的数字则是这个单元格所在的行数。剩下的match(re).toString().slice(1)则是从这个字符串中提取#后的数字。这样一来就得到了排好序后的单元格所在的行数

   

输出——SortTable.output()：这个方法其实就是根据排好序后的单元格所在的行数输出表格HTML。值得一提的是直接往table里innerHTML是行不通的，所以这里使用一个span标签把table给包了起来，然后再往这个span里填充新表格的HTML

最后补充一下，此文不是教程，如果想根据此文就能读懂源码是很困难的（至少换我一定会是这样）。读懂源码方法只有一个，就是先抛开一切，用自己的思维去做一个排序表格。当对排序表格的原理有一定认识的时候再来看我的，就一定会有事半功倍的效果，也说不定此时我写的在你看来都成了废话了 ^^