用JS加强VS2005中的GRIDVIEW表现效果

From:http://blog.csdn.net/aquadp/archive/2008/04/17/2302470.aspx

VS2005中的GridView功能很强大，可是还是有些地方不尽人意。比如想做到单元格中的内容超长有tooltip(不自动换行，多余的部分隐藏掉)，或GridView在列比较多时，屏幕无法全部显示的情况下应该有滚动条等等。这里我用JS实现上述功能，并已使用到项目中。页面代码片断：

<tablecellspacing="0"cellpadding="0"width="100%"border="0"height="100%">
<tr>
<tdstyle="height:100%;width:100%;">
<divid="divGridView"style="overflow:auto;height:100%;">
<asp:GridViewID="GridView1"runat="server"CellPadding="2"ForeColor="#333333"AllowPaging="True"
AllowSorting="True"AutoGenerateColumns="False"PageSize="24"OnRowDataBound="GridView1_RowDataBound"
CssClass="gridview"BorderWidth="0px"BackColor="#D4D0C8"CellSpacing="1">
<FooterStyleBackColor="#E8F2FC"Font-Bold="True"/>
<RowStyleBackColor="White"ForeColor="#333333"/>
<EditRowStyleBackColor="#999999"/>
<SelectedRowStyleBackColor="#E2DED6"Font-Bold="True"ForeColor="#333333"/>
<PagerStyleBackColor="#F7F6F3"HorizontalAlign="Right"Font-Size="12px"/>
<HeaderStyleFont-Bold="True"Font-Size="12px"Height="22px"CssClass="gvheader"/>
<AlternatingRowStyleBackColor="Info"/>
<Columns>
<asp:BoundFieldHeaderText="操作">
<HeaderStyleWrap="False"Width="30px"/>
<ItemStyleWrap="False"HorizontalAlign="Center"/>
</asp:BoundField>
<asp:BoundFieldDataField="nGrade"HeaderText="级别"SortExpression="nGrade">
<HeaderStyleWrap="False"Width="30px"/>
<ItemStyleWrap="False"/>
</asp:BoundField>
<asp:BoundFieldDataField="strBookID"HeaderText="图书编号"SortExpression="strBookID">
<HeaderStyleWrap="False"Width="70px"/>
<ItemStyleWrap="False"/>
</asp:BoundField>
<asp:BoundFieldDataField=""HeaderText="书名">
<HeaderStyleWrap="False"Width="250px"/>
<ItemStyleWrap="False"/>
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>

要达到GridView自动出现滚动条，必须将GridView放在一个div中并将此div的属性设为overflow:auto;height:100%;并且所属的表格长度和宽度都要设为100%,其次，对应的每一个绑定列的宽度要设在HeadStyle的width属性中并且ItemStyle的Wrap设为false,这样就可以保证单元格的内容不会因超长而自动换行，也不会将列宽拉伸而导致列的标题头错位。注意：要将所有列的列宽设为实际长度，而不是百分比，否则没有效果。另外GridView使用了样式gridview，此样式会将单元格内容超长的部分截取（隐藏）。样式的定义如下：

.gridview
{...}{
overflow:hidden;
table-layout:fixed;
}

现在页面和样式都有了，再开始发挥JS的作用了。每个函数的作用在代码里已注释。

//在页面装载完毕时触发resizeGrid
window.onload=function()
...{
resizeGrid();
}

//在页面调整大小时触发resizeGrid
window.onresize=function()
...{
resizeGrid();
}

//当页面大小发生改变时触发此函数，此函数用来动态调整GridView宽度和高度
functionresizeGrid()
...{
vargrid=getGridView();
if(grid)
...{
adjustGridView('divGridView',grid.id);
}
}

//获取当前页面中id为divGridView的div层中的GridView
functiongetGridView()
...{
vardiv=document.getElementById("divGridView");
if(div)
...{
vartables=div.getElementsByTagName("table");
if(tables.length>0)
...{
returntables[0];
}
}
returnnull;
}

//调整GridView的高度和宽度大小
functionadjustGridView(divID,objID)
...{
if(document.readyState=='complete')
...{
//当页面加载完毕则获取对应的GridView和其所属的div
varobj=document.getElementById(objID);
vardiv=document.getElementById(divID);
if(obj&&div)
...{
//然后将其所属的div层的宽度设为页面body的宽度
if(div.style.width!=document.body.clientWidth)
div.style.width=document.body.clientWidth;
}

//判断是否当前document存在__spanTW
if(document.getElementById('__spanTW')==null)
...{
//如果不存在则创建它（这里保证一个页面中只有一个__spanTW）
//创建时隐藏并且内容不换行
varspan=document.createElement('span');
span.id='__spanTW';
span.style.visibility='hidden';
span.style.whiteSpace='nowrap';
document.body.appendChild(span);
if(obj)
...{
//将动态构造tooltip函数指针付给GridView的onmouseover事件
obj.onmouseover=makeTooltip;
}
}
}
}

/**//*
当GridView的表格的字符串大于其宽度时则用tooltip提示
（注：字体的大小是由body的字体大小继承而来）
*/
functionmakeTooltip()
...{
varo=event.srcElement;
varspan=document.getElementById('__spanTW');
//如果是td并且没有设置tooltip
if(o.tagName.toLowerCase()=='td'&&o.title==''&&span!=null)
...{
span.innerText=o.innerText;
//如果内容的宽度大于当前td的宽度则将内容付给td的tooltip
if(span.offsetWidth>o.offsetWidth)
...{
o.title=o.innerText;
}
}
}

上面的JS脚本通过页面的事件来调整div的宽度，通过设置div层的宽度和之前设定的样式，div就会自动根据其所包含的GridView(实际在前台输出的就是Table)的宽度，来达到动态显示滚动条的效果。只是在一些框架页面中，效果不是很好，需要在帧对应的页面中加入以下JS：

<scriptfor="window"event="onresize">
adjustGridView('divGridView','GridView1');
</script>

并且在body的onload事件中加入adjustGridView('divGridView', 'GridView1');方法的调用。在动态创建tooltip的脚本中，通过将Table的onmouseover的事件(鼠标移入),来判断当前触发此事件的控件(event.srcElement)是不是td，如果是则将其内容付给__spanTW,再通过赋值后的__spanTW的宽度和td进行比较来决定是否创建tooltip。

OK，到目前为止，效果都已实现(还要在页面中添加对CSS和JS的引用哦！)。现在再说其缺点：

1)一个页面只能使用一个GridView，如果有多个GridView则实现不了；

2)如果单元格的字体大小不是body的字体大小，那么创建tooltip可能有问题；

3)实现其步骤比较多，又是设置样式，又是放在table,div中，又是引用js……，如果有一个步骤没有做，可能就会没有效果；

4)目前只支持IE5.5及以上版本；

另外如果不显示滚动条，而是其中的列根据页面宽度自动调整，则将内容比较固定的列设为具体宽度(象素)，对于内容不固定的列则设为百分比，但是需要注意的是，所有设为百分比的列的值相加应该等于100%。