发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动;所有我就寻找了好多的办法;网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是我看不懂!

我模仿网上的核心代码来自己写了一个;因为我们知道display:table标签最后再页面展示的还是table表格所以我就在页面的最后面来更改table的样式:

思路:
1,捕获鼠标移动到表格竖线上时候改变鼠标样式:
2.   在改变样式的区域里,按下鼠标就会生成辅助线来拖动;同时设置单元格最小宽度为8px
3.  改变表头单元格宽度,改变表格宽度
我做了一个用Myeclipse开发的index.jsp页面:
工程源码下载




function TableAuto(divId){
var cellIndex=-1; //记录所作用的列索引
var preWidth=0; //记录列的原宽
var preX=0; //记录鼠标的原屏幕x坐标
var preLeft=0; //记录辅助线的初始位置
var currentTitleCell=null; //当前改变列宽的列的标题单元格
var doTitleCellClick=null; //用于暂存标题行click响应行数
var table = null;//表格对象
var titleCells = null;//获取标题行 //辅助线对象
var scale = document.createElement("div");
scale.style.cssText="border-left:dotted 1px #000;z-index:101;position:absolute;left:-1;width:0;";
document.body.appendChild(scale); //函数:计算元素的绝对位置
function getAbsPos(e){
var rect = e.getBoundingClientRect()
var body = document.body;
return { left:rect.left+body.scrollLeft,top:(rect.top+body.scrollTop) };
} //函数:改变列宽 (响应辅助线的 onmousemove 事件)
function changeColWidth(){
var evt = arguments.length==0 ? event : arguments[0];
var newX = evt.screenX;
var newWidth = preWidth+newX-preX;
if(newWidth<8) newWidth=8;
else scale.style.left=preLeft+newX-preX;
}
//函数:改变列宽 (响应辅助线 onmouseup 事件)
function changeColWidthStop(){
scale.releaseCapture();
scale.onmousemove = null;
scale.onmouseup = null;
scale.style.left=-1;
var evt = arguments.length==0 ? event : arguments[0];
var newX = evt.screenX;//鼠标现在坐标
var mLong = newX-preX;//鼠标移动距离
var tdNewWidth = mLong+preWidth;//调整后单元格宽度
if(tdNewWidth<8) tdNewWidth=8;
var tableNewWidth=eval($('#'+divId).width()-preWidth+tdNewWidth);//表格宽度=原始宽度表格宽度-单元格原始宽度+单元格现在宽度
var trs = table.getElementsByTagName("tr");
$('#'+divId).width(tableNewWidth);//调整表格宽度
//for ( var j = 0; j < trs.length; j++) {//调整列宽
trs[0].cells[cellIndex].width =tdNewWidth;
//} }
//函数:改变列宽 (响应标题行单元格的 onmousedown 事件)
function doMouseDown(){
var evt = arguments.length==0 ? event : arguments[0];
preX = evt.screenX;
var pos = getAbsPos(this);
preLeft = pos.left+this.offsetWidth;
scale.style.left=preLeft-2;
scale.style.top = pos.top-2;
scale.style.height=table.offsetHeight-4; scale.setCapture();
scale.onmousemove = changeColWidth;
scale.onmouseup = changeColWidthStop;
cellIndex = this.cellIndex;
preWidth = this.offsetWidth; }
//函数:响应标题单元格 mousemove 事件
function doTitleCellMousemove(){
var evt = arguments.length==0 ? event : arguments[0];
if(this.offsetWidth-evt.offsetX<10){//单元格的宽-鼠标在单元格的水平坐标
this.style.cursor="col-resize";
this.onmousedown=doMouseDown;
}else{
this.style.cursor="";
this.onmousedown=null;
}
}
//添加控制元素的代码
function applyCtrl(tableId){
table = document.getElementById(tableId);//获取表格
table.getElementsByTagName("tr")[0].className="scrollColThead";
//获取标题行
titleCells = table.getElementsByTagName("tr")[0].cells;
//给每个标题行单元格绑顶 onmousemoce 事件处理函数
for(var i=1;i<titleCells.length;i++){
titleCells[i].onmousemove=doTitleCellMousemove;
}
}
//此处为表格添加控制元素。
applyCtrl(divId); }


有不清楚的很愿意与大家交流:ydcun@163.com

display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化的更多相关文章

  1. Qt5 QTableWidget设置列表自动适应列宽

    //设置自动适应列宽 ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);

  2. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  3. DataGridView使用技巧五:自动设定列宽和行高

    一.设定行高和列宽自动调整 设定包括Header和所有单元格的列宽自动调整 //设置包括Header和所有单元格的列宽自动调整 this.dgv_PropDemo.AutoSizeColumnsMod ...

  4. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  5. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  6. 动态改变EasyUI grid 列宽和隐藏列

    隐藏显示 $('#yourGrid').datagrid('hideColumn','yourColumn'); $('#yourGrid').datagrid('hideColumn','yourC ...

  7. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  8. jquery实现表格可变列宽插件开发

    工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...

  9. table标签用法

    <table>标签 HTML中表格由 <table> 标签来定义. 每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> ...

随机推荐

  1. Eclipse 修改字体

  2. c语言:从一组数据中选出可以组成三角形并且周长最长的三个数(简单)

    题目如下: 思路分析: 写出完整的程序: /* 问题描述: 有n根棍子,棍子i的长度为ai.想要从中选出3根棍子组成周长尽可能长的三角形.请输 出最大的周长,若无法组成三角形则输出0. */ #inc ...

  3. Oracle EBS-SQL (SYS-2): sys_在线用户查询.sql

    SELECT fs.USER_NAME,       fu.description,       fs.RESPONSIBILITY_NAME,       fs.USER_FORM_NAME,    ...

  4. Copy an serializable object deeply

    http://www.java2s.com/Tutorial/Java/0100__Class-Definition/Copyanserializableobjectdeeply.htm http:/ ...

  5. Xamarin.Android 如何使用Assets目录下的文件

    原文:Xamarin.Android 如何使用Assets目录下的文件 个人原创,转载注明出处:http://blog.csdn.net/supluo/article/details/43672411 ...

  6. SQLServer2012 和 MariaDB 10.0.3 分页效率的对比

    1. 实验环境      R910服务器, 16G内存 SqlServer 2012   64bit MariaDB 10.0.3   64bit  (InnoDB) 2. 实验表情况 rtlBill ...

  7. oracle导入导出exp,imp

    exp dadifilm/oracle@dg file=/tmp/dadi.dmp full=y imp u_data/321@dg1  file=/dadi_desc.dmp Import: Rel ...

  8. UVA507-- Jill Rides Again

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. ActiveMQ使用STOMP协议的一个错误问题:Unexpected ACK received for message-id

    使用某些语言环境下的stomp包(比如php python ruby),可能会出现如下问题: Unexpected ACK received for message-id 这一般可能有两个原因. 1. ...

  10. Swift学习之十四:闭包(Closures)

    * 闭包(Closures) * 闭包是自包含的功能代码块,可以在代码中使用或者用来作为参数传值. * 在Swift中的闭包与C.OC中的blocks和其它编程语言(如Python)中的lambdas ...