JS实现的点击表头排序功能示例


Posted in Javascript onMarch 27, 2017

本文实例讲述了JS实现的点击表头排序功能。分享给大家供大家参考,具体如下:

运行效果:

JS实现的点击表头排序功能示例

1、index.html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>3water.com点击表头排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="tablesort.js"></script>
<link type="text/css" rel="StyleSheet" href="tablesort.css" rel="external nofollow" />
<style type="text/css">
body {
 font-family: Verdana, Helvetica, Arial, Sans-Serif;
 font:  Message-Box;
}
code {
 font-size: 1em;
}
</style>
</head>
<body>
<table id="MyHeadTab" cellspacing="0" onclick="sortColumn(event)">
 <thead>
 <tr>
  <td>String</td>
  <td title="CaseInsensitiveString">String</td>
  <td>Number</td>
  <td>Date</td>
  <td>No Sort</td>
 </tr>
 </thead>
  <tbody>
 <tr>
  <td>apple</td>
  <td>Strawberry</td>
  <td>45</td>
  <td>2001-03-13</td>
  <td>Item 0</td>
 </tr>
 <tr>
  <td>Banana</td>
  <td>orange</td>
  <td>7698</td>
  <td>1789-07-14</td>
  <td>Item 1</td>
 </tr>
 <tr>
  <td>orange</td>
  <td>Banana</td>
  <td>4546</td>
  <td>1949-07-04</td>
  <td>Item 2</td>
 </tr>
 <tr>
  <td>Strawberry</td>
  <td>apple</td>
  <td>987</td>
  <td>1975-08-19</td>
  <td>Item 3</td>
 </tr>
 <tr>
  <td>Pear</td>
  <td>blueberry</td>
  <td>98743</td>
  <td>2001-01-01</td>
  <td>Item 4</td>
 </tr>
 <tr>
  <td>blueberry</td>
  <td>Pear</td>
  <td>4</td>
  <td>2001-04-18</td>
  <td>Item 5</td>
 </tr>
  </tbody>
</table>
</body>
</html>

2、tablesort.js文件:

var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
 initSortTable();
function initSortTable() {
 arrowUp = document.createElement("SPAN");
 var tn = document.createTextNode("5");
 arrowUp.appendChild(tn);
 arrowUp.className = "arrow";
 arrowDown = document.createElement("SPAN");
 var tn = document.createTextNode("6");
 arrowDown.appendChild(tn);
 arrowDown.className = "arrow";
}
function sortTable(tableNode, nCol, bDesc, sType) {
 var tBody = tableNode.tBodies[0];
 var trs = tBody.rows;
 var trl= trs.length;
 var a = new Array();
 for (var i = 0; i < trl; i++) {
 a[i] = trs[i];
 }
 var start = new Date;
 window.status = "Sorting data...";
 a.sort(compareByColumn(nCol,bDesc,sType));
 window.status = "Sorting data done";
 for (var i = 0; i < trl; i++) {
 tBody.appendChild(a[i]);
 window.status = "Updating row " + (i + 1) + " of " + trl +
   " (Time spent: " + (new Date - start) + "ms)";
 }
 // check for onsort
 if (typeof tableNode.onsort == "string")
 tableNode.onsort = new Function("", tableNode.onsort);
 if (typeof tableNode.onsort == "function")
 tableNode.onsort();
}
function CaseInsensitiveString(s) {
 return String(s).toUpperCase();
}
function parseDate(s) {
 return Date.parse(s.replace(/\/-/g, '/'));
}
/* alternative to number function
 * This one is slower but can handle non numerical characters in
 * the string allow strings like the follow (as well as a lot more)
 * to be used:
 *  "1,000,000"
 *  "1 000 000"
 *  "100cm"
 */
