`

Web前端开发之——表格高级排序(字符串,日期,整型,浮点型,以及图片等)

阅读更多

在项目中,经常会碰表格排序,最近整理了一个表格排序包括字符串,日期,整型,浮点型,以及图片等高级排序,将服务器功能转移到前端实现,减轻了服务器压力,功能比较强大。

 

 

 

(function () {
	/**
		@ Author: Kingwell leng
		@ Date  : 2012-8-22
		@ Blog  : http://kingwell-leng.iteye.com/
		@ Email : jinhua.leng##gmail.com
	*/
	//创建闭包以及下面的空间命名,避免项目开发中与其它内容有冲突
	if (!window.kw) {
		window.kw = {};
	};
	kw = {
		convert : function (sValue, sDataType) { //类型转,根据不同类型数据排序,比如,整型,日期,浮点,字符串,接受两个参数,一个是值,一个是排序的数据类型
			switch (sDataType) {
			case "int":
				return parseInt(sValue);
			case "float":
				return parseFloat(sValue);
			case "date":
				return new Date(Date.parse(sValue));
			default:
				return sValue.toString();
			}
		},
		geterateCompareTRs : function (iCol, sDataType) { //比较函数,用于sort排序用
			return function compareTRs(oTR1, oTR2) {
				var vValue1,
				vValue2;
				if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序,比如图片,添加一个额外的属性来排序
					vValue1 = kw.convert(oTR1.cells[iCol].getAttribute("value"), sDataType);
					vValue2 = kw.convert(oTR2.cells[iCol].getAttribute("value"), sDataType);
				} else {
					vValue1 = kw.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
					vValue2 = kw.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
				}
				if (vValue1 < vValue2) {
					return -1;
				} else if (vValue1 > vValue2) {
					return 1;
				} else {
					return 0;
				}
			}
		},
		tabSort : function (sTableID, iCol, sDataType) { //排序函数,sTableID为目标,iCol哪列排序,为必需,sDataType可选
			var oTable = document.getElementById(sTableID);
			var oTBody = oTable.tBodies[0];
			var colDataRows = oTBody.rows;
			var aTRs = [];
			for (var i = 0; i < colDataRows.length; i++) {
				aTRs[i] = colDataRows[i];
			};
			if (oTable.sortCol == iCol) { //如果已经排序,则倒序
				aTRs.reverse();
			} else {
				aTRs.sort(this.geterateCompareTRs(iCol, sDataType));
			}
			var oFragment = document.createDocumentFragment();
			for (var j = 0; j < aTRs.length; j++) {
				oFragment.appendChild(aTRs[j]);
			};
			oTBody.appendChild(oFragment);
			oTable.sortCol = iCol; //设置一个状态
		}
	};
})();
 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px}
table{ border-collapse:collapse}
td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;}
th{ cursor:pointer}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<table width="400"  id="tab">
	<thead>
    	<tr>
        	<th width="100" onclick="kw.tabSort('tab',0)">First Name</th>
        	<th width="100" onclick="kw.tabSort('tab',1)">Last Name</th>
        	<th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th>
        	<th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th>
        </tr>
    </thead>
    <tbody>
  <tr>
    <td>Kingwell</td>
    <td>Leng</td>
    <td>3/10/2012</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1aJim</td>
    <td>Green</td>
    <td>3/5/2012</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Kate</td>
    <td>Bin</td>
    <td>1/2/2012</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Zte</td>
    <td>Ri</td>
    <td>5/3/2012</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Bee</td>
    <td>Dd</td>
    <td>8/1/2012</td>
    <td>15</td>
  </tr>
  </tbody>
</table>


</body>
</html>

 为了现实结构,表现,行为相分离的原则,尽量与HTML分离,这里只是为了演示而矣。

0
1
分享到:
评论

相关推荐

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    根据提供的文件内容,我们可以整理出以下Web前端设计基础的知识点: 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言,用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册九:字符串

    JavaScript是Web前端开发的核心语言之一,它在网页交互、数据处理和动态效果实现等方面发挥着重要作用。本手册将深入探讨JavaScript中的字符串,这是编程中常用的数据类型,对于理解和操作文本至关重要。 一、字符...

    关于六种排序整型、浮点型、字符型、字符串型随机生成、手动输入

    "关于六种排序整型、浮点型、字符型、字符串型随机生成、手动输入",我们可以理解为作者实现了六种不同的排序算法,分别针对四种基本数据类型:整型(int)、浮点型(float或double)、字符型(char)以及字符串型...

    HTML5及CSS3web前端开发技术习题答案解析.pdf

    ### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比,在Web前端开发领域解决了多个关键问题,主要包括: - **浏览器间的兼容性问题**:早期不同浏览器...

    Python3编写实用脚本程序-拼接表格单行数据为字符串.zip

    Python3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格...

    字符串排序方法

    本文介绍了在JavaScript中对字符串数组进行排序的方法,包括基础的`sort()`方法以及更高级的排序算法(如冒泡排序和选择排序)。这些方法可以帮助开发者更好地处理字符串排序问题,提高代码的效率和可读性。根据具体...

    阿里web前端开发手册.pdf

    "阿里web前端开发手册" 阿里web前端开发手册是一份详细的前端开发规范,涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点: 1. 命名规范: 在...

    OJ_整型字符串排序

    在这个特定的题目“OJ_整型字符串排序”中,我们面临的是一个关于整型字符串排序的挑战。由于描述中提到只有资源文件而没有入口程序和测试用例,这意味着我们需要自己构建解决问题的算法并编写相应的代码。 整型...

    判断输入的是否是浮点型

    判断输入的是否是浮点型,自己整理两种方法实现输入内容是否为浮点型数据

    现在有一个字符串“90,56,45,38,79,85”,按照从小到大排序——字符串排序

    在IT领域,字符串排序是一个常见的...在实际应用中,我们还可以探索更高效的排序算法,如快速排序、归并排序等,但基本思路都是类似的:将字符串拆分成可操作的单元,转换为适当的数据类型,排序,然后再转换回字符串。

    java 字符串a-z排序

    在Java编程语言中,对字符串中的字符进行a到z排序是一项常见的操作,特别是在处理文本数据或需要对字母顺序排列的场景。本知识点将详细讲解如何实现这个功能。 首先,我们需要理解字符串在Java中的本质。在Java中,...

    11.罗穗骞《后缀数组——处理字符串的有力工具》.zip

    罗穗骞的《后缀数组——处理字符串的有力工具》详细介绍了这一数据结构及其应用,包含算法源码和解题源码,对于学习者来说是一份宝贵的资源。 首先,后缀数组是一个有序的字符串集合,由输入字符串的所有后缀组成。...

    stm32,RT-Thread中字符串转浮点型

    stm32 rt-thread中,C库的atof不管用,这个是替代C库的atof实现。

    WEB前端开发常用英语单词和语句汇总

    标题中的"WEB前端开发常用英语单词和语句汇总"指的是这份文档旨在提供给从事WEB前端开发的程序员,或者是正在学习前端技术的爱好者们,一个关于日常工作中经常遇到的英文单词及短语的快速参考。这部分内容对于能够...

    C++整型、字符型、浮点型专题

    ### C++整型、字符型、浮点型专题 #### 整型、字符型与浮点型概述 本文深入探讨了C++中的三种基本数据类型:整型、字符型和浮点型。这些数据类型是编程中最常用的基础类型,理解和掌握它们对于编写高效的C++程序至...

Global site tag (gtag.js) - Google Analytics