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

换个控件吧：WEBGRID，
或，用：OWC，还可以冻结窗口。

用table得了,就可以方便的用脚本控制了

ahui_net(阿灰)
你哪个是排序的，而且是用Table实现的，我要的是不到能排序，而且能改变列的宽度的，
并且是DataGrid上实现。请看清我的需求，，我不是告诉你啦吗。你的回答能觉得我的问题，我会给分数

这个就是实现排序的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><PUBLIC:ATTACH
ONEVENT="cleanup()" EVENT="ondetach"></PUBLIC:ATTACH>
<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();
ShordOrder(Obj, Rows, Order);
alert("时间："+ (new Date()-d) +"    行数："+ Obj.rows.length);
}

//
// objTB 表名  index所选择的列  Order选择的排序方式（D,U）
// 关键方法排序
//
function ShordOrder(objTB,index, Order){
var i;
var j;
for(i=1;i<(objTB.rows.length-1);i++){
for(j=i+1;j<objTB.rows.length;j++)
{
if(Order == "D")
{
if(objTB.rows[j].cells[index].innerText.valueOf() > objTB.rows[i].cells[index].innerText.valueOf())
{
objTB.moveRow(j,i);
}
}
else
{
if(objTB.rows[j].cells[index].innerText.valueOf() < objTB.rows[i].cells[index].innerText.valueOf())
{
objTB.moveRow(j,i);
}
}
}
}
}
</SCRIPT><META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY>
<TABLE id=AspxCC style="FONT-SIZE: 12px" cellSpacing=0 borderColorDark=#ffffff
cellPadding=2 width="100%" borderColorLight=#888888 border=1>
  <TBODY>
  <TR align=middle bgColor=#dcdcdc>
    <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>2000045</TD>
    <TD>2001-2-15 0:00:00</TD>
    <TD>2001-3-15 0:00:00</TD>
    <TD>0</TD>
    <TD>WY</TD>
    <TD>1978-8-5 0:00:00</TD>
    <TD>汉</TD>
    <TD>162</TD></TR>
  <TR>
    <TD>2000046</TD>
    <TD>2001-2-23 0:00:00</TD>
    <TD>2001-3-23 0:00:00</TD>
    <TD>0</TD>
    <TD>LQ</TD>
    <TD>2001-2-23 0:00:00</TD>
    <TD>汉</TD>
    <TD>171</TD></TR>
</TBODY></TABLE></BODY></HTML>

在声明一下，我用的DataGrid控件，
先事项DataGrid的列能排序的时候在旁边显示个图片(比如向下的箭头），而且能拖动列的宽度，

http://aspx.cc 看看你上次得到这段代码，看看法帖人是谁！
看你是5个三角，在客户端DataGrid控件和table有什么区别！！！！
你只用把顶端js
var TableName = "AspxCC";
改成你DataGrid的名字就可以了！
而且能拖动列的宽度，两个结合起来非常麻烦！看看谁会为了100分，帮你干这事，我看着

谢谢lyhold(让你飞) ，你给出的代码很详细

我用JS写好的有一个，把你的DataGrid的ID设置为element,再把代码加到DataGrid的后面就可以了
http://expert.csdn.net/Expert/topic/2502/2502687.xml?temp=.7035486

我有对datagrid排序且改变列宽的htc，晚上发给你，在家里呢:)

cmsoft(韦小宝是我的老乡)(.net&java)谢谢你
[email protected]

不论你用什么控件，在客户段都是一样的啦，还不是htm和js
微软的所谓的那些服务端控件，设置n种属性，还不是转换为htm代码，调用n个js来实现的

建议看看这里：http://expert.csdn.net/expert/topic/2502/2502687.xml?temp=.8789-----------努力学习不断实践虚心讨教---------

