- 浏览: 39865 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
-
bishen：
试了，很不错，兼容
js实现拖动table列，改变列宽 -
yingzhor：
好处大概是把jsp当成一个配置文件了吧。这样更符合软件开发的开 ...
Json-taglib -
heming_way：
很给力，我用上了你的这个方法，呵呵呵，解决了自己的问题
组合算法
js实现拖动table列，改变列宽
这两天看了一些关于table列拖动的js代码，怕忘记了，贴上来摆着。
第一个，这个关于兼容方面应该比较好，不过拖动响应鼠标的事件感觉不是太好：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {}{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
-->
</style>
</head>
<body>
<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
<colgroup>
<col style="width:200px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
</colgroup>
<thead>
<tr>
<td>拖动我1</td>
<td>拖动我2</td>
<td>拖动我3</td>
<td>拖动我4</td>
<td>拖动我5</td>
</tr>
</thead>
<tr>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
</tr>
<tr>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
</tr>
<tr>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
</tr>
<tr>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
</tr>
<tr>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="">未到期 (30天)</a></td></tr></table></div></td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
$.getAbsPos = function(pTarget){
var x_ = y_ = 0;
if(pTarget.style.position != "absolute"){
while(pTarget.offsetParent){
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
pTarget = pTarget.offsetParent;
}
}
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
return {x:x_,y:y_};
}
$.getEventPos = function(evt){
var _x,_y;
evt = JEvent.getEvent(evt);
if(evt.pageX || evt.pageY){
_x = evt.pageX;
_y = evt.pageY;
}else if(evt.clientX || evt.clientY){
_x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
_y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
}else{
return $.getAbsPos(evt.target);
}
return {x:_x,y:_y};
}
})(JPos);
//=======================================================================================
var JEvent = {};
(function($){
$.getEvent = function(evt){
evt = window.event || evt;
if(!evt){
var fun = JEvent.getEvent.caller;
while(fun != null){
evt = fun.arguments[0];
if(evt && evt.constructor == Event)
break;
fun = fun.caller;
}
}
return evt;
}
$.doEvent = function(fun){
var args = arguments;
return function(){
return fun(args);
}
}
})(JEvent);
//=======================================================================================
var colIndex;
var dataTable = document.getElementById("dataTable");
var cols = dataTable.getElementsByTagName("COL");
var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 30;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";
var mask_mousemove = function(evt){
if(document.selection){//IE ,Opera
if(document.selection.empty)
document.selection.empty();//IE
else{//Opera
document.selection = null;
}
}else if(window.getSelection){//FF,Safari
window.getSelection().removeAllRanges();
}
var oPos = JPos.getAbsPos(this);
var mPos = JPos.getEventPos(evt);
var x = mPos.x - oPos.x - mAWidth / 2;
var tmpX = parseInt(cols[colIndex].style.width) + x;
dragMask.style.left = mPos.x - mAWidth / 2 + "px";
cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
if(!document.all)
dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}
var mask_mouseup = function(evt){
dragMask.style.display = "none";
}
dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;
var cell_mousedown = function(evt){
colIndex = this.colIndex;
var mPos = JPos.getEventPos(evt);
with(dragMask.style){
left = mPos.x - mAWidth / 2 + "px";
top = mPos.y - mAHeight / 2 + "px";
display = "";
}
}
var chk_click = function(evt){
var obj = cols[this.colIndex];
if(this.checked){
obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
}else{
obj.css_ = obj.style.cssText;
obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
}
}
var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
o.colIndex = i;
o.onmousedown = cell_mousedown;
label = document.createElement("LABEL");
document.body.insertBefore(label,document.body.lastChild);
chk = document.createElement("INPUT");
chk.type = "checkbox";
label.appendChild(chk);
chk.onclick = chk_click;
chk.colIndex = i;
chk.checked = "checked";
label.appendChild(document.createTextNode(o.innerHTML));
}
</script>
</body>
</html>
第二个
<html>
<title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"><!--
.bg {
font-size:12px;
color:#000000;
table-layout:fixed;//这个属性可以隐藏文字
}
.bg td{
font-size:12px;
color:#000000;
text-align:left;
line-height:15px;
height:20px;
}
.bg td.tit{
background-color:#e2e2e2;
color:#000;
height:17px;
text-align:center;
line-height:15px;
}
.bg td.num{
background-color:#e2e2e2;
color:#000;
text-align:right;
line-height:15px;
height:22px;
width:30px;
}
.resizeDivClass{
text-align:right;
width:3px;
margin:0px 0 0px 0;
background:#fff;
border:0px;
float:right;
cursor:e-resize;
}
--></style>
<script type="text/javascript"><!--
window.onload=function(){
drag(document.getElementById('drag'));
drag(document.getElementById('drag2'));
drag(document.getElementById('drag3'));
drag(document.getElementById('drag4'));
};
function drag(o,r){
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/{
if(window.ActiveXObject){
return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}else{
return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}
o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w，在IE下可只设第一行*/{
for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) {
o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;
}
}
var out=document.getElementById('my');
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var lastX=a.clientX;
var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大，
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
//
d.onmousemove=function(a){
if(!a)a=window.event;
if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){
o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0));
return;
}
var t=a.clientX-lastX;out.innerHTML=t;
if(t>0) {//right
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
} else {//left
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
}
lastX=a.clientX;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
// --></script>
<body >
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >
<tr >
<td class="num" >序号</td>
<td class="tit" >
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
公司名称
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
订单客户
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
部门
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
业务员
</td>
<td class="tit" >
交款方式
</td>
</tr>
<tr >
<td class="num" >1</td>
<td align="center"><div
nowrap="" align="center"><table><tr><td><a
href="javascript:showJobCommentDialog(2325,%20null);">未到期 (30天)</a></td></tr></table></div></td>
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td>
<td >广告部</td>
<td >王天一</td>
<td >现金</td>
</tr >
</table>
<div id="my"></div>
<div id="my2"></div>
</body>
</html>
还有个拖动列的，改变列顺序：
<html>
<head>
</head>
<body ondragstart="oDragStart()">
<SCRIPT LANGUAGE="JavaScript">
<!--
var isFromCellIndex,isToCellIndex;
function oDragStart(){
if (event.srcElement.tagName=="TD")
{
window.event.dataTransfer.effectAllowed="move";
isFromCellIndex=event.srcElement.cellIndex;//开始drag时表格列索引
}
}
function oDragEnd(){
var isValue,i,isCellIndex;
if (event.srcElement.tagName=="TD"){
isToCellIndex=event.srcElement.cellIndex;//结束drag时表格列索引
//如果
if (isFromCellIndex<isToCellIndex){
for(i=0;i<document.all.oTable.rows.length;i++){
isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;
for(isCellIndex=isFromCellIndex;isCellIndex<isToCellIndex;isCellIndex++){
document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex+1).innerText;
}
document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;
}
}
else{
for(i=0;i<document.all.oTable.rows.length;i++){
isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;
for(isCellIndex=isFromCellIndex;isCellIndex>isToCellIndex;isCellIndex--){
document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex-1).innerText;
}
document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;
}
}
}
}
function oSelect(){
if (event.srcElement.tagName=="TD")
{
var oRange=document.body.createTextRange();
oRange.moveToElementText(event.srcElement);
oRange.select();
}
}
//-->
</SCRIPT>
<TABLE id="oTable" width="400px" onmouseover="oSelect()" ondragenter="return false;" ondragover="return false;" ondrop="oDragEnd()" border>
<TR>
<TD>第一列</TD><TD>第二列</TD><TD>第三列</TD><TD>第四列</TD>
</TR>
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>
<TR>
<TD>1</TD><TD>4</TD><TD>3</TD><TD>4</TD>
</TR>
<TR>
<TD>7</TD><TD>w</TD><TD>7</TD><TD>4</TD>
</TR>
<TR>
<TD>1</TD><TD>1</TD><TD>3</TD><TD>4</TD>
</TR>
</TABLE><br>
</body>
</html>
发表评论
相关推荐
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
oDragTable.js 拖动表格单元格改变列宽或行高，兼容全浏览器，一句代码调用，原创代码，下载文件中包含JS源代码和示例代码。
实现了bootstrapTable 的列宽可鼠标拖动，方便查看列宽显示不完全的内容，前台js
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
js实现html表格列宽可拖拽修改 .
拖拽改变列宽的功能网上很多，但是拖拽改变行高的我搜了很久，也没有发现可以用的。所以利用原有改变行高的模版，自己写了一个原生javascrript改变列宽的模版。
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽。Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
js页面表格，能拉动列宽，排序。拉动列宽以后能alert处相应的列宽
综合了网上的一些拖动table列宽的方法我自己写了一个 这个是针对Display：table 这个标签来做的； 其实原理很简单我是在页面最后添加的js代码也就是在display：table生成了<table>之后所有稍作分析就可以应用在普通...
网上找到js或jquery插件都不满足现在用的需求，所自己做个jquery插件. 主要功能类似excel对表头的操作， js文件里有使用说明。
纯js实现对table的列宽和列数操作 .
利用bootstrap实现了表格的搜索,排序,分页,,,并且使用相关js实现了鼠标拖动列宽等, 欢迎交流
因为需求的不同，需要自己实现element表格拖拽调整列宽和行高，目前已实现，现记录了实现的方式。 实现说明：全部基于原生js,不依赖任何插件，可以直接使用。 实现思路：1.列宽的调整最终是通过调整如上图的col...
拖动列宽的表格</title> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <style type=”text/css”><!– .bg td{ font-size:12px; text-align:left; line-height:...
bootstrap-table-reorder-columns表格拖拽排序列的一个插件 验证有效， 需放在服务器【tomcat】、【apache】、【nginx】或 【HBuilder】中调试运行即可看到真实效果
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table做的，客户要求能利用拖动改变列宽，为了总结和备忘，现将实现的过程记录如下： 1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体...
可以通过鼠标拖动方便调整table表格列宽的jquery查看ZTable插件,支持多浏览器
不要浪费积分下载，请参考博客：https://blog.csdn.net/fukaiit/article/details/102492232