时间:2021-05-26
本文实例讲述了JS实现的点击表头排序功能。分享给大家供大家参考,具体如下:
运行效果:
1、index.html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://pareByColumn(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;}更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这个示例展示如何排序datagrid通过点击列表头.在datagrid的所有columns可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除
本文实例讲述了js表头排序实现方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下://是否递减排序varisDescending=true;/***
本文实例讲述了jQuery实现带分组数据的Table表头排序。分享给大家供大家参考,具体如下:如下图:要求:点击表头排序时,"分组"及"分组明细"的数据层次关系
本文实例讲述了JS实现点击上移下移LI行数据的方法。分享给大家供大家参考。具体如下:这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两
功能如下:1.排序功能:单击行表头或列表头则进行正序排序;若再次单击,则进行逆序;2.修改功能:双击某个单元格,则可进行输入操作,当输入框失去焦点时,则新数据被