您的位置：首页 > Web前端 > JavaScript

JavaScript 实现的客户端表格排序

2010-08-06 22:40 661 查看
Javascript 表格排序, 参考至《JavaScript高级程序设计》一书, 点击表头即可进行排序,
再次点击反向排序, 对字符串格式的第一次为正向排序, 对整型, 浮点型以及日期型的格式第一次点击为逆向排序, 这样更符合人们的习惯,
还对特殊的数据结构(这里是图片)进行了排序, 是通过设置td 的value 属性并对其值进行排序实现的, 效果如下:





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js - 表格排序</title>
<mce:script type="text/javascript"><!--
function typeFormat(sValue, sType) {    // 对不同格式的数据进行规格化
    switch (sType) {
        case "int":    return parseInt(sValue);
        case "float": return parseFloat(sValue);
        case "date": return new Date(Date.parse(sValue));
        default:       return sValue.toString();
    }
}
function generateCompareTRs(iCol, sType) {    // 单个的排序算法, sType 为可选参数, 默认为string
    return function compareTRs(oTR1, oTR2) {
		if (oTR1.cells[iCol].value) {    // 如果单元格中设有value 值, 则对value 值进行排序, 因为单元格中数据为特殊格式, 如图片等
			var sText1 = oTR1.cells[iCol].value;
			var sText2 = oTR2.cells[iCol].value;
		} else {
			var sText1 = oTR1.cells[iCol].firstChild.nodeValue;    // 获取单元格中的数据
			var sText2 = oTR2.cells[iCol].firstChild.nodeValue;
		}
		var vValue1 = typeFormat(sText1, sType);    // 将单元格中的数据规格化
		var vValue2 = typeFormat(sText2, sType);
		if (!sType) {
			return sText1.localeCompare(sText2);    // 没有指定日期的话则用localeCompare() 函数, 这样也能比较中文
		}
		if (vValue1 < vValue2) {    // 是字符串以外的数据类型的话直接比较大小
			return -1;
		} else if (vValue1 > vValue2) {
			return 1;
		} else {
			return 0;
		}
    }
}
function sortTable(sTableID, iCol, sType) {    // 排序主函数
    var oTable = document.getElementById(sTableID);
    var oTBody = oTable.tBodies[0];
    var rowsData = oTBody.rows;    // tbody 中行的集合, 是行数据的集合, 而不是一个数组
    var aTRs = new Array();    // 创建数组以存放表的每一行
    for (var i = 0; i < rowsData.length; i++) {
        aTRs.push(rowsData[i]);    // 将行数据的集合转换为数组
    }
    if (oTable.sortCol == iCol) {    // 如果已经排过一次序, 则将数组倒置
        aTRs.reverse();
    } else if (sType) {    // 如果设置了类型, 即为日期, 整型或是浮点型, 则第一次倒序排列
        aTRs.sort(generateCompareTRs(iCol, sType));
        aTRs.reverse();
    } else {    // 如果为字符串, 且第一次排序, 则正序排列
        aTRs.sort(generateCompareTRs(iCol));
    }
    var oFragment = document.createDocumentFragment();    // 创建文档碎片
    for (var i = 0; i < aTRs.length; i++) {
        oFragment.appendChild(aTRs[i]);     // 将元素添加至文档碎片的同时, 自动删除了原来的结点
    }
    oTBody.appendChild(oFragment);    // 将整个文档碎片添加至tbody
    oTable.sortCol = iCol;    // 将已经排过序的列记录下来, 再次排序的话倒置即可
}
// --></mce:script>
</head>
<body>
<table id="sortTable" border="1" cellspacing="0px" cellpadding="5px">
    <thead>
        <tr>
            <th onclick="sortTable('sortTable', 0)" style="cursor: pointer;" mce_style="cursor: pointer;">电影名称</th>
            <th onclick="sortTable('sortTable', 1, 'date')" style="cursor: pointer;" mce_style="cursor: pointer;">上传日期</th>
            <th onclick="sortTable('sortTable', 2, 'float')" style="cursor: pointer;" mce_style="cursor: pointer;">文件大小</th>
            <th onclick="sortTable('sortTable', 3, 'int')" style="cursor: pointer;" mce_style="cursor: pointer;">下载次数</th>
            <th onclick="sortTable('sortTable', 4)" style="cursor: pointer;" mce_style="cursor: pointer;">文件类型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>猜火车</td>
            <td>6-8-2009</td>
            <td>789.5MB</td>
            <td>564</td>
            <td value="rmvb"><img src="rmvb.gif" mce_src="rmvb.gif" alt="" /></td>
        </tr>
        <tr>
            <td>Love Actually</td>
            <td>6/20/2009</td>
            <td>1065.2MB</td>
            <td>864</td>
            <td value="avi"><img src="avi.jpg" mce_src="avi.jpg" alt="" /></td>
        </tr>
        <tr>
            <td>四个婚礼和一个葬礼</td>
            <td>1/1/1999</td>
            <td>789.8MB</td>
            <td>784</td>
            <td value="rmvb"><img src="rmvb.gif" mce_src="rmvb.gif" alt="" /></td>
        </tr>
        <tr>
            <td>诺丁山</td>
            <td>5-23-2008</td>
            <td>4812.8MB</td>
            <td>1064</td>
            <td value="swf"><img src="swf.png" mce_src="swf.png" alt="" /></td>
        </tr>
        <tr>
            <td>Titanic</td>
            <td>6-8-2008</td>
            <td>2058.6MB</td>
            <td>1264</td>
            <td value="avi"><img src="avi.jpg" mce_src="avi.jpg" alt="" /></td>
        </tr>
        <tr>
            <td>BJ 单身日记</td>
            <td>12/24/2004</td>
            <td>402MB</td>
            <td>484</td>
            <td value="rar"><img src="rar.gif" mce_src="rar.gif" alt="" /></td>
        </tr>
    </tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航