`
j2ee_yohn
  • 浏览: 172300 次
  • 性别: Icon_minigender_1
  • 来自: 湖南/株洲
社区版块
存档分类
最新评论

js操作table列的拖动

    博客分类：
  • web
CC++C#JavaScriptCSS 
阅读更多

<!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>js操作table列的拖动</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.nfs7.com" />
        <meta name="Copyright" content="Copyright (c) 2000-2005 www.chinaddv.com" />
        <link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/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 onload="initDragTable(exote)">
        <table border="1" cellpadding="0" cellspacing="0" width="100%" height="" align="center" id="exote">
            <thead>
                <td>
                    世界
                </td>
                <td>
                    中国
                </td>
                <td>
                    美国
                </td>
            </thead>
            <tbody>
                <tr>
                    <td>
                        55
                    </td>
                    <td>
                        66
                    </td>
                    <td>
                        77
                    </td>
                </tr>
                <tr>
                    <td>
                        world
                    </td>
                    <td>
                        china
                    </td>
                    <td>
                        USA
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
javascript 在表格之间自由拖动列
文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2007111/81549.html)

分享到：
| js排序table
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现table列头拖拽

    js实现table列头拖拽，。。。。。。

    vue Element ui实现table列拖动效果

    需要注意的是，实际项目中可能需要考虑更多细节，例如防止多次拖动操作导致的数据混乱，以及兼容不同浏览器的差异。此外，为保持良好的用户体验，可能还需要添加过渡动画和拖动指示器等。通过以上的实现方式，你可以...

    bootstrap table实现列拖动.rar

    在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用...Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js

    elementui table列的拖拽功能

    ElementUI 是一个基于 Vue.js 的开源 UI 组件库，提供了丰富的界面组件，其中包括表格（Table）组件。在实际开发中，我们经常需要实现表格列的拖拽功能，以方便用户根据需求自定义列的顺序。这个压缩包文件提供的...

    table 列可左右拖动

    "table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...

    Table 列宽拖动

    当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。

    bootstraptable-reorder-columns表格拖拽排序列

    BootstrapTable 提供的拖拽列排序特性使得用户可以根据自己的需求快速定制视图，而无需开发者编写大量的定制代码。这个功能尤其适用于那些需要频繁调整列显示顺序的应用场景，例如数据分析工具或管理面板。 要实现...

    table列排序、列拖动、列宽度变化、行交换

    "table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...

    原生javascript实现拖拽改变table表格行高（html）

    原生JavaScript实现的拖拽功能能够为用户带来直观、便捷的操作体验。在这个特定的场景中，我们关注的是如何使用JavaScript来实现拖拽改变HTML表格（table）的行高。标题提到的“原生javascript实现拖拽改变table表格...

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`：拖动列宽插件的 JavaScript 文件，实现拖动功能。 - 示例 HTML 文件：展示如何在实际代码中应用以上设置和插件。 - 示例数据文件：可能包含用于填充表格的数据。 总之，实现...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题，让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能，首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    实现table表格可按行拖拽，按列排序，并可以保存排序后的结果

    "实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    js拖拽Table表格列排序.rar

    总的来说，实现JS拖拽Table表格列排序是一个涉及DOM操作、事件监听和CSS样式设计的过程。开发者需要理解HTML5的拖放API，并能够灵活运用JavaScript来操纵Table的结构，同时利用CSS提升交互体验。通过分析提供的文件...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...

    js table 表头拖动

    js table 表头拖动 适应各种主流浏览器很好的用户体验度

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    用于设置ant-design-vue中table组件的列宽可拖拽

    vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽

    鼠标拖动调整table列宽实例

    这个实例利用JavaScript实现，允许用户通过简单的鼠标操作来动态调整表格列的宽度，从而更好地查看和理解数据。 JavaScript是一种强大的客户端脚本语言，它在浏览器环境中运行，为网页添加动态功能。在这个实例中，...

    table表格拖动列

    "table表格拖动列"的功能就是一种提升用户体验的创新设计，它允许用户根据个人需求自由调整表格中列的顺序，使得数据查看和操作更加便捷。这个功能通常涉及到JavaScript（js）和jQuery这两个强大的前端库。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics