谁有可以通过鼠标拖动表头改变表格列宽度的代码？谢谢

PerfectCK 2004-08-11 04:55:02

rt
小弟初学，代码最好简单点，只实现这个功能最好。不然会给小弟看晕:P

谢谢

...全文

408 11 打赏收藏转发到动态举报

写回复

用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