<p> 表格排序，一般的处理方法是传递排序的字段到后台进行重新查询并排序，javascript也可以做到简单的表格排序，备忘代码：</p><p><code> //类型转换器，将列的字段类型转换为可以排序的类型：String,int,float<br /> function convert(sValue, sDataType) {<br /> switch(sDataType) {<br /> case "int":<br /> return parseInt(sValue);<br /> case "float":<br /> return parseFloat(sValue);<br /> case "date":<br /> return new Date(Date.parse(sValue));<br /> default:<br /> return sValue.toString();<br /> <br /> }<br /> }<br /> <br /> //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型<br /> function generateCompareTRs(iCol, sDataType) {<br /> <br /> return function compareTRs(oTR1, oTR2) {<br /> var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);<br /> var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);<br /> <br /> if (vValue1 < vValue2) {<br /> return -1;<br /> } else if (vValue1 > vValue2) {<br /> return 1;<br /> } else {<br /> return 0;<br /> }<br /> };<br /> }<br /> <br /> //排序方法<br /> function sortTable(sTableID, iCol, sDataType) {<br /> var oTable = document.getElementById(sTableID);<br /> var oTBody = oTable.tBodies[0];<br /> var colDataRows = oTBody.rows;<br /> var aTRs = new Array;<br /> <br /> //将所有列放入数组<br /> for (var i=0; i < colDataRows.length; i++) {<br /> aTRs[i] = colDataRows[i];<br /> }<br /> <br /> //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序<br /> if (oTable.sortCol == iCol) {<br /> aTRs.reverse();<br /> } else {<br /> //使用数组的sort方法，传进排序函数<br /> aTRs.sort(generateCompareTRs(iCol, sDataType));<br /> }<br /> <br /> var oFragment = document.createDocumentFragment();<br /> for (var i=0; i < aTRs.length; i++) {<br /> oFragment.appendChild(aTRs[i]);<br /> }<br /> <br /> oTBody.appendChild(oFragment);<br /> //记录最后一次排序的列索引<br /> oTable.sortCol = iCol;<br /> }</code></p>
<p> </p>
<p> 完整例子：</p><p><code><html><br /> <head><br /> <title>Table Sort Example</title><br /> <script type="text/javascript"><br /> <br /> //转换器，将列的字段类型转换为可以排序的类型：String,int,float<br /> function convert(sValue, sDataType) {<br /> switch(sDataType) {<br /> case "int":<br /> return parseInt(sValue);<br /> case "float":<br /> return parseFloat(sValue);<br /> case "date":<br /> return new Date(Date.parse(sValue));<br /> default:<br /> return sValue.toString();<br /> <br /> }<br /> }<br /> <br /> //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型<br /> function generateCompareTRs(iCol, sDataType) {<br /> <br /> return function compareTRs(oTR1, oTR2) {<br /> var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);<br /> var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);<br /> <br /> if (vValue1 < vValue2) {<br /> return -1;<br /> } else if (vValue1 > vValue2) {<br /> return 1;<br /> } else {<br /> return 0;<br /> }<br /> };<br /> }<br /> <br /> //排序方法<br /> function sortTable(sTableID, iCol, sDataType) {<br /> var oTable = document.getElementById(sTableID);<br /> var oTBody = oTable.tBodies[0];<br /> var colDataRows = oTBody.rows;<br /> var aTRs = new Array;<br /> <br /> //将所有列放入数组<br /> for (var i=0; i < colDataRows.length; i++) {<br /> aTRs[i] = colDataRows[i];<br /> }<br /> <br /> //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序<br /> if (oTable.sortCol == iCol) {<br /> aTRs.reverse();<br /> } else {<br /> //使用数组的sort方法，传进排序函数<br /> aTRs.sort(generateCompareTRs(iCol, sDataType));<br /> }<br /> <br /> var oFragment = document.createDocumentFragment();<br /> for (var i=0; i < aTRs.length; i++) {<br /> oFragment.appendChild(aTRs[i]);<br /> }<br /> <br /> oTBody.appendChild(oFragment);<br /> //记录最后一次排序的列索引<br /> oTable.sortCol = iCol;<br /> }<br /> <br /> </script><br /> </head><br /> <body><br /> <p>Click on the table header to sort in ascending order.</p><br /> <table border="1" id="tblSort"><br /> <thead><br /> <tr><br /> <th onclick="sortTable('tblSort', 0)"<br /> style="cursor:pointer">Last Name</th><br /> <th onclick="sortTable('tblSort', 1)"<br /> style="cursor:pointer">First Name</th><br /> <th onclick="sortTable('tblSort', 2, 'date')"<br /> style="cursor:pointer">Birthday</th><br /> <th onclick="sortTable('tblSort', 3, 'int')"<br /> style="cursor:pointer">Siblings</th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td>Smith</td><br /> <td>John</td><br /> <td>7/12/1978</td><br /> <td>2</td><br /> </tr><br /> <tr><br /> <td>Johnson</td><br /> <td>Betty</td><br /> <td>10/15/1977</td><br /> <td>4</td><br /> </tr><br /> <tr><br /> <td>Henderson</td><br /> <td>Nathan</td><br /> <td>2/25/1949</td><br /> <td>1</td><br /> </tr><br /> <tr><br /> <td>Williams</td><br /> <td>James</td><br /> <td>7/8/1980</td><br /> <td>4</td><br /> </tr><br /> <tr><br /> <td>Gilliam</td><br /> <td>Michael</td><br /> <td>7/22/1949</td><br /> <td>1</td><br /> </tr><br /> <tr><br /> <td>Walker</td><br /> <td>Matthew</td><br /> <td>1/14/2000</td><br /> <td>3</td><br /> </tr><br /> </tbody><br /> </table> <br /> </body><br /></html></code></p></p><p> 来源：<a href="http://www.blogjava.net/killme2008/archive/2007/03/10/103009.html">http://www.blogjava.net/killme2008/archive/2007/03/10/103009.html</a></p></p>