JS表格排序新法 >> 六艺中文网 >> 艺术沙龙中文资讯

栏目编辑：A君

JS表格排序新法

2004-3-21　　作者：　　来源：blueidea　　【字体：大中小】

不知大家对精华区的表格排序终极优化是否还有记忆，当时讨论的结果曾以为是最快的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 下测试通过，欢迎大家指正 :)

版权申明：
　　部分特别声明不要转载、或者授权本站独家发布的文章，未经授权不要转载、摘编、复制或建立镜像；大家可以自由转载本站的文章，但原作者和来自我站的链接必须保留。文章版权归本站和原作者共有。
　　六艺中文网(6Art.Net)依法保护知识产权，如果我们的文章有涉及或侵犯您的有关权益，请即时与我们联系，注明网址及文章，我们会即时处理或删除，感谢您的合作！

支持我们

功夫巨星李小龙

建筑大师贝律铭

艺术大师刘海粟

国画大师张大千

商业画家陈逸飞

当代书法黄学江

摄影大师吴印咸

艺术名家黄敦

相关文章

·风讯模版设计大赛
·网站设计的标准时代
·制作网站的基本原则
·Dreamweaver MX 2004从零开始－用表格定位网页
·关于版权声明的写法
·内容管理系统的设计和选型
·网站设计65条原则
·利用CSS改善网站可访问性
·JS实现浏览器菜单命令
·WEB 技术模拟应用程序