最新通过javascritp对表格进行列拖动排序

以下是三零网为大家整理的最新通过javascritp对表格进行列拖动排序的文章，希望大家能够喜欢!

以下是代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | www.zg700.com" />
<link rel="icon" href="/favicon.ico" type="p_w_picpath/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="p_w_picpath/x-icon" media="screen" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script type="text/javascript" src="/js/main.js"></script>
<meta name="description" content="网页制作" />
<meta name="keywords" content="" />

<style type="text/css">
<!--

-->
</style>

<script language="javascript">
<!--
  var tbody, headRow;
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
var ColumnCount = null;
var mustRefresh = false;
var dragColor=null;
var hitColor=null;
var HasTopMostPager=null;
 var PowerTable=null;
//
// Init function.. Fills out variables with data
// loaded with oncontentready.
//将table初始化
function initDragTable(table)
{

var i;

PowerTable=table;

if (dragColor == null)
  dragColor = "white";
 if (hitColor == null)
  hitColor = "lightblue";

// get TBODY - take the first TBODY for the table
 tbody = PowerTable.tBodies(0);

if (!tbody) return;

// get THEAD - take the unique THEAD for the table
 var click = PowerTable.tHead;
 if (!click)  return;

// Determine the row to use (read from HasPager)
 if (HasTopMostPager == "true")
  headRow = click.children[1];
 else
  headRow = click.children[0];

if (headRow.tagName != "TR") return;

headRow.runtimeStyle.cursor = "hand"; //"move";
  ColumnCount = headRow.children.length;

for(i=0; i < ColumnCount ; i++)
  {
    arrHitTest[i] = new Array();
  }

var cx=0;
  var cy=0;
  var c;
  defaultTitleColor = headRow.children[0].currentStyle.backgroundColor;

for (i=0; i<ColumnCount ; i++) {

var clickCell = headRow.children[i];
 clickCell.selectIndex = i;
 c = clickCell.offsetParent;

if (cx == 0 && cy == 0)
 {
  while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
  }
 }

arrHitTest[i][0] = cx + clickCell.offsetLeft;
 arrHitTest[i][1] = cy + clickCell.offsetTop;
 arrHitTest[i][2] = clickCell;
 arrHitTest[i][3] = cx + clickCell.offsetLeft + clickCell.clientWidth;

clickCell.attachEvent("onmousedown",onMouseDown);
  }

PowerTable.attachEvent("onmousemove",onMouseMove);
  PowerTable.attachEvent("onmouseup",onMouseUp);

///
  if (arrHitTest[0][0] == arrHitTest[0][3])
 mustRefresh = true;
}

function InitHeader()
{
  var cx=0;
  var cy=0;
  var c;

for (i=0; i<ColumnCount ; i++) {

var clickCell = headRow.children[i];
 clickCell.selectIndex = i;
 c = clickCell.offsetParent;

if(cx == 0 && cy == 0 )
 {
  while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
  }
 }

arrHitTest[i][0] = cx + clickCell.offsetLeft;
 arrHitTest[i][1] = cy + clickCell.offsetTop;
 arrHitTest[i][2] = clickCell;
 arrHitTest[i][3] = cx + clickCell.offsetLeft + clickCell.clientWidth;

}
}

function ChangeHeader(iChange)
{
 for(var y = 0; y < arrHitTest.length; y++)
 {
 if (arrHitTest[y][2].currentStyle.backgroundColor == hitColor)
  arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
 }

if(iChange == "-1") return;

arrHitTest[iChange][2].style.backgroundColor = hitColor;
}

function onMouseUp(e)
{
 if(!bDragMode) return;
 bDragMode = false;

var iSelected = objDragItem.selectIndex;

objDragItem.removeNode(true);
 objDragItem = null;

ChangeHeader(-1);

if( (iArrayHit - 1) < 0 || iSelected < 0) return; // default faliure

// iSelected is the 0-based index of the column being moved
 // (iArrayHit-1) is the 0-based index of the column being replaced
 CopyRow(iSelected, (iArrayHit - 1) );

// Reset our variables
 iSelected = 0;
 iArrayHit = -1;
}

function onMouseDown(e)
{
 // If the grid is contained in an invisible panel (other DHTML stuff)
 // the initialization step must be repeated to take real values
 if( mustRefresh) {
  InitHeader();
  mustRefresh = false;
 }

bDragMode  = true;
 var src  = e.srcElement;
 var c  = e.srcElement;

while (src.tagName != "TD")
  src = src.parentElement;

// Create our header on the fly
 objDragItem = document.createElement("DIV");
 objDragItem.innerHTML  = src.innerHTML;
 objDragItem.style.height = src.offsetParent.clientHeight;
 objDragItem.style.width  = src.clientWidth;
 objDragItem.style.background = dragColor;
 objDragItem.style.fontColor = src.currentStyle.fontColor;
 objDragItem.style.position  = "absolute";
 objDragItem.style.filter  = "progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
 objDragItem.selectIndex  = src.selectIndex;
        objDragItem.style.border  = "1 solid black";
 while (c.offsetParent != null)
        {
  objDragItem.style.y += c.offsetTop;
  objDragItem.style.x += c.offsetLeft;
  c = c.offsetParent;
 }

objDragItem.style.borderStyle = "dashed";
  objDragItem.style.borderWidth = "1px";
  objDragItem.style.display = "none";

src.insertBefore(objDragItem);
}

