在AppleBBS 的 Blog 中看了他的文章
拖动改变Table的列宽度
于是想能不能在asp.net中的datagrid中实现,因为dataGrid翻译的html为table
于是做了改动
<script language=javascript>
function MouseDownToResize(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
</script>
后台代码:
private void HierarGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Header)
{
for(int i=0;i<e.Item.Cells.Count;i++)
{
e.Item.Cells[i].Text="<font class=/"resizeDivClass/" οnmοusedοwn=/"MouseDownToResize(this);/" οnmοusemοve=/"MouseMoveToResize(this);/"οnmοuseup=/"MouseUpToResize(this);/"></font>"+e.Item.Cells[i].Text;
e.Item.ToolTip="请拖动改变该列宽度!";
}
}
}
呵呵
css代码:
.resizeDivClass { Z-INDEX: 1;;LEFT: expression((this.parentElement.offsetWidth-8)); WIDTH: 10px; CURSOR: e-resize; POSITION: relative;}
注意点:
表头左对齐