转datatable 拖动列宽 鼠标拖动列宽

Posted 2022-03-15 小米online

1.普通表格实现拖动列宽

var tabSize = tabSize || ;
tabSize.init = function (id) 
    //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    var tTD;
    // 获取需要修改列宽的表格
    var table = document.getElementById(id);
    var headTh = table.rows[0];
    for (j = 0; j < headTh.cells.length; j++) 
        headTh.cells[j].onmousedown = function () 
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) 
                tTD.mouseDown = true;
                tTD.oldX = event.x;
                tTD.oldWidth = tTD.offsetWidth;
            
        ;
        headTh.cells[j].onmouseup = function () 
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            tTD.mouseDown = false;
            tTD.style.cursor = \'default\';
        ;
        headTh.cells[j].onmousemove = function () 
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
                this.style.cursor = \'col-resize\';
            else
                this.style.cursor = \'default\';

            //取出暂存的Table Cell
            if (tTD == undefined) tTD = this;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown == true) 
                tTD.style.cursor = \'default\';
                if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                    tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                //调整列宽
                tTD.style.width = tTD.width + \'px\';
                tTD.style.cursor = \'col-resize\';
                // 调整滚动表格的每个cell
                for (k = 0; k < table.rows.length; k++) 
                    table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width;
                
            
        ;
    
;

// 调用
// 鼠标拖动列宽
setTimeout(function () 
    // 1.html代码里就是一个普通的table元素
    // 2.传入table元素的id
   tabSize.init(\'documentList\');
, 600);

 

 

 

 

 

 

 

 2.datatable实现鼠标拖动列宽

项目中用到datatable插件的地方，都是需要上下滚动的；而datatable插件实现上下滚动，是生成了两个div各包含了一个table，一个表格里只包含thead并且固定住（类：dataTables_scrollHead），另一个实现table内容滚动（类：dataTables_scrollBody） 。
那么，若要实现鼠标拖动列宽的话，则需要：表头绑定鼠标事件→事件触发时两个表格的对应列的宽度都要改变
若这个datatable表格原本没有滚动条的话，在鼠标拖动列宽的时候，会出现滚动条，其中，datatable定义时，“scrollX”: true。

 

 

 

var tabSize = tabSize || ;
tabSize.init = function (id,headTableWrapperId) 
    //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    var tTD;
    // 获取需要修改列宽的表格
    var table = document.getElementById(id);
    // 获取固定头部的表格
    var tableHead = $(\'#\'+ headTableWrapperId + \' .dataTables_scrollHeadInner table\')[0];
    // 获取表格头部th
    var headTh = tableHead.rows[0];
    for (j = 0; j < headTh.cells.length; j++) 
        headTh.cells[j].onmousedown = function () 
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) 
                tTD.mouseDown = true;
                tTD.oldX = event.x;
                tTD.oldWidth = tTD.offsetWidth;
            
        ;
        headTh.cells[j].onmouseup = function () 
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            tTD.mouseDown = false;
            tTD.style.cursor = \'default\';
        ;
        headTh.cells[j].onmousemove = function () 
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
                this.style.cursor = \'col-resize\';
            else
                this.style.cursor = \'default\';

            //取出暂存的Table Cell
            if (tTD == undefined) tTD = this;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown == true) 
                tTD.style.cursor = \'default\';
                if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                    tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                //调整列宽
                tTD.style.width = tTD.width + \'px\';
                tTD.style.cursor = \'col-resize\';
                // 调整滚动表格的每个cell
                for (k = 0; k < table.rows.length; k++) 
                    table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width;
                
            
        ;
    
;
// 鼠标拖动列宽
setTimeout(function () 
    // 参数：1.table元素的id，
    // 2.datatable插件生成的最外层div的id，F12可查看到
    tabSize.init(\'cfcPlanListIn\',\'cfcPlanListIn_wrapper\');
, 2000);

 

 

 转自：https://blog.csdn.net/qq_32886245/article/details/104690108