function onMouseMove(e)
{
 if(!bDragMode || !objDragItem) return;

// If we aren't dragging or our object is null, we return

// Hardcoded value for height difference
 var midWObj = objDragItem.style.posWidth / 2;
 var midHObj = 12;

// Save mouse's position in the document
     var intTop = e.clientY +document.body.scrollTop;
     var intLeft = e.clientX + document.body.scrollLeft;

var cx=0,cy=0;
 var elCurrent = objDragItem.offsetParent;
 if (elCurrent != null)
 {
          while (elCurrent.offsetParent != null) {
                  cx += elCurrent.offsetTop;
                  cy += elCurrent.offsetLeft;
                  elCurrent = elCurrent.offsetParent;
          }
 }

objDragItem.style.pixelTop  = intTop  - cx - midHObj;
      objDragItem.style.pixelLeft = intLeft - cy - midWObj;

if(objDragItem.style.display == "none")
  objDragItem.style.display = "";

iArrayHit = CheckHit(intTop , intLeft , e);

e.cancelBubble = false;
 e.returnValue = false;
}

function CheckHit(x,y,e)
{
 midWObj = objDragItem.style.posWidth / 2;
 midHObj = 12;

for(var i=0; i < ColumnCount; i++)
 {
  if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] ))
  {
   ChangeHeader(i);
   return i + 1;
  }
 }
 return -1;
}

//
// Copy from row to row.. Does the Header also.
//
function CopyRow(from, to)
{
 if(from == to) return;

var origfrom = from;
 var origto = to;
 var iDiff = 0;

if( from > to )
 {

iDiff = from - to;

var saveObj  = headRow.children[from].innerHTML;
  var saveWidth  = headRow.children[from].width; 
for(var i = 0 ; i < iDiff; i++)
  {
   headRow.children[from].innerHTML = headRow.children[from - 1].innerHTML;
   headRow.children[from].width = headRow.children[from - 1].width;
   from--;
  }
  headRow.children[to].innerHTML  = saveObj;
  headRow.children[to].width = saveWidth;
 }
 else
 {

iDiff = to - from;

var saveObj = headRow.children[from].innerHTML;
  var saveWidth  = headRow.children[from].width;

for(var i = 0 ; i < iDiff; i++)
  {
   headRow.children[from].innerHTML = headRow.children[from + 1].innerHTML;
   headRow.children[from].width = headRow.children[from + 1].width;
   from++;
  }

headRow.children[to].innerHTML  = saveObj;
  headRow.children[to].width = saveWidth;
 }

for(var i = 0 ; i < headRow.children.length; i++)
   headRow.children[i].selectIndex = i;

InitHeader();
 for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
 {
  from = origfrom;
  to = origto;
  if( from > to )
  {
   iDiff = from - to;
   var saveObj;
   try {
    saveObj = tbody.children[iRowInsert].children[from].innerHTML;
   } catch(e) { saveObj = null; }
   for(var i = 0 ; i < iDiff; i++)
   {
    try {
     tbody.children[iRowInsert].children[from].innerHTML = tbody.children
[iRowInsert].children[from - 1].innerHTML;
     from--;
    } catch(e) {}
   }
   if (saveObj != null)
    tbody.children[iRowInsert].children[to].innerHTML = saveObj;
  }
  else
  {
   iDiff = to - from;
   var saveObj;
   try {
    saveObj = tbody.children[iRowInsert].children[from].innerHTML;
   } catch(e) {}
   for(var i = 0 ; i < iDiff; i++)
   {
    try {
     tbody.children[iRowInsert].children[from].innerHTML = tbody.children
[iRowInsert].children[from + 1].innerHTML;
     from++;
    } catch(e) {}
   }
   try {
    tbody.children[iRowInsert].children[to].innerHTML = saveObj;
   } catch(e) {}
  }
 }

var buf = "";
  for(var i=0; i<headRow.children.length; i++)
  {
   var td = headRow.children[i];
   tmp = td.innerHTML;
   pos = tmp.indexOf("<");
   if (pos > 0)
    tmp = tmp.substring(0, pos);
   else
   {
    if (pos == 0)
     tmp = td.innerText;
   }

buf += tmp;
   if (i < headRow.children.length-1)
    buf += ",";
  }}

//-->
</script>

