Web中DataGrid綁定數(shù)據(jù)顯示列可拖動(dòng)

2019-11-17 05:25:29

字體：大中小

供稿：網(wǎng)友

在原理主要是js代碼將如下代碼放在.aspx中<script language='javascript> //判定鼠標(biāo)是否按下
var mouseDown = false;
//鼠標(biāo)所在區(qū)域
var IsTdArea=0; //鼠標(biāo)按下
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的左邊坐標(biāo)值
   var tbOffSetLeft =tbab.offsetLeft;

   if(objTD.offsetLeft <=(event.x+1) && objTD.offsetLeft >= (event.x-1))
   {
    //調(diào)整左邊
    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))
   {
    //調(diào)整右邊
    IsTdArea = 2;
    objTD.style.cursor ="w-resize";
   }
   else if(objTD.offsetTop <= (event.y+1) && objTD.offsetTop >= (event.y-1))
   {
    //調(diào)整上邊
    IsTdArea = 3;
    objTD.style.cursor ="s-resize";
   }
   else if((objTD.offsetTop+objTD.offsetHeight) <= (event.y+1) && (objTD.offsetTop+objTD.offsetHeight) >= (event.y-1))
   {
    //調(diào)整下邊
    IsTdArea = 4;
    objTD.style.cursor ="s-resize";
   }
   else
   {
    IsTdArea = 0;
    objTD.style.cursor = "auto";
   }
  }
}
</script>在后臺(tái).cs中以下事件中寫(xiě)如下代碼: 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執(zhí)行一下，鼠標(biāo)拖動(dòng)DataGrid的列試試

上一篇：use Assembly to call a method

下一篇：如何讓自己的應(yīng)用程序,控制臺(tái)程序,windows 服務(wù)收到操作系統(tǒng)注銷或者重啟的消息?