Web中DataGrid绑定数据显示列可拖动
2008-05-03 17:49
435 查看
在原理主要是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的列试试
将如下代码放在.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的列试试
相关文章推荐
- Web中DataGrid绑定数据显示列可拖动
- Web中DataGrid绑定数据显示列可拖动
- Web中DataGrid绑定数据显示列可拖动
- DataGrid绑定数据显示列可拖动
- DataGrid绑定数据显示列可拖动
- DataGrid绑定数据显示列可拖动
- 20150709---Web中GridView控件根据绑定的数据显示不同的图片
- Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据
- 运用模型绑定和web窗体显示和检索数据(Retrieving and displaying data with model binding and web forms)
- Silverlight DataGrid 数据绑定鼠标移入到内容项时显示类似ToolTip提示文本
- Windows 应用程序 DataGrid数据绑定显示中文列名
- DevExpress Report web 绑定数据后没有显示的解决方法
- Datagrid数据绑定后,根据不同条件判断显示问题
- datagrid绑定list没有数据 表头不显示的解决方法
- 三维软件开发笔记---调错DataGrid控件数据绑定无法显示问题
- DataBind包括三大方法,Repeater,DataList和DataGrid,这些控件都位于 System.Web.UI.WebControls 命名空间中,从 WebControl 基类中直接或间接派生出来的。这些方法都是通过HTML来显示数据的内
- C# 动态显示数据,web页面可拖动的温度计
- 一起学习水晶报表之【如何实现Web网页显示水晶报表和绑定数据】(课程1)
- datagrid绑定list没有数据 表头不显示的问题
- datagrid绑定list没有数据 表头不显示的解决方法