社区
JavaScript
帖子详情
谁有可以通过鼠标拖动表头改变表格列宽度的代码?谢谢
PerfectCK
2004-08-11 04:55:02
rt
小弟初学,代码最好简单点,只实现这个功能最好。不然会给小弟看晕:P
谢谢
...全文
409
11
打赏
收藏
谁有可以通过鼠标拖动表头改变表格列宽度的代码?谢谢
rt 小弟初学,代码最好简单点,只实现这个功能最好。不然会给小弟看晕:P 谢谢
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
11 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
sf1979
2005-01-07
打赏
举报
回复
mark
pkkingofice
2004-11-19
打赏
举报
回复
Mark
savezjlk
2004-09-12
打赏
举报
回复
呵呵,孟老大的.
http://dotnet.aspx.cc/Exam/UltraGrid/UltraGrid.aspx
横向拖动时,有延时,能解决吗?
blestcc
2004-08-12
打赏
举报
回复
不是
wanghr100
2004-08-11
打赏
举报
回复
呵呵,孟老大的.
http://dotnet.aspx.cc/Exam/UltraGrid/UltraGrid.aspx
PerfectCK
2004-08-11
打赏
举报
回复
blestcc(成辰) 兄,您的代码三列大小一起变!?
blestcc
2004-08-11
打赏
举报
回复
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
table
{
border-left:1px solid black;
border-top:1px solid black;
}
td
{
width:20%;
height:20px;
border-bottom:1px solid black;
border-right:1px solid black;
}
div
{
font-size:13px;
}
th
{
height:20px;
font-size:12px;
font-weight:normal;
border-right:1px solid black;
border-bottom:2px solid black;
background-color:#CCCCCC
}
</STYLE>
<SCRIPT language="javascript">
/****************************************
蒋玉龙编制于2002-8-6 星期二
QQ:66840199
用时5个小时,功能:实现首行根据边框调整表格大小;
请保留相关信息
Powered by Stone, 2003-04-15
****************************************/
//modified by liu_xc 2004.6.28 对功能进行封装
function DragedTableWidth(tableId)
{
var oTable = document.all(tableId);
for(var i=0; i<oTable.rows[0].cells.length; i++)
{
oTable.rows[0].cells[i].onmousemove = function()
{
moveCol(this);
}
}
document.body.onmousedown = downBody;
document.body.onmouseover = moveBody;
document.body.onmouseup = upBody;
document.body.onselectstart = selectBody;
createElementsUsed();
}
//创建需要的中间层
function createElementsUsed()
{
var oDiv = document.createElement("div");
oDiv.id = "dragWidthDiv";
oDiv.style.height = "201";
oDiv.style.left = "12";
oDiv.style.position = "absolute";
oDiv.style.top = "50px";
oDiv.style.width = "28px";
oDiv.style.zIndex = "1";
oDiv.style.display = "none";
oDiv.innerHTML = "<HR id='dragWidthLine' width='1' size='200' noshade color='black'>";
document.body.appendChild(oDiv);
}
//modified by liu_xc 2004.6.28 对功能进行封装
//记录鼠标状态, 记录鼠标按下, 记录当前列
var curState, curDown, curCol;
var oldPlace, newPlace;
function getTable(item)
{
var obj = null;
do
{
if (item.tagName == "TABLE")
{
obj = item;
break;
}
item = item.offsetParent;
}
while (item != null);
return obj;
}
function calculateOffset(item, offsetName) {
var totalOffset = 0;
do
{
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
}
while (item != null);
return totalOffset;
}
function moveCol(objCol)
{
window.status = window.document.body.scrollLeft;
if (!curDown)
{
//curCol = objCol;
//鼠标没有按下
if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth-3) {
//移动到了相应的部位/改变鼠标
curState=true;
window.document.body.style.cursor = "col-resize";
}
else
{
curState = false;
window.document.body.style.cursor = "default";
}
curCol = objCol;
}
}
function upBody()
{
//鼠标抬起/一切恢复原状态
if (curState)
{
//---------------------------调整表格--------------------------
//调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
newPlace = window.event.x + window.document.body.scrollLeft;
if (dragWidthDiv.offsetLeft + dragWidthLine.offsetLeft > calculateOffset(curCol, "Left") + 20)
{
if (curCol.width > oldPlace - newPlace)
curCol.width -= oldPlace - newPlace;
var curTable = getTable(curCol);
if (curTable!=null)
curTable.width -= oldPlace - newPlace;
//curCol.innerText = curCol.width;
}
//-------------------------------------------------------------
curState = false;
curDown = false;
dragWidthDiv.style.display = "none";
window.document.body.style.cursor = "default";
}
}
function downBody() {
//鼠标按下
if (curState)
{
curDown = true;
var curTable = getTable(window.event.srcElement);
if (curTable!=null) {
//---------定位竖线----------
dragWidthDiv.style.display = ""; //层可见
dragWidthLine.style.height = curTable.offsetHeight;
dragWidthLine.style.width = 1;
dragWidthDiv.style.left = window.event.x + window.document.body.scrollLeft - dragWidthLine.offsetLeft;
dragWidthDiv.style.top = calculateOffset(curTable, "Top") - dragWidthLine.offsetTop;
//---------------------------
oldPlace = window.event.x + window.document.body.scrollLeft;
}
}
}
function moveBody()
{
//鼠标移动
if (curDown)
{
//鼠标按下状态
dragWidthDiv.style.left = window.event.x + window.document.body.scrollLeft - dragWidthLine.offsetLeft;
window.document.body.style.cursor = "col-resize";
}
}
function selectBody() {
//鼠标选择文本[不支持动态调整?]
if (curDown) //鼠标按下于调整状态
window.event.returnValue = false;
}
function setTableBorder(objTable)
{
var i,j;
for (i = 0; i < objTable.rows.length; i++)
{
for (j = 0; j < objTable.rows(i).cells.length; j++)
{
if (objTable.rows(i).cells(j).innerHTML == "")
objTable.rows(i).cells(j).innerHTML = " ";
}
}
}
</SCRIPT>
</HEAD>
<BODY onload = "new DragedTableWidth('myTable')">
<TABLE id="myTable" cellpadding="0" cellspacing="0" width="300">
<TR>
<th width="100">01</th>
<th width="100">02</th>
<th width="100">03</th>
</TR>
<TR>
<TD>04</TD>
<TD>09</TD>
<TD>10</TD>
</TR>
<TR>
<TD>05</TD>
<TD>08</TD>
<TD>11</TD>
</TR>
<TR>
<TD>06</TD>
<TD>07</TD>
<TD>12</TD>
</TR>
</TABLE>
</BODY>
</HTML>
pfc001
2004-08-11
打赏
举报
回复
关注
prentice1001
2004-08-11
打赏
举报
回复
实现起来都比较复杂,慢慢看。
prentice1001
2004-08-11
打赏
举报
回复
http://kingjor.cxc.cc/MyWorks/KingjorGrid/1_0/
孟子E章
2004-08-11
打赏
举报
回复
没有很简单的
http://dotnet.aspx.cc/Exam/DragableXpStyleTable/DragableXpStyleTable.aspx
改变
table的
列
宽度
改变
table的
列
宽度
,可以拖拽的td
表格
,
表格
内文字只显示一行,超过的部分自动隐藏
vue-easytable@2.16.3版本
拖动
列
动态
改变
列
宽大小实现
效果展示链接:https://live.csdn.net/v/209587 vue-easytable
表格
老版本有
表格
列
宽拖功能,但是最新版插件反而不存在该功能,但是大部分
表格
数据存在长短不一,导致
表格
很难看,为了解决这种问题,只能自己动手做了。该功能如何实现,我会在资源内详细说明,如果有什么不懂的可以私信我。 实现效果:左键
拖动
表头
右边框出现垂直于
表格
内的虚线作为参照,按住
鼠标
左键可左右移动虚线也会跟着移动,
拖动
到合适位置松开左键,虚线消失,
拖动
的
表格
该
列
变宽/变窄 到
鼠标
位置,最窄为50px,最宽为600px,限制可自行修改。若将ve-table封装以组件形式引用,可全局实现
拖动
表格
列
改变
列
宽大小效果。如何封装我也会在资源内详细说明。
BootStrapTable
表格
利器通用教材
开发响应式界面,固定
表头
,完全可配置,支持data属性,显示/隐藏
列
,显示/隐藏
表头
,使用AJAX获取JSON数据,点击
表头
可简单的进行排序,支持自定义
列
显示,支持单/复选,强大的分页功能,支持名片布局,支持多语言 ...
拖动
table标题实现
改变
td的大小(css+js
代码
)
代码
如下: <html> <title>
拖动
列
宽的
表格
</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:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg
table实现
列
宽的
拖动
效果
NULL 博文链接:https://jifeng3321.iteye.com/blog/2403674
JavaScript
87,907
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章