javascriptテーブルの並べ替え
7045 ワード
サーバー側の並べ替えは、大量の帯域幅占有をもたらし、以下はJavascriptを用いてクライアントの並べ替えを行う.
インターネットでいくつかの比較的簡単なものを調べましたが、日付の種類のソートに問題があります.文字列で並べられているものもあれば、10/28/2009のようなフォーマットにしか使えないものもあります.自分で参照しながらまた書きました.
インターネットでいくつかの比較的簡単なものを調べましたが、日付の種類のソートに問題があります.文字列で並べられているものもあれば、10/28/2009のようなフォーマットにしか使えないものもあります.自分で参照しながらまた書きました.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
// ， ：String,int,float
function convert(sValue, sDataType) {
switch(sDataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return Date.parse(sValue.replace(/\-/g,"/"));// : 1970-1-1 00:00:00
default:
return sValue.toString();
}
}
// ，iCol ，sDataType
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var value1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);//
var value2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);//
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
// ,sTableID： ID, iCol： , sDataType：
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];//
var aRows = oTBody.rows;//
var aTRs = new Array;// ， aRows 。
var oTheadCells = oTable.tHead.rows[0].cells;
// ， ："↑" ,"↓"：
for(var i = 0; i < oTheadCells.length; i++)
{
var lastChar = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.charAt(oTable.tHead.rows[0].cells[i].firstChild.nodeValue.length-1);
if(i == iCol) {
if(lastChar=='↑')
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","↓");
else if(lastChar=='↓')
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↓","↑");
else
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue + "↑";
}
else{
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","").replace("↓","");
}
}
//
for (var i=0; i < aRows.length; i++) {
aTRs[i] = aRows[i];
}
// ， ， reverse()
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
// sort ，
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();//
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);//
}
// ，
oTBody.appendChild(oFragment);
//
oTable.sortCol = iCol;
}
</script>
</head>
<body>
<p> </p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0)"
style="cursor:pointer"> </th>
<th onclick="sortTable('tblSort', 1, 'date')"
style="cursor:pointer"> </th>
<th onclick="sortTable('tblSort', 2, 'float')"
style="cursor:pointer"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>1986/10/28 20:20:20</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td>1986-10-28 20:10:20</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td>2009-10-1</td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td>1949-10-1</td>
<td>1.2</td>
</tr>
<tr>
<td> </td>
<td>2002-5-8</td>
<td>4.6</td>
</tr>
<tr>
<td>James</td>
<td>2029-10-8</td>
<td>1</td>
</tr>
<tr>
<td>Matthew</td>
<td>2005-9-9</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>