怎么让 DataGrid的列可以拖动,来改变列的宽度

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=GBK">
</head>
把鼠標放於紅線上,本例限定隻能在第一行調行寬
<table id="tbl" border=1 cellspacing="0" cellpadding="0">
<tr><td style="border-right:1pt solid red;">標題一</td><td style="border-right:1pt solid red;">標題二</td><td>標題三</td></tr>
<tr><td style="border-bottom:1pt solid red;">內容一</td>
<td style="border-bottom:1pt solid red;">內容二</td>
<td style="border-bottom:1pt solid red;">內容三</td>
</tr>
<tr><td>內容A</td><td colspan=2>內容B</td></tr>
</table>
<script language="javascript">
SetResizeAble(document.all("tbl"))
var onDrag=0,gblResizeObj;function SetResizeAble(argTable){
with(argTable){
attachEvent('onmousedown',ColResizeStart)
attachEvent('onmousemove',ColResizeIng)
attachEvent('onmouseup',ColResizeEnd)
}
}function FindPos(obj){
var x=obj.offsetLeft, y=obj.offsetTop;
while(obj=obj.offsetParent){x += obj.offsetLeft;y += obj.offsetTop;}
this.intX=x; this.intY=y;
return this
}function ColResizeStart(){
var srcObj=event.srcElement,tblParent=srcObj.parentElement;
while(tblParent.tagName!='TABLE')tblParent=tblParent.parentElement

if(srcObj.tagName!='TD')return
if(srcObj.parentElement.rowIndex==0){
if(srcObj.offsetWidth - event.offsetX <=3 && srcObj.cellIndex!=srcObj.parentElement.cells.length - 1){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex];
onDrag=1;
}
if(event.offsetX <=3 && srcObj.cellIndex != 0){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex - 1];
onDrag=1;
}
}else{
if(srcObj.offsetHeight - event.offsetY <=3 && srcObj.parentElement.rowIndex < tblParent.rows.length - 1){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex];
onDrag=2;
}
}
}function ColResizeIng(){
var objSrcTd=event.srcElement,tblParent=objSrcTd.parentElement;
while(tblParent=tblParent.parentElement)if(tblParent.tagName=='TABLE')break;
if(objSrcTd.tagName == "TD" && (Math.abs(event.offsetX) <= 3 || Math.abs(objSrcTd.offsetWidth - event.offsetX)<=3) && objSrcTd.cellIndex != 0 && objSrcTd.parentElement.rowIndex==0){
objSrcTd.document.body.style.cursor='col-resize';
}
else{
if(objSrcTd.tagName == "TD" && Math.abs(objSrcTd.offsetHeight - event.offsetY)<=3 && objSrcTd.parentElement.rowIndex > 0 && objSrcTd.parentElement.rowIndex < tblParent.rows.length - 1){
objSrcTd.document.body.style.cursor='row-resize';
}else{
objSrcTd.document.body.style.cursor='default';
}
}
if(onDrag!=1 && onDrag!=2)return;
var trSrc=gblResizeObj.parentElement;

if(onDrag==1){
var intPosX=(new FindPos(gblResizeObj)).intX
gblResizeObj.style.pixelWidth = event.x - intPosX;
}
if(onDrag==2){
var intHeight=0,intPosY=(new FindPos(gblResizeObj)).intY
intHeight = objSrcTd.offsetHeight + event.y - intPosY;
tblParent.style.pixelHeight = intHeight * tblParent.rows.length
}
}function ColResizeEnd(){
onDrag=0;
document.body.style.cursor='default'
}
</script>

