`
xinlingwuyu
  • 浏览: 138353 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

table针对列排序

阅读更多

来源于:http://www.frequency-decoder.com/demo/table-sort-revisited/

table排序代码:


(function()
{
 fdTableSort = {
        regExp_Currency:        /^[£$€¥¤]/,
        regExp_Number:          /^(\-)?[0-9]+(\.[0-9]*)?$/,
        pos:                    -1,
        uniqueHash:             1,
        thNode:                 null,
        tableId:                null,
        tableCache:             {},
        tmpCache:               {},
        sortActiveClass:        "sort-active",
        /*@cc_on
        /*@if (@_win32)
        colspan:                "colSpan",
        rowspan:                "rowSpan",
        @else @*/
        colspan:                "colspan",
        rowspan:                "rowspan",
        /*@end
        @*/

  //fdTableSort.addEvent(window, "load",fdTableSort.initEvt);
        addEvent: function(obj, type, fn, tmp) {
                tmp || (tmp = true);
                if( obj.attachEvent ) {
                        obj["e"+type+fn] = fn;
                        obj[type+fn] = function(){obj["e"+type+fn]( window.event );};
                        obj.attachEvent( "on"+type, obj[type+fn] );
                } else {
                        obj.addEventListener( type, fn, true );
                };
        },
        removeEvent: function(obj, type, fn, tmp) {
                tmp || (tmp = true);
                try {
                        if( obj.detachEvent ) {
                                obj.detachEvent( "on"+type, obj[type+fn] );
                                obj[type+fn] = null;
                        } else {
                                obj.removeEventListener( type, fn, true );
                        };
                } catch(err) {};
        },
        stopEvent: function(e) {
                e = e || window.event;

                if(e.stopPropagation) {
                        e.stopPropagation();
                        e.preventDefault();
                };
                /*@cc_on@*/
                /*@if(@_win32)
                e.cancelBubble = true;
                e.returnValue  = false;
                /*@end@*/
                return false;
        },
        parseClassName: function(head, tbl) {
                var colMatch = tbl.className.match(new RegExp(head + "((-[\\d]+([r]){0,1})+)"));
                return colMatch && colMatch.length ? colMatch[0].replace(head, "").split("-") : [];
        },
        disableSelection: function(element) {
                element.onselectstart = function() {
                        return false;
                };
                element.unselectable = "on";
                element.style.MozUserSelect = "none";
        },
        removeTableCache: function(tableId) {
                if(!(tableId in fdTableSort.tableCache)) return;

                fdTableSort.tableCache[tableId] = null;
                delete fdTableSort.tableCache[tableId];

                var tbl = document.getElementById(tableId);
                if(!tbl) return;
                var ths = tbl.getElementsByTagName("th");
                var a;
                for(var i = 0, th; th = ths[i]; i++) {
                        a = th.getElementsByTagName("a");
                        if(a.length) a[0].onkeydown = a[0].onclick = null;
                        th.onclick = th.onselectstart = th = a = null;
                };
        },
        removeTmpCache: function(tableId) {
                if(!(tableId in fdTableSort.tmpCache)) return;
                var headers = fdTableSort.tmpCache[tableId].headers;
                var a;
                for(var i = 0, row; row = headers[i]; i++) {
                        for(var j = 0, th; th = row[j]; j++) {
                                a = th.getElementsByTagName("a");
                                if(a.length) a[0].onkeydown = a[0].onclick = null;
                                th.onclick = th.onselectstart = th = a = null;
                        };
                };
                fdTableSort.tmpCache[tableId] = null;
                delete fdTableSort.tmpCache[tableId];
        },
        initEvt: function(e) {
                fdTableSort.init(false);
        },
        init: function(tableId) {
                if (!document.getElementsByTagName || !document.createElement || !document.getElementById) return;

                var tables = tableId && document.getElementById(tableId) ? [document.getElementById(tableId)] : document.getElementsByTagName("table");
                var c, ii, len, colMatch, showOnly, match, showArrow, columnNumSortObj, obj, workArr, headers, thtext, aclone, multi, colCnt, cel, allRowArr, rowArr, sortableTable, celCount, colspan, rowspan, rowLength;

                var a          = document.createElement("a");
                a.href         = "#";
                a.className    = "fdTableSortTrigger";

                var span       = document.createElement("span");

                for(var k = 0, tbl; tbl = tables[k]; k++) {

                        if(tbl.id) {
                                fdTableSort.removeTableCache(tbl.id);
                                fdTableSort.removeTmpCache(tbl.id);
                        };

                        allRowArr     = tbl.getElementsByTagName('thead').length ? tbl.getElementsByTagName('thead')[0].getElementsByTagName('tr') : tbl.getElementsByTagName('tr');
                        rowArr        = [];
                        sortableTable = false;

                        for(var i = 0, tr; tr = allRowArr[i]; i++) {
                                if(tr.getElementsByTagName('td').length || !tr.getElementsByTagName('th').length) { continue; };
                                rowArr[rowArr.length] = tr.getElementsByTagName('th');
                                for(var j = 0, th; th = rowArr[rowArr.length - 1][j]; j++) {
                                        if(th.className.search(/sortable/) != -1) { sortableTable = true; };
                                };
                        };

                        if(!sortableTable) continue;

                        if(!tbl.id) { tbl.id = "fd-table-" + fdTableSort.uniqueHash++; };

                        showArrow   = tbl.className.search("no-arrow") == -1;
                        showOnly    = tbl.className.search("sortable-onload-show") != -1;

                        columnNumSortObj = {};
                        colMatch         = fdTableSort.parseClassName(showOnly ? "sortable-onload-show" : "sortable-onload", tbl);
                        for(match = 1; match < colMatch.length; match++) {
                                columnNumSortObj[parseInt(colMatch[match], 10)] = { "reverse":colMatch[match].search("r") != -1 };
                        };

                        rowLength = rowArr[0].length;

                        for(c = 0;c < rowArr[0].length;c++){
                                if(rowArr[0][c].getAttribute(fdTableSort.colspan) && rowArr[0][c].getAttribute(fdTableSort.colspan) > 1){
                                        rowLength = rowLength + (rowArr[0][c].getAttribute(fdTableSort.colspan) - 1);
                                };
                        };

                        workArr = new Array(rowArr.length);
                        for(c = rowArr.length;c--;){ workArr[c]= new Array(rowLength); };

                        for(c = 0;c < workArr.length;c++){
                                celCount = 0;
                                for(i = 0;i < rowLength;i++){
                                        if(!workArr[c][i]){
                                                cel = rowArr[c][celCount];
                                                colspan = (cel.getAttribute(fdTableSort.colspan) > 1) ? cel.getAttribute(fdTableSort.colspan):1;
                                                rowspan = (cel.getAttribute(fdTableSort.rowspan) > 1) ? cel.getAttribute(fdTableSort.rowspan):1;
                                                for(var t = 0;((t < colspan)&&((i+t) < rowLength));t++){
                                                        for(var n = 0;((n < rowspan)&&((c+n) < workArr.length));n++) {
                                                                workArr[(c+n)][(i+t)] = cel;
                                                        };
                                                };
                                                if(++celCount == rowArr[c].length) break;
                                        };
                                };
                        };

                        for(c = 0;c < workArr.length;c++) {
                                for(i = 0;i < workArr[c].length;i++){

                                        if(workArr[c][i].className.search("fd-column-") == -1 && workArr[c][i].className.search("sortable") != -1) workArr[c][i].className = workArr[c][i].className + " fd-column-" + i;

                                        if(workArr[c][i].className.match('sortable')) {
                                                workArr[c][i].className = workArr[c][i].className.replace(/forwardSort|reverseSort/, "");

                                                if(i in columnNumSortObj) {
                                                        columnNumSortObj[i]["thNode"] = workArr[c][i];
                                                        columnNumSortObj["active"] = true;
                                                };

                                                thtext = fdTableSort.getInnerText(workArr[c][i]);

                                                for(var cn = workArr[c][i].childNodes.length; cn--;) {
                                                        // Skip image nodes and links created by the filter script.
                                                        if(workArr[c][i].childNodes[cn].nodeType == 1 && (workArr[c][i].childNodes[cn].className == "fdFilterTrigger" || /img/i.test(workArr[c][i].childNodes[cn].nodeName))) {
                                                                continue;
                                                        };
                                                        if(workArr[c][i].childNodes[cn].nodeType == 1 && /^a$/i.test(workArr[c][i].childNodes[cn].nodeName)) {
                                                                workArr[c][i].childNodes[cn].onclick = workArr[c][i].childNodes[cn].onkeydown = null;
                                                        };
                                                        workArr[c][i].removeChild(workArr[c][i].childNodes[cn]);
                                                };

                                                aclone = a.cloneNode(true);
                                                aclone.appendChild(document.createTextNode(thtext));
                                                aclone.title = "Sort on \u201c" + thtext + "\u201d";
                                                aclone.onclick = aclone.onkeydown = workArr[c][i].onclick = fdTableSort.initWrapper;
                                                workArr[c][i].appendChild(aclone);
                                                if(showArrow) workArr[c][i].appendChild(span.cloneNode(false));
                                                workArr[c][i].className = workArr[c][i].className.replace(/fd-identical|fd-not-identical/, "");
                                                fdTableSort.disableSelection(workArr[c][i]);
                                                aclone = null;
                                        };
                                };
                        };

                        fdTableSort.tmpCache[tbl.id] = {cols:rowLength, headers:workArr};

                        workArr = null;
                        multi   = 0;

                        if("active" in columnNumSortObj) {
                                fdTableSort.tableId = tbl.id;
                                fdTableSort.prepareTableData(document.getElementById(fdTableSort.tableId));

                                delete columnNumSortObj["active"];

                                for(col in columnNumSortObj) {
                                        obj = columnNumSortObj[col];
                                        if(!("thNode" in obj)) { continue; };
                                        fdTableSort.multi = true;

                                        len = obj.reverse ? 2 : 1;

                                        for(ii = 0; ii < len; ii++) {
                                                fdTableSort.thNode = obj.thNode;
                                                if(!showOnly) {
                                                        fdTableSort.initSort(false, true);
                                                } else {
                                                        fdTableSort.addThNode();
                                                };
                                        };

                                        if(showOnly) {
                                                fdTableSort.removeClass(obj.thNode, "(forwardSort|reverseSort)");
                                                fdTableSort.addClass(obj.thNode, obj.reverse ? "reverseSort" : "forwardSort");
                                                if(showArrow) {
                                                        span = fdTableSort.thNode.getElementsByTagName('span')[0];
                                                        if(span.firstChild) { span.removeChild(span.firstChild); };
                                                        span.appendChild(document.createTextNode(len == 1 ? " \u2193" : " \u2191"));
                                                };
                                        };
                                };
                                if(showOnly && (fdTableSort.tableCache[tbl.id].colStyle || fdTableSort.tableCache[tbl.id].rowStyle)) {
                                        fdTableSort.redraw(tbl.id, false);
                                };
                        } else if(tbl.className.search(/onload-zebra/) != -1) {
                                fdTableSort.tableId = tbl.id;
                                fdTableSort.prepareTableData(tbl);
                                if(fdTableSort.tableCache[tbl.id].rowStyle) { fdTableSort.redraw(tbl.id, false); };
                        };
                };

                fdTableSort.thNode = aclone = a = span = columnNumSortObj = thNode = tbl = allRowArr = rowArr = null;
        },
        initWrapper: function(e) {
                e = e || window.event;
                var kc = e.type == "keydown" ? e.keyCode != null ? e.keyCode : e.charCode : -1;
                if(fdTableSort.thNode == null && (e.type == "click" || kc == 13)) {
                        var targ = this;
                        while(targ.tagName.toLowerCase() != "th") { targ = targ.parentNode; };
                        fdTableSort.thNode = targ;
                        while(targ.tagName.toLowerCase() != "table") { targ = targ.parentNode; };
                        fdTableSort.tableId = targ.id;
                        fdTableSort.multi = e.shiftKey;
                        fdTableSort.addSortActiveClass();
                        setTimeout(fdTableSort.initSort,5,false);
                        return fdTableSort.stopEvent(e);
                };
                return kc != -1 ? true : fdTableSort.stopEvent(e);
        },
        jsWrapper: function(tableid, colNums) {
                if(!(tableid in fdTableSort.tmpCache)) { return false; };
                if(!(tableid in fdTableSort.tableCache)) { fdTableSort.prepareTableData(document.getElementById(tableid)); };
                if(!(colNums instanceof Array)) { colNums = [colNums]; };

                fdTableSort.tableId = tableid;
                var len = colNums.length, colNum;

                if(fdTableSort.tableCache[tableid].thList.length == colNums.length) {
                        var identical = true;
                        var th;
                        for(var i = 0; i < len; i++) {
                                colNum = colNums[i];
                                th = fdTableSort.tmpCache[tableid].headers[0][colNum];
                                if(th != fdTableSort.tableCache[tableid].thList[i]) {
                                        identical = false;
                                        break;
                                };
                        };
                        if(identical) {
                                fdTableSort.thNode = th;
                                fdTableSort.initSort(true);
                                return;
                        };
                };

                fdTableSort.addSortActiveClass();

                for(var i = 0; i < len; i++) {
                        fdTableSort.multi = i;
                        colNum = colNums[i];
                        fdTableSort.thNode = fdTableSort.tmpCache[tableid].headers[0][colNum];
                        fdTableSort.initSort(true);
                };
        },
        addSortActiveClass: function() {
                if(fdTableSort.thNode == null) { return; };
                fdTableSort.addClass(fdTableSort.thNode, fdTableSort.sortActiveClass);
                fdTableSort.addClass(document.getElementsByTagName('body')[0], fdTableSort.sortActiveClass);
        },
        removeSortActiveClass: function() {
                if(fdTableSort.thNode == null) return;
                fdTableSort.removeClass(fdTableSort.thNode, fdTableSort.sortActiveClass);
                fdTableSort.removeClass(document.getElementsByTagName('body')[0], fdTableSort.sortActiveClass);
        },
        doCallback: function(init) {
                if(!fdTableSort.tableId || !(fdTableSort.tableId in fdTableSort.tableCache)) { return; };
                fdTableSort.callback(fdTableSort.tableId, init ? fdTableSort.tableCache[fdTableSort.tableId].initiatedCallback : fdTableSort.tableCache[fdTableSort.tableId].completeCallback);
        },
        addClass: function(e,c) {
                if(new RegExp("(^|\\s)" + c + "(\\s|$)").test(e.className)) { return; };
                e.className += ( e.className ? " " : "" ) + c;
        },
        /*@cc_on
        /*@if (@_win32)
        removeClass: function(e,c) {
                e.className = !c ? "" : e.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)"), " ").replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
        },
        @else @*/
        removeClass: function(e,c) {
                e.className = !c ? "" : e.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)"), " ").replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        },
        /*@end
        @*/
        callback: function(tblId, cb) {
                var func;
                if(cb.indexOf(".") != -1) {
                        var split = cb.split(".");
                        func = window;
                        for(var i = 0, f; f = split[i]; i++) {
                                if(f in func) {
                                        func = func[f];
                                } else {
                                        func = "";
                                        break;
                                };
                        };
                } else if(cb + tblId in window) {
                        func = window[cb + tblId];
                } else if(cb in window) {
                        func = window[cb];
                };
                if(typeof func == "function") { func(tblId, fdTableSort.tableCache[tblId].thList); };
                func = null;
        },
        prepareTableData: function(table) {
                var data = [];

                var start = table.getElementsByTagName('tbody');
                start = start.length ? start[0] : table;

                var trs = start.rows;
                var ths = table.getElementsByTagName('th');

                var numberOfRows = trs.length;
                var numberOfCols = fdTableSort.tmpCache[table.id].cols;

                var data = [];
                var identical = new Array(numberOfCols);
                var identVal  = new Array(numberOfCols);

                for(var tmp = 0; tmp < numberOfCols; tmp++) identical[tmp] = true;

                var tr, td, th, txt, tds, col, row;

                var re = new RegExp(/fd-column-([0-9]+)/);
                var rowCnt = 0;

                var sortableColumnNumbers = [];

                for(var tmp = 0, th; th = ths[tmp]; tmp++) {
                        if(th.className.search(re) == -1) continue;
                        sortableColumnNumbers[sortableColumnNumbers.length] = th;
                };

                for(row = 0; row < numberOfRows; row++) {

                        tr              = trs[row];
                        if(tr.parentNode != start || tr.getElementsByTagName("th").length || (tr.parentNode && tr.parentNode.tagName.toLowerCase().search(/thead|tfoot/) != -1)) continue;
                        data[rowCnt]    = [];
                        tds             = tr.cells;

                        for(var tmp = 0, th; th = sortableColumnNumbers[tmp]; tmp++) {
     

分享到:
评论

相关推荐

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    在原版的 `bootstrap-table-fixed-columns` 插件中,可能会遇到一些问题,如冻结列后排序功能失效、列宽显示不正确以及无法正常合并行。这些问题对于表格的正常使用和美观性都是不利的。描述中的内容表明,我们已经...

    Js表格点击列排序,选择行,Blue Table代码.rar

    综上所述,"Blue Table"是一个强大的JavaScript表格插件,提供了点击列排序和选择行的功能,这对于任何需要处理大量数据的Web应用都是宝贵的工具。通过理解其内部机制和提供的API,开发者能够创建出具有高效数据操作...

    jquery table 排序插件

    defaultColumn: 1, // 默认按第二列排序 order: 'desc', // 默认排序方式为降序 ignoreColumns: [0] // 第一列不参与排序 }); }); ``` 对于复杂的数据类型,如日期和数字,插件可能需要额外的处理来正确排序。...

    table过滤与排序

    在IT领域,特别是针对Web Dynpro技术,"table过滤与排序"是一个关键的主题,它涉及到在Web应用程序中如何有效地管理和展示数据。以下是对这一主题的深入解析,包括其概念、实施步骤以及相关技术细节。 ### 核心概念...

    js Table 选中行排序 多列锁定(多个OrderBy)

    在实现多列排序时,用户可以点击不同的列头进行排序。此时,我们需要维护一个排序规则列表,每次点击列头就更新这个列表,并根据列表中的顺序和方向进行复合排序。 接着,我们讨论多列锁定(固定列)的功能。多列...

    js代码操作table排序功能

    排序功能通常针对`&lt;th&gt;`元素,因为它们通常代表表格列的标题,用户点击这些标题时,应该能够按照该列的数据进行升序或降序排序。 1. **基础排序算法** 在JavaScript中,我们可以使用`Array.prototype.sort()`方法...

    Boostrap table 列头和内容不对齐问题,终极解决方案

    Bootstrap Table 是一个基于 Bootstrap 框架的动态表格插件,它提供了丰富的功能,如排序、筛选、分页等。然而,在实际应用中,我们可能会遇到一个常见的问题:表格的列头(thead)与内容(tbody)在对齐上出现问题...

    豪华版js实现table动态排序

    "豪华版js实现table动态排序"是一个针对网页表格进行动态排序的解决方案,它允许用户通过点击表头来切换排序依据,同时还能设定某些列不参与排序。以下是对这个主题的详细讲解: 1. **JavaScript基础**:JavaScript...

    jquery table 表格 排序

    1. `ordert`:这是排序所针对的表格的ID,用于唯一标识表格元素。在HTML中,每个表格都有一个唯一的`id`属性,通过这个属性我们可以引用并操作表格。 2. `3`:这个参数表示我们要根据表格的第几列进行排序。在HTML...

    Div仿制table送自定义Scrollbar支持排序

    3. **排序功能:** 对于数据的排序,我们可以使用JavaScript事件监听(如click事件)来捕获用户对表头的点击操作,然后根据选定的列进行数据排序。常见的排序算法有冒泡排序、快速排序等,对于大量数据,还可以考虑...

    js-table-sorter(纯js实现点击表头排序)

    - **多列排序**:支持多列排序,可以通过多次点击不同的表头来切换排序依据。 - **自定义排序**:如果内置的排序规则不能满足需求,可以提供自定义排序函数,对特定列的数据进行特殊处理。 - **反馈视觉效果**:...

    vueeasytable基于vue2x实用型table组件

    组件内置了列排序功能,用户可以点击列头对数据进行升序或降序排列。这对于数据量大、需要快速定位关键数据的情况非常有帮助,同时也减少了开发者实现此类功能的工作量。 五、自定义列 VueEasyTable允许开发者...

    vxe-table vue表格解决方案 v4.5.20.zip

    4. **虚拟滚动**:针对大数据量的场景,vxe-table采用虚拟滚动技术,只渲染可视区域的行,极大地提高了性能。 5. **国际化支持**:内置多语言支持,方便不同地区用户使用。 6. **扩展性强**:vxe-table提供了一...

    安卓使用smartTable生成表格

    SmartTable提供了丰富的API,可以设置全局样式或针对特定单元格设置个性化样式。同时,还可以自定义行高和列宽,以适应不同的显示需求。 4. **导入导出Excel** 在安卓应用中,SmartTable支持将表格数据导出为Excel...

    图片拖动排序js(table)

    总之,"图片拖动排序js(table)"是一个结合了JavaScript、HTML和CSS技术的前端功能,通过拖放API实现了用户友好的表格列排序。它提升了用户在浏览和操作数据时的交互体验,是现代Web应用中提升用户体验的一个典型...

    bootstrap-table-demo

    排序功能通过`sortable`属性激活,可以针对特定列进行设定。 5. **导出功能**:Bootstrap Table 支持将表格数据导出为CSV、Excel、PDF等多种格式,方便数据的存储和共享。导出功能通过`exportOptions`进行配置,...

    css3表格列自由拖动排序js代码.zip

    《CSS3表格列自由拖动排序JS代码详解》 在网页设计中,用户交互体验是至关重要的一个环节,其中表格的列拖动排序功能能够极大地提高用户的操作便捷性。本篇将详细介绍如何利用CSS3和JavaScript实现表格列的自由拖动...

    Table Table Table

    10. **响应式设计**: 针对移动设备,表格需要适应不同的屏幕尺寸,利用CSS媒体查询和Flexbox或Grid布局可以实现响应式表格。 总结来说,表格是IT行业中的核心元素,从网页展示到后台数据处理,无处不在。理解和熟练...

    react-reactdatacomponentsReact表格组件具有排序过滤和分页功能

    `react-data-components`是一个专门针对这种需求设计的库,它提供了一个强大的React表格组件,支持数据的排序、过滤和分页功能,极大地提高了开发效率和用户体验。本文将深入探讨这个组件的核心特性、用法以及如何在...

    表格自动排序,点击任意列,可以实现该列的自动排序,js写的

    关键在于为表格的thead中的th元素添加特定的属性,例如`data-key`,用来指定该列要按照哪个字段进行排序。 `sortable.js`和`sortable_us.js`是排序功能的核心脚本。这两个文件都是JavaScript代码,实现了排序算法。...

Global site tag (gtag.js) - Google Analytics