js 實現table表格拖拽和點擊表頭升降序排序

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');
        });