解决方案 »

  1.   

    http://www.csdn.net/Develop/read_article.asp?id=21593
      

  2.   

    先，也许以后会用到。呵呵，是啊，楼主，这么小气，才20分。ahui_net(阿灰)：如果楼主验证后认为你的方法可以，我会再给你50分。
      

  3.   

    我的问题解决,200分也没问题,我分数不少,有5000多.哈哈我想实现DataGrid的列可以调整列的宽度和排序的时候显示一个^/v(图片)
      

  4.   

    e.innerText = e.innerText.replace(UP(),'').replace(Down(),'') + Down();
    OrderThis(e,"U");
    }
    else
    {
    e.innerText = e.innerText.replace(UP(),'').replace(Down(),'') + UP();
    OrderThis(e,"D");
    }
    }
    ParentNode = e;
    }

    function UP()
    {
    return "▼";
    }

    function Down()
    {
    return "▲";
    }

    function OrderThis(e, Order)
    {
    var Rows;
    var ObjHead = eval("document.all."+ TableName +".rows[0].cells");
    for(var i=0; i<ObjHead.length; i++)
    {
    if(ObjHead[i].childNodes[0] == e)
    {
    Rows = i;
    break;
    }
    }

    //alert(Rows);
    //alert(Order);

    var Obj = eval("document.all."+ TableName);
    var d = new Date();
    MyOrder(Obj, Rows, Order);
    alert("时间："+ (new Date()-d) +"    行数："+ Obj.rows.length);
    }



    //
    // objTB 表名  index所选择的列  Order选择的排序方式（D,U）
    // 关键方法 排序
    //
    var g_n , g_order;
    function MyOrder(objTB, index, Order)
    {
    g_n = index;
    g_order = Order; var n = objTB.tBodies[0].childNodes.length - 1;
    var a = new Array(n);
    for (var i=0; i <a.length; i++)
    a[i] = objTB.tBodies[0].childNodes[i+1];

    a.sort(mycompare);

    for(var i=n; i >=1; i--)
    objTB.tBodies[0].removeChild(objTB.tBodies[0].childNodes[i]);

    for (var i=0; i < a.length; i++)
    objTB.tBodies[0].appendChild(a[i]);
    }

    function mycompare(a, b)
    {
               var ret = 0;
               if (a.cells[g_n].innerText < b.cells[g_n].innerText) ret = -1;
       else if (a.cells[g_n].innerText > b.cells[g_n].innerText)ret = 1;    return (g_order == "D"? -1:1) * ret;
    }

    </script>
    </head>
    <body>
    <table cellSpacing="0" cellPadding="2" width="100%" border="1" style="font-size:12px" bordercolorlight="#888888"
    bordercolordark="#FFFFFF" id="AspxCC">
    <tr bgcolor="#DCDCDC" align="center">
    <td>用户编号</td>
    <td>试用时间</td>
    <td>转正时间</td>
    <td>性别</td>
    <td>姓名拼音</td>
    <td>生日时间</td>
    <td>民族</td>
    <td>身高</td>
    </tr>
    <tr>
    <td>2000001</td>
    <td>1997-3-13 0:00:00</td>
    <td>1997-3-13 0:00:00</td>
    <td>1</td>
    <td>WZJ</td>
    <td>1965-3-13 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000002</td>
    <td>1997-3-13 0:00:00</td>
    <td>1997-3-13 0:00:00</td>
    <td>1</td>
    <td>SC</td>
    <td>1968-9-8 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000003</td>
    <td>1998-3-2 0:00:00</td>
    <td>1998-3-2 0:00:00</td>
    <td>1</td>
    <td>CH</td>
    <td>1963-11-14 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000004</td>
    <td>1998-9-1 0:00:00</td>
    <td>1998-9-1 0:00:00</td>
    <td>1</td>
    <td>YXY</td>
    <td>1970-3-1 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000005</td>
    <td>1999-3-25 0:00:00</td>
    <td>1999-4-25 0:00:00</td>
    <td>1</td>
    <td>SM</td>
    <td>1976-10-20 0:00:00</td>
    <td>汉</td>
    <td>177</td>
    </tr>
    <tr>
    <td>2000075</td>
    <td>2001-4-19 0:00:00</td>
    <td>2001-5-25 0:00:00</td>
    <td>0</td>
    <td>LHY</td>
    <td>1976-7-22 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    </table>
    </body>
    </html>
      

  5.   

    <html>
    <head>
    <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
    <script language="javascript">
    var TableName = "AspxCC";

    var ParentObj = null;
    function ClickThis(e)
    {
    if(ParentObj != null)
    {
    ParentObj.style.backgroundColor = "#FFFFFF";
    }
    e.style.backgroundColor = "#DEF8FF";
    ParentObj = e;
    e.style.backgroundColor = "#DEF8FF";
    }

    function window.onload()
    {
    var Obj = eval("document.all."+ TableName +".rows;");
    for(var i=1; i<Obj.length; i++)
    {
    Obj[i].onclick = new Function("ClickThis(this)");
    }

    var ObjHead = eval("document.all."+ TableName +".rows[0].cells");
    for(var i=0; i<ObjHead.length; i++)
    {
    ObjHead[i].innerHTML = "<span style=\"cursor:hand;width:100%\" onclick=\"Order(this)\">"+ ObjHead[i].innerHTML +"</span>";
    }
    }

    var ParentNode = null;
    function Order(e)
    {
    if(ParentNode != null && ParentNode != e)
    {
    ParentNode.innerText = ParentNode.innerText.replace(UP(),'').replace(Down(),'');
    }
    if(ParentNode != e)
    {
    e.innerText = e.innerText.replace(UP(),'').replace(Down(),'') + UP();
    OrderThis(e,"D");
    }
    else
    {
    if(e.innerText.replace(UP(),'') != e.innerText)
    {
    e.innerText = e.innerText.replace(UP(),'').replace(Down(),'') + Down();
    OrderThis(e,"U");
    }
    else
    {
    e.innerText = e.innerText.replace(UP(),'').replace(Down(),'') + UP();
    OrderThis(e,"D");
    }
    }
    ParentNode = e;
    }

    function UP()
    {
    return "▼";
    }

    function Down()
    {
    return "▲";
    }

    function OrderThis(e, Order)
    {
    var Rows;
    var ObjHead = eval("document.all."+ TableName +".rows[0].cells");
    for(var i=0; i<ObjHead.length; i++)
    {
    if(ObjHead[i].childNodes[0] == e)
    {
    Rows = i;
    break;
    }
    }

    //alert(Rows);
    //alert(Order);

    var Obj = eval("document.all."+ TableName);
    var d = new Date();
    MyOrder(Obj, Rows, Order);
    alert("时间："+ (new Date()-d) +"    行数："+ Obj.rows.length);
    }



    //
    // objTB 表名  index所选择的列  Order选择的排序方式（D,U）
    // 关键方法 排序
    //
    var g_n , g_order;
    function MyOrder(objTB, index, Order)
    {
    g_n = index;
    g_order = Order; var n = objTB.tBodies[0].childNodes.length - 1;
    var a = new Array(n);
    for (var i=0; i <a.length; i++)
    a[i] = objTB.tBodies[0].childNodes[i+1];

    a.sort(mycompare);

    for(var i=n; i >=1; i--)
    objTB.tBodies[0].removeChild(objTB.tBodies[0].childNodes[i]);

    for (var i=0; i < a.length; i++)
    objTB.tBodies[0].appendChild(a[i]);
    }

    function mycompare(a, b)
    {
               var ret = 0;
               if (a.cells[g_n].innerText < b.cells[g_n].innerText) ret = -1;
       else if (a.cells[g_n].innerText > b.cells[g_n].innerText)ret = 1;    return (g_order == "D"? -1:1) * ret;
    }

    </script>
    </head>
    <body>
    <table cellSpacing="0" cellPadding="2" width="100%" border="1" style="font-size:12px" bordercolorlight="#888888"
    bordercolordark="#FFFFFF" id="AspxCC">
    <tr bgcolor="#DCDCDC" align="center">
    <td>用户编号</td>
    <td>试用时间</td>
    <td>转正时间</td>
    <td>性别</td>
    <td>姓名拼音</td>
    <td>生日时间</td>
    <td>民族</td>
    <td>身高</td>
    </tr>
    <tr>
    <td>2000001</td>
    <td>1997-3-13 0:00:00</td>
    <td>1997-3-13 0:00:00</td>
    <td>1</td>
    <td>WZJ</td>
    <td>1965-3-13 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000074</td>
    <td>2001-4-23 0:00:00</td>
    <td>2001-6-1 0:00:00</td>
    <td>0</td>
    <td>EJJ</td>
    <td>1975-6-30 0:00:00</td>
    <td>满</td>
    <td>171</td>
    </tr>
    <tr>
    <td>2000075</td>
    <td>2001-4-19 0:00:00</td>
    <td>2001-5-25 0:00:00</td>
    <td>0</td>
    <td>LHY</td>
    <td>1976-7-22 0:00:00</td>
    <td>汉</td>
    <td>171</td>
    </tr>
    </table>
    </body>
    </html>
      

  6.   

    ahui_net(阿灰) (不关怎么说。还是要感谢你的热心帮助谢谢！