本篇博客所用到的技术也是从别的博客学习到的,但目前找不到那篇博客的链接了。
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);