suchen

Heim >Web-Frontend >js-Tutorial >Beispielcode-Freigabe der in JS implementierten Click-Header-Sortierfunktion

Beispielcode-Freigabe der in JS implementierten Click-Header-Sortierfunktion

黄舟
黄舟Original
2017-03-27 14:40:511436Durchsuche

In diesem Artikel wird hauptsächlich die von JS implementierte Klick-Header-Sortierfunktion vorgestellt, mit der die Funktion zum Sortieren von Buchstaben, Zahlen, Datumsangaben und anderen Formaten in der Tabelle unter Einbeziehung von Javascript realisiert werden kann Tipps zum Abrufen von Seitentabellenelementen und Sortiervorgängen wie Zeichenfolgen und Zahlen können Freunde in Not finden

Dieser Artikel beschreibt die von JS implementierte Klick-Header-Sortierfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorgangseffekt:

1. index.html-Datei: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jb51.net点击表头排序</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-Datei: 

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, &#39;/&#39;));
}
/* 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&#39;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-Datei: 

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 :-) */

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe der in JS implementierten Click-Header-Sortierfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Implementierungsmethode der Halbsuche in der JS-Array-SucheNächster Artikel：Detaillierte Erläuterung der Implementierungsmethode der Halbsuche in der JS-Array-Suche

In Verbindung stehende Artikel

Mehr sehen