js 实现table表格拖拽和点击表头升降序排序-CSDN博客

js 实现table表格拖拽和点击表头升降序排序，写的比较乱，用的时候可以把其中的一些模块函数提取出来

样式，由于是可拖拽表格，所以样式

table tr th{cursor:move;}

js实现

var arrTh = [];//保存初始每个th位置的数组
        $('.Report th').each(function (i, e) {
            arrTh.push({ 'index': i, 'left': $(e).offset().left });
            $('.Report th').eq(i).append('<i class="fa fa-caret-down"></i>')// 在刚开始的时候默认向下箭头
        });
        var thisThIndex = 0;
        var thisThLeft = 0;//存储当前拖拽层的位置
        var isMove = false;
        var flag = false;
        // 鼠标按下的事件，如果拖拽超过一个单元格的距离，就拖拽成功
        $(document).on('mousedown', '.Report th', function (e) { 
            var initX = e.pageX - $(this).offset().left;
            var initY = $(this).offset().top;//点击的th到页面顶部的距离
            var thisHtml = $(this).html();//点击的th的html
            thisThIndex = $(this).index();//点击的th的索引
            thisThLeft = $(this).offset().left;//当前拖拽层的位置
            $(this).css({ 'background': '#ccc' });
            var createDiv = $('<div class="createDiv">' + thisHtml + '</div>');//创建一个div用于拖拽显示
            var createDivBg = $('<div class="createDivBg"></div>');//创建一个背景，防止复制文字
            $('body').append(createDiv, createDivBg);//填充到页面中
            createDiv.css({ 'top': initY, 'left': $(this).offset().left });// 'width': $(this).width(),//设置拖拽层的初始位置

            // 按表头排序，点击一次升序，再点降序
            var n = $(this).index()
            console.log(n)
            $(this).find('i').removeClass('fa-caret-down').addClass('fa-caret-up') // 点击的时候升序排列，向下箭头变为向上箭头
            var tbody = $(this).parents("table").children('tbody').eq(0);
            var rows = tbody.find('tr').not(".noselected"); // 最后两行是总计，不参加排序
            rows = Array.prototype.slice.call(rows, 0); // 把对象转成数组
            rows.sort(function (row1, row2) {
　　　　　　　　　　// 如果都是数字，就按数字排序，否则按字符串排序
                if (!(Number($(row1).children('td').eq(n).text()) && Number($(row2).children('td').eq(n).text()))) {
                    var val1 = $(row1).children('td').eq(n).text();
                    var val2 = $(row2).children('td').eq(n).text();
                }
                else {
                    var val1 = Number($(row1).children('td').eq(n).text());
                    var val2 = Number($(row2).children('td').eq(n).text());
                }
                if (val1 > val2) { 
                    return 1;
                } else if (val1 < val2) {
                    return -1;
                } else {
                    return 0;
                }
            });

            if (flag) {
                rows.reverse(); // 颠倒数组中的元素
                $(this).find('i').removeClass('fa-caret-up').addClass('fa-caret-down')
            }

            tbody.prepend(rows); // 由于最后两行不参加排序，所以加到tbody前面
            flag = !flag;


            $(document).on('mousemove', function (ev) { // 鼠标移动
                if (Math.abs(ev.pageX - e.pageX) > 30) {//如果鼠标移动的位置超过30
                    isMove = true;
                    thisThLeft = ev.pageX - createDiv.width() / 2;//刷新当前拖拽层的位置
                    if (thisThLeft <= $('.Report th').offset().left) {
                        thisThLeft = $('.Report th').offset().left;
                    }
                    if (thisThLeft >= $(window).width() - 75) {
                        thisThLeft = $(window).width() - 75;
                    }
                    createDiv.css({ 'left': thisThLeft, 'top': initY });//拖拽层跟着鼠标走
                    var newsindex = 0;//循环的最后一个小于thisThLeft的索引
                    $.each(arrTh, function (index, element) {//遍历数组
                        var thIndex = element.index;//页面中所有th的索引
                        var thLeft = element.left;//页面中所有th到页面右边的距离
                        if (thisThLeft > thLeft) {
                            newsindex = thIndex;//循环的最后一个小于thisThLeft的索引
                        }
                    });
                    $('.Report th').eq(newsindex).css({ 'border-right': '2px solid red' }).siblings('th').css({ 'border-right': '1px solid #ddd' });//给当前th加边框
                    $('.Report tbody tr').each(function (tdindex, tdelement) {//给对应的列td加边框
                        $(tdelement).find('td').eq(newsindex).css({ 'border-right': '2px solid red' }).siblings('td').css({ 'border-right': '1px solid #ddd' });
                    });
                }
            });
        });
         $(document).on('mouseup', function (n) { // 鼠标抬起
            $('.Report th').css({ 'border-right': '1px solid #ddd', 'background': 'none' });
            $('.Report td').css({ 'border-right': '1px solid #ddd' });
            $('.createDiv').remove();
            $('.createDivBg').remove();
            $(document).unbind('mousemove');
            if (isMove) {
                isMove = false;
                var newsindex = 0;//循环的最后一个小于thisThLeft的索引
                $.each(arrTh, function (index, element) {
                    var thIndex = element.index;
                    var thLeft = element.left;
                    if (thisThLeft > thLeft) {
                        newsindex = thIndex;
                    }
                });
                var newth = $('.Report th').eq(thisThIndex).prop('outerHTML');
                if (newsindex >= thisThIndex) {
                    if (newsindex != 0) {//如果是第一个的情况下
                        $('.Report th').eq(thisThIndex).remove();
                        $('.Report th').eq(newsindex - 1).after(newth);
                    }
                } else {
                    if ((newsindex + 2) != arrTh.length) {//如果是最后一个的情况下
                        $('.Report th').eq(thisThIndex).remove();
                        $('.Report th').eq(newsindex + 1).before(newth);
                    }
                }
                $('.Report tbody tr').each(function (tdindex, tdelement) {
                    var newtd = $(tdelement).find('td').eq(thisThIndex).prop('outerHTML');
                    if (newsindex >= thisThIndex) {
                        if (newsindex != 0) {
                            $(tdelement).find('td').eq(thisThIndex).remove();
                            $(tdelement).find('td').eq(newsindex - 1).after(newtd);
                        }
                    } else {
                        if ((newsindex + 2) != arrTh.length) {
                            $(tdelement).find('td').eq(thisThIndex).remove();
                            $(tdelement).find('td').eq(newsindex + 1).before(newtd);
                        }
                    }
                });
                arrTh = [];//重置保存每个th位置的数组
                var checkedColunms = '';
                $('.Report th').each(function (i, e) {
                    arrTh.push({ 'index': $(e).index(), 'left': $(e).offset().left }); // 移动时，单元格offset偏移
                    checkedColunms += $(e).attr('data-Value') + ',';
                });
                checkedColunms = checkedColunms.substring(0, checkedColunms.length - 1);
                $('#CheckedColunms').val(checkedColunms);
                $('.allpage a').each(function (ind, ele) { // 分页的表格，遍历并检查后面页数对应的列是不是拖拽后的
                    var url = $(ele).attr('href');
                    var reg = /CheckedColunms=([^&^\?]+)/ig;
                    if (url.match(reg) != null) { // 正则匹配 加参数
                        $(ele).attr('href', url.replace(/CheckedColunms=([^&^\?]+)/ig, "CheckedColunms=" + checkedColunms));
                    } else {
                        $(ele).attr('href', url + (url.indexOf("?") == -1 ? "?" : "&") + "CheckedColunms=" + checkedColunms);
                    }
                });
            } else {
                arrTh = [];//重置保存每个th位置的数组
                $('.Report th').each(function (i, e) {
                    arrTh.push({ 'index': $(e).index(), 'left': $(e).offset().left });
                });
                
            }
            $('.last-td').css('border-width', '0 0 0 0', 'border-color', '#fff');
        });