固定表头、鼠标调整列宽--解决(完全代码)

shang515 2003-11-27 06:37:31

不过就是不能把这个功能给封装起来，否则就会出错，哪位高人给解决一下，别忘了告诉俺一声
下面是JS文件
//function CreateDataGrid(element)
{
var selectBgColor = '#A3A3A3';//被选择行的背景色
var headTdColor = 'menu';//表头背景色
var trOverColor = '#D3D3D3';
function setTdWidth(tdIndex)//设置表格的列宽
{
//alert(tdIndex);
var td = element.rows[0].cells[tdIndex];
var tab = td;
while(tab.tagName!='TABLE')tab=tab.parentElement;//显示表格内容的Table
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
var headTd = hTab.rows[0].cells[td.cellIndex];
//alert(headTd.width);
td.width = headTd.offsetWidth;
td.style.width = headTd.offsetWidth;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
//return headTd.offsetWidth;
}
function setHeadDivLeft(div)//
{
var tab = div;
while(tab.tagName!='TABLE')tab=tab.parentElement;
var headDiv = tab.rows[0].firstChild;
while(headDiv.tagName!='DIV')headDiv=headDiv.firstChild;
headDiv.scrollLeft = div.scrollLeft;
}
function initHeadTdWidth()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;//找到真正的列头Table
for(var i=0;i<hTab.rows[0].cells.length;i++)
{
var td = hTab.rows[0].cells[i];
td.bgColor = headTdColor;
td.style.borderLeftColor = '#eeeeee';
td.style.borderTopColor = '#eeeeee';
td.style.borderRightColor = '#666666';
td.style.borderBottomColor = '#666666';
td.onmousedown = beginResizeTd;
td.onmousemove = setTdCursor;
//td.style.display = element.rows[0].cells[i].style.display;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
if(element.rows[0].cells[i].width)
{
td.width = element.rows[0].cells[i].width;
td.style.width = element.rows[0].cells[i].width;
}
else if(element.rows[0].cells[i].style.width)
{
td.width = element.rows[0].cells[i].style.width;
td.style.width = element.rows[0].cells[i].style.width;
}
else
{
//默认宽为100
td.width = 100;
td.style.width = 100;
}
}
}
function initMainTdWidth()
{
if(element.rows.length<=0) return;
for(var i=0;i<element.rows[0].cells.length;i++)
//element.rows[0].cells[i].width = setTdWidth(element.rows[0].cells[i]);
setTdWidth(i);
}
function setMainTable()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
element.style.position = 'relative';
element.style.top = -hTab.offsetHeight;
element.width = hTab.offsetWidth;
element.style.width = hTab.offsetWidth;
}
function initElement()
{
var html = "<table style='table-layout:fixed;height:100%;width:100%;' cellspacing=0 cellpadding=0>";
html += "<tr><td style='height:expression(firstChild.offsetHeight+1);layout:fixed;'>";
html += "<div style='overflow:hidden;width:expression(parentElement.offsetWidth-18);position:relative;'>";
html += "<table border=1 style='border-collapse:collapse;table-layout:fixed'>";
html += element.rows[0].outerHTML; // + head
html += "</table>";
html += "</div>";
html += "</tr></td><tr><td style='height:*;layout:fixed;'>";
html += "<div id='main' style='overflow:scroll;width:expression(parentElement.offsetWidth);height:100%;' onscroll='setHeadDivLeft(this)'>";
html += element.outerHTML;// + element
html += "</div>";
html += "</td></tr></table>";

element.outerHTML = html;
//element.document.close();

initHeadTdWidth(); //设置表格头的宽
//element.deleteRow(0); //删除显示内容的第一行
initMainTdWidth(); //设置内容表格的宽
setMainTable(); //设置内容表格的位置
}
//element.width = '';
element.style.wordBreak = "break-all";
element.style.tableLayout = 'fixed';
initElement();
////////////////////////// 下面内容设置可以使用鼠标调整列宽 //////////////////////////////////////////////
element.document.attachEvent('onmousemove',resizeTd);
element.document.attachEvent('onmouseup',endResizeTd);
function element.document.onselectstart(){if(document.old)return false;}
function setTdCursor()
{
var td = event.srcElement;
if(event.offsetX>td.offsetWidth-10 || document.old)
td.style.cursor = "col-resize";
else
td.style.cursor = "auto";
}
//function resizeTimeOut(){endResizeTd()}
function beginResizeTd()
{
var td = event.srcElement;
if(event.offsetX<td.offsetWidth-10) return;
document.tdDown = true;
var tab = td;while(tab.tagName!="TABLE")tab=tab.parentElement;
document.old=
{
"td":td,
"tdWidth":td.offsetWidth,
"downX":event.x,
"table":tab,
"tableWidth":tab.offsetWidth
}
//setTimeout("resizeTimeOut()",10000);
}
function resizeTd()
{
if(!document.old || document.old["td"].tagName!="TD") return;
if(document.tdDown)
{
document.body.style.cursor = "col-resize";
var offsetWidth = (event.x-document.old["downX"]);
var newWidth = document.old["tdWidth"] + offsetWidth;
if(newWidth<=5) return;
document.old["td"].width = newWidth;
document.old["td"].style.width = newWidth;
document.old["table"].width = document.old["tableWidth"]+offsetWidth;
document.old["table"].style.width = document.old["tableWidth"]+offsetWidth;

setTdWidth(document.old["td"].cellIndex);
setMainTable();
//保存列宽
//var index = document.old["td"].cellIndex;
//divTdWidth.getElementsByTagName("INPUT")[index].value = newWidth;
}
else
{
document.body.style.cursor = "auto";
document.old = null;
}
}
function endResizeTd()
{
document.old = null;
document.tdDown = false;
document.body.style.cursor = "auto";
}
////////////////////// 下面设置点击表格时改变行背景色的事件 ////////////////////////////
element.attachEvent('onclick',doDataGridClick);
element.attachEvent('onmouseover',doDataGridMouseOver);
element.attachEvent('onmouseout',doDataGridMouseOut);
function doDataGridClick()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(element.oldTr!=null)
element.oldTr.bgColor = element.oldColor;
element.oldTr = tr;
element.oldColor = tr.oldColor;//tr.bgColor;
tr.bgColor = selectBgColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOver()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.oldColor = tr.bgColor;
tr.bgColor = trOverColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOut()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.bgColor = tr.oldColor;
}
}

...全文