浏览器兼容的实现table中经过拖拽改变列宽的最佳实践

时间 2019-11-09

原文原文链接

在企业级应用中，表格是很是常见的展示方式，这时当列数据较长时，一种比较天然，体验也较好的处理方式就是经过拖拽改变列宽，这个功能在一些重量级JS组件库中都有提供，实现原理各有不一样，可是一个共同点就是实现比较复杂，那咱们经过不多的代码，常规的table结构，能实现这个功能么？本文将提供一个通过实际验证的实践，供开发者参考，扩展思路。javascript

整体思路：html

1.HTML结构：java

为了简化代码，采用标准的HTML结构，即table-tr-td模式，无其余限制，在咱们的实际应用中，表格很是复杂，可是核心技术没有变；算法

2.事件：浏览器

采用onmousedown、onmousemove、onmouseup三个事件相结合的方式，处理鼠标拖动元素过程当中的事件；测试

3.浏览器兼容：ui

整个实现中，涉及到事件模型，offsetX偏移量计算等存在浏览器差别的状况，本文都提供了精炼的处理，并通过了测试；spa

4.列宽度计算：code

拖动改变列宽的核心算法是，鼠标移动过程当中计算鼠标在屏幕上滑动过的水平距离，多是正值可能为负，而后加上单元格原来的宽度，计算得出新的宽度；htm

5.边界才可拖动并改变光标样式：

这个是经过元素的offsetWidth和offsetX数据计算得出，只有在光标位于边框线两侧4px范围内的区域，才能够拖动，而且改变光标样式；

下面附上代码，供开发者参考：

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Transitional//EN" "http://www.w4.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <META http-equiv=ontent-Type content="text/html; charset=gb2312">
</head>
<table id="tbl" cellspacing="1" cellpadding="5" bgcolor=#660000>
    <tr><td nowrap bgcolor=#bbbbbb style="white-space:nowrap;width:100px">标题一</td><td nowrap bgcolor=#bbbbbb style="white-space:nowrap;;width:100px">标题二</td><td  nowrap bgcolor=#bbbbbb style="width:100px" >标题三</td><td nowrap bgcolor=#bbbbbb style="width:100px" >标题四</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
    <tr><td bgcolor=#ffffff>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
</table>

能够看到，HTML很是简单。

<script language="javascript">
var headerTds = document.getElementById("tbl").rows[0].cells;
var mousedown = false;
var resizeable = false;
var targetTd;
var screenXStart =0;
var tdWidth = 0;
var headerWidth = 0;
var tblObj = document.getElementById("tbl");
for(var i = 0;i<headerTds.length;i++){
    addListener(headerTds[i],"mousedown",onmousedown);
    addListener(headerTds[i],"mousemove",onmousemove);
}
function onmousedown(event){
    if (resizeable == true){
        var evt =event||window.event;
        mousedown = true;
        screenXStart = evt.screenX;
        tdWidth = targetTd.offsetWidth;
        headerWidth = tblObj.offsetWidth;
    }
}
function onmousemove(event){
    var evt =event||window.event;
    var srcObj = getTarget(evt);
    var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题
    if (mousedown == true){
        var width = (tdWidth + (evt.screenX - screenXStart)) + "px";//计算后的新的宽度
        targetTd.style.width = width;
        tblObj.style.width = (headerWidth + (evt.screenX - screenXStart)) + "px";
    }else{
        var trObj = tblObj.rows[0];
        if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽
            targetTd=srcObj;
            resizeable = true;
            srcObj.style.cursor='col-resize';//修改光标样式
        }else if(offsetX <=4 && srcObj.cellIndex > 0){//实际改变前一单元格列宽，可是表格左边框线不可拖动
            targetTd=trObj.cells[srcObj.cellIndex - 1];
            resizeable = true;
            srcObj.style.cursor='col-resize';
        }else{
            resizeable = false;
            srcObj.style.cursor='default';
        }
    }
}
document.onmouseup = function(event){
    tartgetTd = null;
    resizeable = false;
    mousedown = false;
    document.body.style.cursor='default';
}
function getTarget(evt){
    return evt.target || evt.srcElement;
}
function addListener(element,type,listener,useCapture){
    element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
}
</script>

上述代码很是精炼的实现了拖拽改变列宽的功能，通过测试，兼容IE8以上、Firefox、Chrome等主流浏览器。