Web中DataGrid绑定数据显示列可拖动-.NET教程,数据库应用

在原理主要是js代码

将如下代码放在.aspx中

<script language=javascript>

 //判断鼠标是否按下
 var mousedown = false;
 //鼠标所在区域
 var istdarea=0;

 //鼠标按下
 function mousedown(obj)
 {
  if(istdarea != 0)
  {
   obj.mousedowny = event.clienty;
   obj.mousedownx=event.clientx;
   obj.parenttdh = obj.offsetheight;
   obj.parenetdw=obj.offsetwidth;
   //获得table的高度
   obj.parenetableh=obj.parentelement.parentelement.parentelement.offsetheight;
   //获得table的宽度
   obj.parenetablew=obj.parentelement.parentelement.parentelement.offsetwidth;
   obj.setcapture();
   mousedown = true;
  }
  else
  {
   mousedown = false;
  }
 }
 
 function mousemove(obj)
 {
  if(mousedown == true)
  {
   if(istdarea == 1 || istdarea == 2)
   {
    if(!obj.mousedownx) return false;
    var newwidth=obj.parenetdw*1+event.clientx*1-obj.mousedownx;
    if(newwidth>0)
    {
     obj.style.width = newwidth;
     obj.parentelement.parentelement.parentelement.style.width=obj.parenetablew*1+event.clientx*1-obj.mousedownx;
    }
   }
   else if(istdarea ==3 || istdarea == 4)
   {
    if(!obj.mousedowny) return false;
    var newheight=obj.parenetdh*1+event.clienty*1-obj.mousedowny;
    if(newheight>0)
    {
     obj.style.height = newheight;
     obj.parentelement.parentelement.parentelement.style.height=obj.parenetableh*1+event.clienty*1-obj.mousedowny;
    }
   }
  }
  else
  {
   mouseovertd(obj);
  }
 }
 
 function mouseup(obj)
 {
  if(mousedown == true)
  {
   obj.releasecapture();
   obj.mousedowny = 0;
   obj.mousedownx=0;
   mousedown = false;
   istdarea=0;
  }
  else
  {
   mousedown = false;
   istdarea=0;
  }
 }
 
 function mouseovertd(objchild)
 {
  var objtd = objchild;
  if(mousedown == false)
  {
   //获得td所属的table
   var tbab = objtd.parentelement.parentelement.parentelement;
   //获得table的左边坐标值
   var tboffsetleft =tbab.offsetleft;
  
   if(objtd.offsetleft <=(event.x+1) && objtd.offsetleft >= (event.x-1))
   {
    //调整左边
    istdarea = 1;
    objtd.style.cursor =”w-resize”;
    window.document.getelementbyid(“table1”).style.cursor = “w-resize”; 
   }
   else if((objtd.offsetleft+objtd.offsetwidth) <= (event.x+1) && (objtd.offsetleft+objtd.offsetwidth) >= (event.x-1))
   {
    //调整右边
    istdarea = 2;
    objtd.style.cursor =”w-resize”;
   }   
   else if(objtd.offsettop <= (event.y+1) && objtd.offsettop >= (event.y-1))
   {
    //调整上边
    istdarea = 3;
    objtd.style.cursor =”s-resize”;
   }
   else if((objtd.offsettop+objtd.offsetheight) <= (event.y+1) && (objtd.offsettop+objtd.offsetheight) >= (event.y-1))
   {
    //调整下边
    istdarea = 4;
    objtd.style.cursor =”s-resize”;
   }
   else
   {
    istdarea = 0;
    objtd.style.cursor = “auto”;
   }
  }    
 }

</script>

在后台.cs中以下事件中写如下代码:

 private void datagrid1_itemdatabound(object sender, system.web.ui.webcontrols.datagriditemeventargs e)
  {
   for(int i = 0; i < 3;i ++)
   {
    e.item.cells[i].attributes.add(“onmouseover”,”mouseovertd(this)”);
    e.item.cells[i].attributes.add(“onmousedown”,”mousedown(this);”);
    e.item.cells[i].attributes.add(“onmousemove”,”mousemove(this);”);
    e.item.cells[i].attributes.add(“onmouseup”,”mouseup(this);”);
   }
  }

ok执行一下，鼠标拖动datagrid的列试试