【脚本共享】可以排序的Table控件，扩展较强。

在Javascript看到一个帖子 【分享】Table排序
做得不错，就依葫芦画瓢自己重写一遍。
采用动态创建和动态载入数据，这样扩展性加强，容易移植为Ajax客户端。

实际效果

样式表文件--ListView.css

1. /*--
2. 标题：可排序的表对象相关样式表
3. 设计：ZswangY37
4. 博客：http://blog.youkuaiyun.com/zswang
5. 日期：2008年10月19日
6. --*/
7. .ListView{border:1pxsolid#ebebeb;line-height:20px;font-size:12px;}
8. .ListViewtheadtd{background-color:#ebebeb;}
9. .ListViewtheada{text-decoration:none;color:#333;outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
10. .ListViewtd{padding:5px;}
11. .ListView.SortButton{padding:0005px;font-size:8px;color:#716F6C;}

公用函数脚本--Common.js

1. /*--
2. 标题：常规函数封装
3. 设计：ZswangY37
4. 博客：http://blog.youkuaiyun.com/zswang
5. 日期：2008年10月19日
6. --*/
7. if(typeofnamespace=="undefined")namespace=[];
8. namespace.push("Common");
10. $=document.getElementById;
12. functioncallScript(id,url,loaded,error){
13. varscript=document.createElement("script");
14. script.type="text/javascript";
15. script.id=id;
16. script.src=url;
17. script.onreadystatechange=function(){
18. switch(this.readyState){
19. case"complete":
20. case"loaded":
21. if(typeofloaded=="function")loaded();
22. script.parentNode.removeChild(script);
23. break;
24. }
25. }
26. script.οnlοad=function(){
27. if(typeofloaded=="function")loaded();
28. script.parentNode.removeChild(script);
29. }
30. script.οnerrοr=function(){
31. if(typeoferror=="function")error();
32. }
33. document.body.parentNode.appendChild(script);
34. }
36. functiondateFormat(date,separator){
37. date=typeofdate=="number"?newDate(date):
38. (typeofdate=="string"?newDate(Date.parse(date)):date);
39. separator=typeofseparator=="string"?separator:"$1年$2月$3日$4时$5分$6秒";
40. varstr=""+date.getFullYear()+"-"+(date.getMonth()+101)+"-"+(date.getDate()+100)+""+
41. (date.getHours()+100)+":"+(date.getMinutes()+100)+":"+(date.getSeconds()+100);
42. returnstr.replace(/^(/d+)-/d*(/d{2})-/d*(/d{2})/d*(/d{2}):/d*(/d{2}):/d*(/d{2})$/g,separator);
43. }
45. functionsizeFormat(size){
46. vartext=size+"B";
47. if(size>=1024*1024*1024)
48. text=size/(1024*1024*1024)+"G";
49. elseif(size>=1024*1024)
50. text=size/(1024*1024)+"M";
51. elseif(size>=1024)
52. text=size/1024+"K";
53. returntext.replace(/(/./d{2})/d*([a-z])/ig,"$1$2");
54. }
56. functioncolorFormat(color){
57. return"#"+/.{6}$/.exec("00000"+color.toString(16));
58. }
60. functionsetElementText(element,text){
61. if(typeofelement=="undefined")return;
62. if(typeofelement.textContent!="undefined")
63. element.textContent=text;
64. else(typeofelement.innerText!="undefined")
65. element.innerText=text;
66. }

可排序的Table--ListView.js

1. /*--
2. 标题：可排序的表对象
3. 设计：ZswangY37
4. 博客：http://blog.youkuaiyun.com/zswang
5. 日期：2008年10月19日
6. --*/
7. if(typeofnamespace=="undefined")namespace=[];
8. namespace.push("ListView");
10. functionListItem(listView,subItems){
11. this.listView=listView;
12. this.index=this.listView.items.length;
14. this.row=listView.body.insertRow(-1);
15. this.cells=[];
16. for(vari=0;i<this.listView.columns.length;i++){
17. varcell=this.row.insertCell(-1);
18. cell.align=this.listView.columns[i].align;
19. this.cells.push(cell);
20. }
21. }
23. ListItem.prototype.doChange=function(){
24. for(vari=0;i<this.listView.columns.length;i++)
25. setElementText(this.cells[i],this.listView.ondisplay(
26. this.listView.columns[i],this.listView.lines[this.index][i]));
27. }
29. functionListColumn(listView,caption,type,width,align){
30. this.listView=listView;
31. this.caption=caption;
32. this.type=type;
33. this.width=width;
34. this.align=align;
35. this.index=this.listView.columns.length;
37. this.sortStyle="down";
38. this.sorted=false;
39. this.cell=listView.head.row.insertCell(-1);
40. this.cell.align=align;
41. this.cell.style.width=width+"px";
43. this.a_caption=document.createElement("a");
44. this.a_caption.href="javascript:void(0);";
45. this.a_caption.listView=listView;
46. this.a_caption.column=this;
48. this.a_caption.οnclick=function(){
49. if(this.listView.sortColumn==this.column)
50. this.column.setSortStyle(this.column.sortStyle=="down"?"up":"down");
51. elsethis.listView.setSortColumn(this.column);
52. }
53. this.cell.appendChild(this.a_caption);
54. setElementText(this.a_caption,caption);
56. this.a_button=document.createElement("a");
57. this.a_button.href="javascript:void(0);";
58. this.a_button.className="SortButton";
59. this.a_button.style.display="none";
60. this.a_button.listView=listView;
61. this.a_button.column=this;
62. this.a_button.οnclick=this.a_caption.onclick;
63. this.cell.appendChild(this.a_button);
64. }
66. ListColumn.prototype.setSorted=function(sorted){
67. if(this.sorted==sorted)return;
68. this.sorted=sorted;
69. this.doChange();
70. }
72. ListColumn.prototype.setSortStyle=function(sortStyle){
73. if(this.sortStyle==sortStyle)return;
74. this.sortStyle=sortStyle;
75. this.doChange();
76. this.listView.alphaSort();
77. }
79. ListColumn.prototype.doChange=function(){
80. this.a_button.style.display=this.sorted?"":"none";
81. setElementText(this.a_button,this.sortStyle=="down"?"▼":"▲");
82. }
84. functionListView(parent,width,height){
85. this.parent=typeofparent=="object"?parent:document.body;
86. this.width=width;
87. this.height=height;
89. this.ondisplay=function(column,value){
90. switch(column.type){
91. case"time":returndateFormat(value,"$1-$2-$3$4:$5:$6");
92. case"date":returndateFormat(value,"$1-$2-$3");
93. case"size":returnsizeFormat(value);
94. default:returnvalue;
95. }
96. }
97. this.table=document.createElement("table");
98. this.table.className="ListView";
99. this.table.cellPadding="0";
100. this.table.cellSpacing="0";
102. this.head=document.createElement("thead");
103. this.body=document.createElement("tbody");
104. this.parent.appendChild(this.table);
105. this.table.appendChild(this.head);
106. this.table.appendChild(this.body);
107. this.columns=[];//表头列表
108. this.items=[];//所有项
109. this.lines=[];//所有数据
110. this.sortColumn=null;
112. this.head.row=this.head.insertRow(-1);
114. this.table.style.width=this.width+"px";
115. this.table.style.height=this.height+"px";
116. }
118. ListView.prototype.AddColumn=function(caption,type,width,align){
119. varcolumn=newListColumn(this,caption,type,width,align);
120. this.columns.push(column);
121. }
123. ListView.prototype.AddColumns=function(columns){
124. for(vari=0;i<columns.length;i++)
125. this.AddColumn(columns[i].caption,columns[i].type,columns[i].width,columns[i].align);
126. }
128. ListView.prototype.AddItem=function(subItems){
129. varitem=newListItem(this,subItems);
130. this.items.push(item);
131. this.lines.push(subItems);
132. item.doChange();
133. }
135. ListView.prototype.AddItems=function(items){
136. for(vari=0;i<items.length;i++)
137. this.AddItem(items[i]);
138. }
140. ListView.prototype.setSortColumn=function(column){
141. if(column==this.sortColumn)return;
142. if(this.sortColumn)this.sortColumn.setSorted(false);
143. this.sortColumn=column;
144. if(this.sortColumn)this.sortColumn.setSorted(true);
145. this.alphaSort();
146. }
148. ListView.prototype.alphaSort=function(){
149. if(this.sortColumn==null)return;
150. varlistView=this;
151. varsortIndex=listView.sortColumn.index;
152. varsortStyle=listView.sortColumn.sortStyle=="up"?1:-1;
153. this.lines.sort(function(a,b){
154. returnsortStyle*(a[sortIndex]==b[sortIndex]?0:(a[sortIndex]>b[sortIndex]?-1:1));
155. });
156. for(vari=0;i<this.items.length;i++)
157. this.items[i].doChange();
158. }

测试页面--ListView.html

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <htmlxmlns="http://www.w3.org/1999/xhtml">
4. <headrunat="server">
5. <title>ListView测试样例</title>
6. <linkrel="Stylesheet"type="text/css"href="ListView.css?version=2008101701"/>
7. </head>
8. <scripttype="text/javascript"src="Common.js?version=2008101701"></script>
9. <scripttype="text/javascript"src="ListView.js?version=2008101701"></script>
10. <scripttype="text/javascript">
11. functionBodyLoad(){
12. varlistView=newListView(document.body,500,120);
13. listView.AddColumns([
14. {caption:"文件名",type:"string",width:200,align:"left"},
15. {caption:"类型",type:"string",width:100,align:"left"},
16. {caption:"日期",type:"time",width:130,align:"center"},
17. {caption:"大小",type:"size",width:70,align:"right"}
18. ]);
19. listView.AddItems([
20. ["new.rar","rar",1221180669000,433247],
21. ["Scroller.js","js","2008/9/2311:26:57",2556],
22. ["AlertBox.js","js","2008/9/2311:26:57",3565],
23. ["1.htm","htm","2008/10/420:21:54",11394],
24. ["4.htm","htm","2008/10/420:21:54",351],
25. ["news.xml","htm","2008/10/420:24:11",14074],
26. ["function.js","js","2008/10/420:24:11",2844],
27. ["神秘园-Nocturne.mp3","mp3","2008/10/70:07:43",3111293],
28. ["详细功略+剧情流程（一）.doc","doc","2008/10/70:07:43",63488],
29. ["详细功略+剧情流程（二）.doc","doc","2008/10/70:07:43",164352],
30. ["禁止文件预览功能.txt","txt","2008/10/70:07:58",860]
31. ]);
33. varlistView=newListView(document.body,500,120);
34. listView.AddColumns([
35. {caption:"ID",type:"int",width:100,align:"right"},
36. {caption:"昵称",type:"string",width:200,align:"center"},
37. {caption:"生日",type:"date",width:130,align:"center"},
38. {caption:"城市",type:"string",width:70,align:"left"}
39. ]);
40. listView.AddItems([
41. [1,"成龙","1961/2/1","香港"],
42. [2,"章子怡","1970/12/13","上海"],
43. [3,"那英","1976/8/8","北京"],
44. [4,"陈坤","1980/12/30","南京"],
45. [5,"黄晓明","1981/12/30","天津"],
46. [6,"周杰伦","1980/11/11","台北"],
47. [7,"莫文蔚","1973/3/17","香港"],
48. [8,"黃品源","1980/7/18","拉萨"],
49. [9,"張信哲","1975/7/21","高雄"],
50. [10,"王力宏","1970/2/16","厦门"],
51. [11,"張柏芝","1984/6/4","深圳"]
52. ]);
53. }
54. </script>
55. <bodyonload="BodyLoad();">
56. </body>
57. </html>
58.