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