文档章节

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

李玉珏
 李玉珏
发布于 2015/04/01 17:41
字数 1174
阅读 1725
收藏 12

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

        总体思路:

        1.HTML结构:

                为了简化代码,采用标准的HTML结构,即table-tr-td模式,无其他限制,在我们的实际应用中,表格非常复杂,但是核心技术没有变;

        2.事件:

                采用onmousedown、onmousemove、onmouseup三个事件相结合的方式,处理鼠标拖动元素过程中的事件;

        3.浏览器兼容:

                整个实现中,涉及到事件模型,offsetX偏移量计算等存在浏览器差异的情况,本文都提供了精炼的处理,并经过了测试;

        4.列宽度计算:

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

        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等主流浏览器。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 298
博文 63
码字总数 106838
作品 0
沈阳
技术主管
私信 提问
加载中

评论(1)

ejzhang
ejzhang
79
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.6K
1
layui 2.4.0 发布,初秋第一版

欢迎来到 layui 2.4。本次除了 table 组件较大幅度的加强,还特别添加了业界比较常见的两款新组件:colorpicker 和 slider 。依然没有看到 tree?多选框等等你想要的功能性组件?不必着急,我...

贤心
08/30
0
18
拭目以待/GridManager

GridManager.js 文档及演示 文档 演示 使用需知 下载时请选择对应的tag进行下载, 请不要直接使用master分支上的代码. v2.0和之前版本为jquery版本 v2.1开始为原生js版本 实现功能 GridManage...

拭目以待
2016/08/28
0
0
快速、灵活的对Table标签进行实例化,让Table标签充满活力。 - GridManager.js

GridManager特色: 原生实现: 无任何框架依赖 宽度调整: 表格的列宽度可进行拖拽式调整 位置更换: 表格的列位置进行拖拽式调整 配置列: 可通过配置对列进行显示隐藏转换 表头吸顶: 在表存在可...

拭目以待
2015/06/12
2.8K
8
Ant Design 3.8.0 发布,阿里开源的企业级 UI 设计语言

Ant Design 3.8.0 发布了,此次更新内容如下: 支持 TypeScript 3,并优化了大量组件定义。 使用 font-variant-numeric 优化了等宽数字的实现方式,解决了数字字体和其他字体不一致的问题。#...

达尔文
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

给女朋友讲解什么是Optional【JDK 8特性】

前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本《与孩子一起学编程》的书,于是今天就给女朋友讲解一下什么是Optional类。 至于她能不能看懂,那肯定是看不懂的。(学到...

Java3y
11分钟前
0
0
2019年六大新兴信息安全方向

导读 黑客攻击和网络犯罪的威胁正在不断升级,相应的技术“军备竞赛”正愈演愈烈,对于信息安全从业人员来说,掌握最新的信息安全工具,是在信息安全战争中生存下来的关键所在。 从特朗普的手...

问题终结者
18分钟前
0
0
redis扩展-自定义PropertyPlaceholderConfigurer,在spring属性注入之前,手动将properteis合并到spring容器中

背景:spring容器启动过程中,通过PropertyPlaceholderConfigurer读取properties配置文件,并将properties配置文件中的值注入spring bean的属性中, PropertyPlaceholderConfigurer使用方式多...

燃犀
20分钟前
0
0
PostgreSQL SPI 中的错误处理

PostgreSQL SPI 用于在 C 或是其他编程语言编写的扩展函数(存储过程)中调用数据库本身的解析器、规划器和执行器的功能,以及对 SQL 语句进行执行。 在最重要的一个函数 SPI_execute 的文档...

helloclia
21分钟前
0
0
深入理解Java内存模型

1 内存模型产生背景 在介绍Java内存模型之前,我们先了解一下物理计算机中的并发问题,理解这些问题可以搞清楚内存模型产生的背景。物理机遇到的并发问题与虚拟机中的情况有不少相似之处,物...

小刀爱编程
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部