javascript组件——按thead排序的table

最新推荐文章于 2024-01-18 11:49:12 发布

lizzvia

最新推荐文章于 2024-01-18 11:49:12 发布

阅读量632

点赞数

分类专栏： javascript jquery 前端

本文链接：https://blog.csdn.net/u013237862/article/details/52957561

版权

这是一个使用javascript编写的表格生成器，支持thead排序。组件能够处理不同数据类型的排序，如整数、浮点数、日期和星期。通过点击表头进行升序或降序排序，并提供了分时函数优化大量数据的渲染。

摘要由CSDN通过智能技术生成

/**
 * options need table title，thead，rowData，$root
 * generated by dx
 */
var TableGenerator = (function(global,$){
    var testIntNum =  / ^[0-9]*$/g,
        testFloatNum  = /^[1-9]\d*.\d*|0.\d*[1-9]\d*$/g,
        testENum = /^([-])?(?!0\d)\d+(\.\d{1,})?(E([-])?\d+)?$/g,
        testDate = /^\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}$/g,
        testWeek = /^(Monday|monday|Tuesday|tuesday|Wednesday|wednesday|Thursday|thursday|Friday|friday|Saturday|saturday|Sunday|sunday)$/g;
//排序
    var tableSort = function(tableOjbect){
        tableOjbect.find('thead th').click(function(){
            var dataType = $(this).attr('data-type') || 'text';
            var index = tableOjbect.find('thead th').index(this) + 1;
            var arr = [];
            var rows = tableOjbect.find('tbody tr');

            $.each(rows,function(index,elem){arr[index] = rows[index]});

            if($(this).hasClass('current')){
                arr.reverse();
            }else{
                arr.sort(Utils.sortStr(index,dataType));

                tableOjbect.find('.current').removeClass('current');
                $(this).addClass('current');
            }

            var fragment = document.createDocumentFragment();
            $.each(arr,function(index){
                fragment.appendChild(arr[index]);
            })