上一篇：简单获取键盘的KeyCode >>

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].outerhtml); } therows.sort(sortrows); var str= for(i=0;i<therows.length;i++) { str+=therows[i][1]; } downloadlist.outerhtml=<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 html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title> new document </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <script> function safeloadxml(xmlobj,url,func) { xmlobj.async = true; xmlobj.resolveexternals = false; xmlobj.onreadystatechange = function() { if(xmlobj.readystate==4 && xmlobj.parseerror==0) { func(xmlobj); } } xmlobj.load(url); } function transformxml(xmlobj,xslobj) { var returnvalue = xmlobj.transformnode(xslobj); return returnvalue; } var xmldoc = new activexobject("msxml.domdocument"); var xsldoc = new activexobject("msxml.domdocument"); function init() { safeloadxml(xmldoc,sort.xml, function() { safeloadxml(xsldoc,sort.xsl, function() { test.innerhtml = transformxml(xmldoc.documentelement,xsldoc.documentelement); }); }); } function sortit() {var start=new date(); var temp = []; for(var i=0;i<xmldoc.documentelement.childnodes.length;i++) { temp[temp.length] = [xmldoc.documentelement.childnodes[i].firstchild.firstchild.nodevalue,xmldoc.documentelement.childnodes[i]] } temp.sort(sortfunc); for(var i=0;i<temp.length;i++) { xmldoc.documentelement.insertbefore(temp[i][1],xmldoc.documentelement.firstchild) } test.innerhtml = transformxml(xmldoc.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> </html>

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

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

（）

返回顶部

下一篇：SQL语言快速入门之一 >>