</head>
<body οnlοad="initDragTable(exote)">

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="" align="center" id="exote">
 <tbody>
 <thead>
 
  <td>世界</td>
  <td>中国</td>
  <td>美国</td>
 
 </thead>
 <tr>
  <td>55</td>
  <td>66</td>
  <td>77</td>
 </tr>
 </tbody>
</table>

</body>
</html>

转载来自：http://www.q3060.com/list3/list115/25.html

转载于:https://blog.51cto.com/11156643/1743809

通过javascritp对表格进行列拖动排序相关推荐

  1. element-ui 树形表格 懒加载 手风琴模式 拖动排序

    手风琴模式 实现的效果: 其中一个节点展开时,其他节点关闭,一直保持最多只有一个节点是展开的. 需要解决的问题: element-ui 树形懒加载表格自带的节点展开时,默认只有第一次才会触发load函 ...

  2. android 二级列表拖动排序_Excel的数据透视表六种排序方法

    Excel的数据透视表排序不像表格中那样操作灵活,很多小伙伴对此不熟悉,本文系统讲解数据透视表的各种排序. 一.常规排序 二.组内排序 三.多关键字排序 四.手动拖动排序 五.手动输入排序 六.设置透 ...

  3. JavaScript操作表格进行拖拽排序

    <js-dodo-table- Drag and Drop JQuery plugin > 以上插件可对table进行排序,拖动! 例如有下面一个样子的id为table的表格: <t ...

  4. antd的table进行列筛选时，更新dataSource，为什么table显示暂无数据？

    我想当然地认为只要dataSource改变,那么<Table>组件就会重新渲染, 但是有一种特殊情况例外: 在onFilter()中不写筛选条件,在调用filterDropdown进行列筛 ...

  5. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  6. 【Axure教程】拖动排序——扣款顺序

    随着移动支付的发展,移动支付的途径和方式也越来越多,常见的有钱包余额支付.支付宝支付.微信支付.银行卡支付--随着绑定的账户越来越多,我们需要一个设置扣款顺序的功能页面. 所以今天作者就教大家如果做一 ...

  7. 【Android 事件分发】ItemTouchHelper 实现拖动排序

    Android 事件分发 系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...

  8. koa2 导出excel表格设置样式_一调整Excel表格的行列宽度，图片又得重新调整？点这个设置就行...

    不知道大家有没有遇到过这样的情况?就是当我们在调整表格的行列宽度的时候,表格里面的图片就会发生变化,像下图这样. 然后我们就需要把图片一个个调整成跟表格行列宽度一致,这样简直太麻烦了有木有! 一.图片 ...

  9. Excel 表格实现多列排序

    Excel 表格实现多列排序 1.原始数据 2.需要实现  按照 表主键 有效日期 创建日期 三列进行升序排列 数据->排序-> 添加条件->选择列名  点击确定 3.排序后的结果 ...

  10. layui表格（table）排序

    layui表格本身提供sort排序,但是只能排序当前一页:如果后台返回几十页数据,需要排序显示,该如何做呢,这里闲心大神提供了一个sort监听方法: 通过监听排序的列,把对应的参数传给后台,然后重渲染 ...

最新文章

  1. R 语言 download.file 的几点知识
  2. Nature综述：多年冻土的微生物组
  3. 逆向工程、软件后门……原来美剧《硅谷》里藏着这么多知识点
  4. 易语言不用oracle客户端_大叔学中文编程之易语言02
  5. Spark学习之路 （二十三）SparkStreaming的官方文档
  6. Eclipse在当前行之上插入一行
  7. 网站做渗透测试服务的步骤
  8. ArcGIS中地理配准与空间校正的不同
  9. Word2016 页码从任意页开始
  10. 微信抢红包的方案_高并发10-微信抢红包实现
  11. 上微信怎么同时用计算机,怎么在电脑上同时登陆两个微信
  12. MBTI职业性格测试 测评报告
  13. “远香烟·近健康”乡风文明之禁烟活动
  14. C++ 函数的递归调用
  15. 从虚拟试衣到设计海报，京东黑科技让时尚行业大变脸
  16. .net源码分析 – DictionaryTKey, TValue
  17. 移动端百度关键词排名SEO优化如何做
  18. 前端开发：JS中let、var和const的区别详解
  19. Verilog基本语法之数据类型（二）
  20. 作为项目经理，如何做好项目进度管理

热门文章

  1. SendMessage,PostMessage
  2. liunx安装jdk，实测有效
  3. 当前五大浏览器内核及简史
  4. Hive 复制分区表和数据
  5. 关于bootstrap--排版（标题、强调、背景、插入符等）
  6. 【出版直播】博客园征途系列，《设计模式——基于C#的工程化实现及扩展》定价修改...
  7. 章节十五、6-log4 2-用默认的配置
  8. 某绒面试的病毒分析（一）
  9. Codeforces Round #503 (by SIS, Div. 2)
  10. hysbz 2243 染色(树链剖分)