function toNumber(s) {
  return Number(s.replace(/[^0-9/.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
 var c = nCol;
 var d = bDescending;
 var fTypeCast = String;
 if (sType == "Number")
 fTypeCast = Number;
 else if (sType == "Date")
 fTypeCast = parseDate;
 else if (sType == "CaseInsensitiveString")
 fTypeCast = CaseInsensitiveString;
 return function (n1, n2) {
 if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
  return d ? -1 : +1;
 if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
  return d ? +1 : -1;
 return 0;
 };
}
function sortColumnWithHold(e) {
 // find table element
 var el = ie5 ? e.srcElement : e.target;
 var table = getParent(el, "TABLE");
 // backup old cursor and onclick
 var oldCursor = table.style.cursor;
 var oldClick = table.onclick;
 // change cursor and onclick 
 table.style.cursor = "wait";
 table.onclick = null;
 // the event object is destroyed after this thread but we only need
 // the srcElement and/or the target
 var fakeEvent = {srcElement : e.srcElement, target : e.target};
 // call sortColumn in a new thread to allow the ui thread to be updated
 // with the cursor/onclick
 window.setTimeout(function () {
 sortColumn(fakeEvent);
 // once done resore cursor and onclick
 table.style.cursor = oldCursor;
 table.onclick = oldClick;
 }, 100);
}
function sortColumn(e) {
 var tmp = e.target ? e.target : e.srcElement;
 var tHeadParent = getParent(tmp, "THEAD");
 var el = getParent(tmp, "TD");
 if (tHeadParent == null)
 return;
 if (el != null) {
 var p = el.parentNode;
 var i;
 // typecast to Boolean
 el._descending = !Boolean(el._descending);
 if (tHeadParent.arrow != null) {
  if (tHeadParent.arrow.parentNode != el) {
  tHeadParent.arrow.parentNode._descending = null; //reset sort order 
  }
  tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
 }
 if (el._descending)
  tHeadParent.arrow = arrowUp.cloneNode(true);
 else
  tHeadParent.arrow = arrowDown.cloneNode(true);
 el.appendChild(tHeadParent.arrow);
 // get the index of the td
 var cells = p.cells;
 var l = cells.length;
 for (i = 0; i < l; i++) {
  if (cells[i] == el) break;
 }
 var table = getParent(el, "TABLE");
 // can't fail
 sortTable(table,i,el._descending, el.getAttribute("type"));
 }
}
function getInnerText(el) {
 if (ie5) return el.innerText; //Not needed but it is faster
 var str = "";
 var cs = el.childNodes;
 var l = cs.length;
 for (var i = 0; i < l; i++) {
 switch (cs[i].nodeType) {
  case 1: //ELEMENT_NODE
  str += getInnerText(cs[i]);
  break;
  case 3: //TEXT_NODE
  str += cs[i].nodeValue;
  break;
 }
 }
 return str;
}
function getParent(el, pTagName) {
 if (el == null) return null;
 else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
 return el;
 else
 return getParent(el.parentNode, pTagName);
}

3、tablesort.css文件:

tr  {background: window;}
td  {color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;
  border-right: 1px solid buttonshadow;
  border-bottom: 1px solid buttonshadow;
}
table {border-top: 1px solid buttonshadow;
  border-left: 1px solid buttonshadow;
  border-right: 1px solid buttonhighlight;
  border-bottom: 1px solid buttonhighlight;
   }
thead td {background: buttonface; font: menu; border: 1px outset white;
  padding-top: 0; padding: bottom: 0;
  border-top: 1px solid buttonhighlight;
  border-left: 1px solid buttonhighlight;
  border-right: 1px solid buttonshadow;
  border-bottom: 1px solid buttonshadow;
  height: 16px;
}
thead .arrow{font-family: webdings; color: black; padding: 0; font-size: 10px;
  height: 11px; width: 10px; overflow: hidden;
  margin-bottom: 5; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;}
  /*nice vertical positioning :-) */

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
vue2.0实战之基础入门(1)
Mar 27 #Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
Angular2利用组件与指令实现图片轮播组件
Mar 27 #Javascript
Vue 过渡实现轮播图效果
Mar 27 #Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 #Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 #Javascript
You might like
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php输入数据统一类实例
2015/02/23 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
xmlHTTP实例
2006/10/24 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python request中文乱码问题解决方案
2020/09/17 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
运动会入场词60字
2014/02/15 职场文书
副董事长岗位职责
2014/04/02 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android