[原作]在dataGrid中拖动改变列宽度,在asp.net中

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;}


注意点:
表头左对齐

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值