js表格排序新法

不知大家对精华区的表格排序终极优化是否还有记忆，当时讨论的结果曾以为是最快的js排序了，实则不然，按前段时间我发的dhtml性能提升帖（转译）所讲到的，dom效率某些情况下并不如dhtml，比如一次写入大量数据时，dom频繁创建添加反而更慢，所以可以对排序算法作以下修改：

<table id=downloadlist border="1" width="100%" onclick="sorttable()"> <tr> <td>addcommoninfo.mxp</td> <td>mxp file</td> <td>2614</td> <td>2002-12-30 16:45:22,fri</td> </tr> <tr> <td>addtemplateparam.mxp</td> <td>mxp file</td> <td>3100</td> <td>2002-12-5 13:28:24,sun</td> </tr></table><script>var curobj;function sorttable() { var start=new date()var i;var therows=new array();for(i=0;i<downloadlist.rows.length;i++) { therows[i]=new array(downloadlist.rows[i].cells[0].innertext.tolowercase(),downloadlist.rows[i].outer<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>); }therows.sort(sortrows);var str=''for(i=0;i<therows.length;i++) { str+=therows[i][1]; }downloadlist.outer<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>='<table id=downloadlist border="1" width="100%">'+str+'</table>'curobj=null;alert(new date()-start)return ;}function sortrows(x,y) { if(x[0]>y[0]) return -1; else if(x[0]<y[0]) return 1; else return 0;}</script>

[单击全选，ctrl+a复制，将代码保存成html文件运行]

注意测试时将记录条数增加到500条以上，推荐1000条
我测试结果是平均1322ms左右

但这样就是最快的吗？非也，且看以下xml+xslt+js例子，能把时间缩短到721ms左右
需要准备三个文件
1. xml文件 ---节省版面起见，这里只罗列两条记录
<?xml version="1.0" encoding="utf-8" ?>
<root>
<record>
    <info>addcommoninfo.mxp</info>
    <info>mxp file</info>
    <info>2614</info>
<info>2002-12-30 16:45:22,fri</info>
</record>
<record>
    <info>addtemplateparam.mxp</info>
    <info>mxp file</info>
    <info>3100</info>
    <info>2002-12-5 13:28:24,sun</info>
</record>
</root>

2. xsl 文件
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl" version="1.0">
<xsl:template match="root">
<table border="1" width="100%">
<xsl:for-each select="record">
<tr>
<xsl:for-each select="info">
<td>
<xsl:value-of select="text()" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

注意命名空间，想要在ie5下兼容，必须使用这个名字

3.htm文件
<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 4.0 transitional//en"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><head><title> new document </title><meta name="generator" content="editplus"><meta name="author" content=""><meta name="keywords" content=""><meta name="description" content=""><script> function safeload<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj,url,func) { <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.async = true; <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.resolveexternals = false; <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.onreadystatechange = function() { if(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.readystate==4 && <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.parseerror==0) { func(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj); } } <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.load(url); } function transform<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj,xslobj) { var returnvalue = <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>obj.transformnode(xslobj); return returnvalue; } var <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc = new activexobject("ms<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>.domdocument"); var xsldoc = new activexobject("ms<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>.domdocument"); function init() { safeload<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc,'sort.<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>', function() { safeload<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(xsldoc,'sort.xsl', function() { test.inner<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> = transform<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement,xsldoc.documentelement); }); }); } function sortit() {var start=new date(); var temp = []; for(var i=0;i<<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement.childnodes.length;i++) { temp[temp.length] = [<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement.childnodes[i].firstchild.firstchild.nodevalue,<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement.childnodes[i]] } temp.sort(sortfunc); for(var i=0;i<temp.length;i++) { <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement.insertbefore(temp[i][1],<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement.firstchild) } test.inner<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> = transform<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>(<a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>doc.documentelement,xsldoc.documentelement); alert(new date()-start); } function sortfunc(x,y) { if(x[0].tolowercase()>y[0].tolowercase()) return 1; else if(x[0].tolowercase()<y[0].tolowercase()) return -1; else return 0; } window.onload=init;</script></head><body><div id=test onclick=sortit()></div></body></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>

[单击全选，ctrl+a复制，将代码保存成html文件运行]

以上代码在 win2k，ie5 下测试通过，欢迎大家指正 :)

ICP备案编号:粤ICP备06052964号

www.sosof.com

选择显示字体大小

js表格排序新法

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准网站致力的规范

www.sosof.com

选择显示字体大小

js表格排序新法

shouchang();

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准 网站致力的规范

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

标准网站致力的规范