guoyan19811021(吉祥) ( 你的这个怎么调用呢？？

DataGrid1_ItemCreated:
        If e.Item.ItemType = ListItemType.Header Then
            If (True) Then '如果允许改变列宽
                Dim i As Integer
                For i = 0 To e.Item.Cells.Count - 1
                    e.Item.Cells(i).Attributes.Add("onmousemove", "SyDG_moveOnTd(this)")
                    e.Item.Cells(i).Attributes.Add("onmousedown", "SyDG_downOnTd(this)")
                    e.Item.Cells(i).Attributes.Add("onmouseup", "this.mouseDown=false")
                    e.Item.Cells(i).Attributes.Add("onmouseout", "this.mouseDown=false")
                Next
            End If
        End If
    End Sub

也可以在客户端直接调用：
<TABLE id="element" style="FONT-SIZE: 9pt; BORDER-COLLAPSE: separate" cellSpacing="0" borderColorDark="#ffffff"
cellPadding="2" width="100%" borderColorLight="#888888" border="1" BorderStyle="None">
<TBODY>
<TR align="center" bgColor="#dcdcdc">
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
style="BORDER-RIGHT-COLOR: activeborder" onmouseout="this.mouseDown=false">用户编号</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">试用时间</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">转正时间</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">性别</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">姓名拼音</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">生日时间</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">民族</TD>
<TD onmouseup="this.mouseDown=false" onmousemove="SyDG_moveOnTd(this)" onmousedown="SyDG_downOnTd(this)"
onmouseout="this.mouseDown=false">身高</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">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 style="WIDTH: 75px">2000045</TD>
<TD>2001-2-15 0:00:00</TD>
<TD>2001-3-15 0:00:00</TD>
<TD>0</TD>
<TD>WY</TD>
<TD>1978-8-5 0:00:00</TD>
<TD>汉</TD>
<TD>162</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000046</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>2001-3-23 0:00:00</TD>
<TD>0</TD>
<TD>LQ</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>汉</TD>
<TD>171</TD>
</TR>
</TBODY>
</TABLE>

我参照这个。
http://expert.csdn.net/expert/topic/2502/2502687.xml?temp=.8789
做的代码，但是有一点点问题。
这是到可户段的代码，请看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Edit_Multi_Row</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2800.1264" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema>
<SCRIPT language=javascript>
function setValue(){
var w=0,arrChk=document.getElementsByName('chk'),arrTxt=document.getElementsByName('txt');

for(var i=0;i<3;i++){
if(arrChk[i].checked)w++;
arrTxt[i].value='';
}
if(w==0)return;

for(var i=0;i<3;i++){
if(arrChk[i].checked)arrTxt[i].value=(i==2&&w==3?34:parseInt(100/w))
}
}
</SCRIPT>
</HEAD>
<BODY MS_POSITIONING="GridLayout">
<FORM id=Edit_Multi_Row name=Edit_Multi_Row action=Edit_Multi_Row.aspx
method=post><INPUT type=hidden
value=dDwxODkyNTYzNzMzO3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDE+Oz47bDx0PEAwPHA8cDxsPFBhZ2VDb3VudDtfIUl0ZW1Db3VudDtfIURhdGFTb3VyY2VJdGVtQ291bnQ7RGF0YUtleXM7PjtsPGk8MT47aTwzPjtpPDM+O2w8Pjs+Pjs+Ozs7Ozs7Ozs7Oz47bDxpPDA+Oz47bDx0PDtsPGk8MT47aTwyPjtpPDM+Oz47bDx0PDtsPGk8MD47aTwyPjtpPDM+Oz47bDx0PDtsPGk8MT47PjtsPHQ8cDxwPGw8VGV4dDs+O2w8MTs+Pjs+Ozs+Oz4+O3Q8O2w8aTwyPjs+O2w8dDxAPDAgOz47Oz47Pj47dDw7bDxpPDE+Oz47bDx0PHA8O3A8bDxvbmNsaWNrOz47bDxsMl9DaGVja2JveDEoKTs+Pj47Oz47Pj47Pj47dDw7bDxpPDA+O2k8Mj47aTwzPjs+O2w8dDw7bDxpPDE+Oz47bDx0PHA8cDxsPFRleHQ7PjtsPDI7Pj47Pjs7Pjs+Pjt0PDtsPGk8Mj47PjtsPHQ8QDwxIDs+Ozs+Oz4+O3Q8O2w8aTwxPjs+O2w8dDxwPDtwPGw8b25jbGljazs+O2w8bDNfQ2hlY2tib3gxKCk7Pj4+Ozs+Oz4+Oz4+O3Q8O2w8aTwwPjtpPDI+O2k8Mz47PjtsPHQ8O2w8aTwxPjs+O2w8dDxwPHA8bDxUZXh0Oz47bDwzOz4+Oz47Oz47Pj47dDw7bDxpPDI+Oz47bDx0PEA8MCA7Pjs7Pjs+Pjt0PDtsPGk8MT47PjtsPHQ8cDw7cDxsPG9uY2xpY2s7PjtsPGw0X0NoZWNrYm94MSgpOz4+Pjs7Pjs+Pjs+Pjs+Pjs+Pjs+Pjs+PjtsPGVsZW1lbnQ6X2N0bDI6Q2hlY2tCb3hDYXNoO2VsZW1lbnQ6X2N0bDI6Q2hlY2tib3gxO2VsZW1lbnQ6X2N0bDM6Q2hlY2tCb3hDYXNoO2VsZW1lbnQ6X2N0bDM6Q2hlY2tib3gxO2VsZW1lbnQ6X2N0bDQ6Q2hlY2tCb3hDYXNoO2VsZW1lbnQ6X2N0bDQ6Q2hlY2tib3gxOz4+TlobFT1TPWq69sZ7gFS66eRBcOY=
name=__VIEWSTATE>
<TABLE id=element
style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 8pt; Z-INDEX: 101; LEFT: 119px; BORDER-LEFT: black 1px solid; WIDTH: 802px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 118px; BORDER-COLLAPSE: collapse; HEIGHT: 151px; BACKGROUND-COLOR: #ffc0c0"
borderColor=black cellSpacing=0 cellPadding=3 rules=all border=1>
  <TBODY>
  <TR style="BACKGROUND-COLOR: #aaaadd">
    <TD>BookId</TD>
    <TD>Title</TD>
    <TD> </TD>
    <TD>Price</TD>
    <TD> </TD></TR>
  <TR>
    <TD><SPAN id=element__ctl2_TextBoxBookId>1</SPAN> </TD>
    <TD><INPUT id=element__ctl2_TextBoxTitle value=1
      name=element:_ctl2:TextBoxTitle> </TD>
    <TD><INPUT id=element__ctl2_CheckBoxCash type=checkbox
      name=element:_ctl2:CheckBoxCash><LABEL
      for=element__ctl2_CheckBoxCash>现金结算</LABEL> 字段值为：0 </TD>
    <TD><SPAN onclick=l2_Checkbox1()><INPUT id=element__ctl2_Checkbox1
      type=checkbox name=element:_ctl2:Checkbox1></SPAN> <INPUT
      id=element__ctl2_TextBoxPrice value=20 name=element:_ctl2:TextBoxPrice>
</TD>
    <TD><INPUT onclick=setValue() type=checkbox name=chk> <INPUT name=txt>
  </TD></TR>
  <TR>
    <TD><SPAN id=element__ctl3_TextBoxBookId>2</SPAN> </TD>
    <TD><INPUT id=element__ctl3_TextBoxTitle value=2
      name=element:_ctl3:TextBoxTitle> </TD>
    <TD><INPUT id=element__ctl3_CheckBoxCash type=checkbox CHECKED
      name=element:_ctl3:CheckBoxCash><LABEL
      for=element__ctl3_CheckBoxCash>现金结算</LABEL> 字段值为：1 </TD>
    <TD><SPAN onclick=l3_Checkbox1()><INPUT id=element__ctl3_Checkbox1
      type=checkbox name=element:_ctl3:Checkbox1></SPAN> <INPUT
      id=element__ctl3_TextBoxPrice value=30 name=element:_ctl3:TextBoxPrice>
</TD>
    <TD><INPUT onclick=setValue() type=checkbox name=chk> <INPUT name=txt>
  </TD></TR>
  <TR>
    <TD><SPAN id=element__ctl4_TextBoxBookId>3</SPAN> </TD>
    <TD><INPUT id=element__ctl4_TextBoxTitle value=3
      name=element:_ctl4:TextBoxTitle> </TD>
    <TD><INPUT id=element__ctl4_CheckBoxCash type=checkbox
      name=element:_ctl4:CheckBoxCash><LABEL
      for=element__ctl4_CheckBoxCash>现金结算</LABEL> 字段值为：0 </TD>
    <TD><SPAN onclick=l4_Checkbox1()><INPUT id=element__ctl4_Checkbox1
      type=checkbox name=element:_ctl4:Checkbox1></SPAN> <INPUT
      id=element__ctl4_TextBoxPrice value=40 name=element:_ctl4:TextBoxPrice>
</TD>
    <TD><INPUT onclick=setValue() type=checkbox name=chk> <INPUT name=txt>
  </TD></TR></TBODY></TABLE><INPUT id=Button1 style="Z-INDEX: 102; LEFT: 116px; POSITION: absolute; TOP: 319px" type=submit value=UPDATE name=Button1><SPAN
id=Label1
style="Z-INDEX: 103; LEFT: 340px; WIDTH: 222px; POSITION: absolute; TOP: 79px">所有的DataGrid数据都可以编辑</SPAN>
<SCRIPT language=javascript> function  l2_Checkbox1() {document.getElementById('element__ctl2_TextBoxPrice').value='element__ctl2_TextBoxPrice';document.getElementById('element__ctl2_TextBoxPrice').style.background='Black;'} </SCRIPT><SCRIPT language=javascript> function  l3_Checkbox1() {document.getElementById('element__ctl3_TextBoxPrice').value='element__ctl3_TextBoxPrice';document.getElementById('element__ctl3_TextBoxPrice').style.background='Black;'} </SCRIPT><SCRIPT language=javascript> function  l4_Checkbox1() {document.getElementById('element__ctl4_TextBoxPrice').value='element__ctl4_TextBoxPrice';document.getElementById('element__ctl4_TextBoxPrice').style.background='Black;'} </SCRIPT>
</FORM>
后面还有。太长

<SCRIPT language=javascript>
//function CreateDataGrid(element)
{
var selectBgColor = '#A3A3A3';//被选择行的背景色
var headTdColor = 'menu';//表头背景色
var trOverColor = '#D3D3D3';
function setTdWidth(tdIndex)//设置表格的列宽
{
//alert(tdIndex);
var td = element.rows[0].cells[tdIndex];
var tab = td;
while(tab.tagName!='TABLE')tab=tab.parentElement;//显示表格内容的Table
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
var headTd = hTab.rows[0].cells[td.cellIndex];
//alert(headTd.width);
td.width = headTd.offsetWidth;
td.style.width = headTd.offsetWidth;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
//return headTd.offsetWidth;
}
function setHeadDivLeft(div)//
{
var tab = div;
while(tab.tagName!='TABLE')tab=tab.parentElement;
var headDiv = tab.rows[0].firstChild;
while(headDiv.tagName!='DIV')headDiv=headDiv.firstChild;
headDiv.scrollLeft = div.scrollLeft;
}
function initHeadTdWidth()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;//找到真正的列头Table
for(var i=0;i<hTab.rows[0].cells.length;i++)
{
var td = hTab.rows[0].cells[i];
td.bgColor = headTdColor;
td.style.borderLeftColor = '#eeeeee';
td.style.borderTopColor = '#eeeeee';
td.style.borderRightColor = '#666666';
td.style.borderBottomColor = '#666666';
td.onmousedown = beginResizeTd;
td.onmousemove = setTdCursor;
//td.style.display = element.rows[0].cells[i].style.display;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
if(element.rows[0].cells[i].width)
{
td.width = element.rows[0].cells[i].width;
td.style.width = element.rows[0].cells[i].width;
}
else if(element.rows[0].cells[i].style.width)
{
td.width = element.rows[0].cells[i].style.width;
td.style.width = element.rows[0].cells[i].style.width;
}
else
{
//默认宽为100
td.width = 100;
td.style.width = 100;
}
}
}
function initMainTdWidth()
{
if(element.rows.length<=0) return;
for(var i=0;i<element.rows[0].cells.length;i++)
//element.rows[0].cells[i].width = setTdWidth(element.rows[0].cells[i]);
setTdWidth(i);
}
function setMainTable()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
element.style.position = 'relative';
element.style.top = -hTab.offsetHeight;
element.width = hTab.offsetWidth;
element.style.width = hTab.offsetWidth;
}
function initElement()
{
var html = "<table style='table-layout:fixed;height:100%;width:100%;' cellspacing=0 cellpadding=0>";
html += "<tr><td style='height:expression(firstChild.offsetHeight+1);layout:fixed;'>";
html += "<div style='overflow:hidden;width:expression(parentElement.offsetWidth-18);position:relative;'>";
html += "<table border=1 style='border-collapse:collapse;table-layout:fixed'>";
html += element.rows[0].outerHTML; // + head
html += "</table>";
html += "</div>";
html += "</tr></td><tr><td style='height:*;layout:fixed;'>";
html += "<div id='main' style='overflow:scroll;width:expression(parentElement.offsetWidth);height:100%;' onscroll='setHeadDivLeft(this)'>";
html += element.outerHTML;// + element
html += "</div>";
html += "</td></tr></table>";

element.outerHTML = html;
//element.document.close(); initHeadTdWidth(); //设置表格头的宽
//element.deleteRow(0); //删除显示内容的第一行
initMainTdWidth(); //设置内容表格的宽
setMainTable(); //设置内容表格的位置
}
//element.width = '';
element.style.wordBreak = "break-all";
element.style.tableLayout = 'fixed';
initElement();
////////////////////////// 下面内容设置可以使用鼠标调整列宽 //////////////////////////////////////////////
element.document.attachEvent('onmousemove',resizeTd);
element.document.attachEvent('onmouseup',endResizeTd);
function element.document.onselectstart(){if(document.old)return false;}
function setTdCursor()
{
var td = event.srcElement;
if(event.offsetX>td.offsetWidth-10 || document.old)
td.style.cursor = "col-resize";
else
td.style.cursor = "auto";
}
//function resizeTimeOut(){endResizeTd()}
function beginResizeTd()
{
var td = event.srcElement;
if(event.offsetX<td.offsetWidth-10) return;
document.tdDown = true;
var tab = td;while(tab.tagName!="TABLE")tab=tab.parentElement;
document.old=
{
"td":td,
"tdWidth":td.offsetWidth,
"downX":event.x,
"table":tab,
"tableWidth":tab.offsetWidth
}
//setTimeout("resizeTimeOut()",10000);
}
function resizeTd()
{
if(!document.old || document.old["td"].tagName!="TD") return;
if(document.tdDown)
{
document.body.style.cursor = "col-resize";
var offsetWidth = (event.x-document.old["downX"]);
var newWidth = document.old["tdWidth"] + offsetWidth;
if(newWidth<=5) return;
document.old["td"].width = newWidth;
document.old["td"].style.width = newWidth;
document.old["table"].width = document.old["tableWidth"]+offsetWidth;
document.old["table"].style.width = document.old["tableWidth"]+offsetWidth; setTdWidth(document.old["td"].cellIndex);
setMainTable();
//保存列宽
//var index = document.old["td"].cellIndex;
//divTdWidth.getElementsByTagName("INPUT")[index].value = newWidth;
}
else
{
document.body.style.cursor = "auto";
document.old = null;
}
}
function endResizeTd()
{
document.old = null;
document.tdDown = false;
document.body.style.cursor = "auto";
}
////////////////////// 下面设置点击表格时改变行背景色的事件 ////////////////////////////
element.attachEvent('onclick',doDataGridClick);
element.attachEvent('onmouseover',doDataGridMouseOver);
element.attachEvent('onmouseout',doDataGridMouseOut);
function doDataGridClick()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(element.oldTr!=null)
element.oldTr.bgColor = element.oldColor;
element.oldTr = tr;
element.oldColor = tr.oldColor;//tr.bgColor;
tr.bgColor = selectBgColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOver()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.oldColor = tr.bgColor;
tr.bgColor = trOverColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOut()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.bgColor = tr.oldColor;
}
}</SCRIPT>
</BODY></HTML>

我怎么没收到，能在发一下吗？
发到这个吧。
[email protected]

我在csdn发的消息，给你下载地址与用法

To:cmsoft
I want get it too!(htc)
email address: [email protected]
Thank you very much!

我把地址供给大家吧:)see here:http://www.cmsoft.com.cn/Sino_Forum/xmlDocument/251.xml?temp=1856248517

你打开css文件，看看它引用htc的相对路径，你可以把两个文件放到一起，改一下css引用htc的路径就行了

调试易

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

解决方案 »