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