VS2005中的GridView功能很强大,可是还是有些地方不尽人意。比如想做到单元格中的内容超长有tooltip(不自动换行,多余的部分隐藏掉),或GridView在列比较多时,屏幕无法全部显示的情况下应该有滚动条等等。这里我用JS实现上述功能,并已使用到项目中。页面代码片断:
< tr >
< td style ="height: 100%; width: 100%;" >
< div id ="divGridView" style ="overflow: auto; height: 100%;" >
< asp:GridView ID ="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" >
< FooterStyle BackColor ="#E8F2FC" Font-Bold ="True" />
< RowStyle BackColor ="White" ForeColor ="#333333" />
< EditRowStyle BackColor ="#999999" />
< SelectedRowStyle BackColor ="#E2DED6" Font-Bold ="True" ForeColor ="#333333" />
< PagerStyle BackColor ="#F7F6F3" HorizontalAlign ="Right" Font-Size ="12px" />
< HeaderStyle Font-Bold ="True" Font-Size ="12px" Height ="22px" CssClass ="gvheader" />
< AlternatingRowStyle BackColor ="Info" />
< Columns >
< asp:BoundField HeaderText ="操作" >
< HeaderStyle Wrap ="False" Width ="30px" />
< ItemStyle Wrap ="False" HorizontalAlign ="Center" />
</ asp:BoundField >
< asp:BoundField DataField ="nGrade" HeaderText ="级别" SortExpression ="nGrade" >
< HeaderStyle Wrap ="False" Width ="30px" />
< ItemStyle Wrap ="False" />
</ asp:BoundField >
< asp:BoundField DataField ="strBookID" HeaderText ="图书编号" SortExpression ="strBookID" >
< HeaderStyle Wrap ="False" Width ="70px" />
< ItemStyle Wrap ="False" />
</ asp:BoundField >
< asp:BoundField DataField ="" HeaderText ="书名" >
< HeaderStyle Wrap ="False" Width ="250px" />
< ItemStyle Wrap ="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,此样式会将单元格内容超长的部分截取(隐藏)。样式的定义如下:
{...} {
overflow:hidden;
table-layout:fixed;
}
现在页面和样式都有了,再开始发挥JS的作用了。每个函数的作用在代码里已注释。
window.onload = function ()
... {
resizeGrid();
}
// 在页面调整大小时触发resizeGrid
window.onresize = function ()
... {
resizeGrid();
}
// 当页面大小发生改变时触发此函数,此函数用来动态调整GridView宽度和高度
function resizeGrid()
... {
var grid = getGridView();
if (grid)
...{
adjustGridView('divGridView', grid.id);
}
}
// 获取当前页面中id为divGridView的div层中的GridView
function getGridView()
... {
var div = document.getElementById("divGridView");
if (div)
...{
var tables = div.getElementsByTagName("table");
if (tables.length > 0)
...{
return tables[0];
}
}
return null;
}
// 调整GridView的高度和宽度大小
function adjustGridView(divID, objID)
... {
if (document.readyState == 'complete')
...{
// 当页面加载完毕则获取对应的GridView和其所属的div
var obj = document.getElementById(objID);
var div = 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)
// 创建时隐藏并且内容不换行
var span = 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的字体大小继承而来)
*/
function makeTooltip()
... {
var o = event.srcElement;
var span = 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:
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%。
如果你觉得有可以改进的地方,或有更好的方法请告诉我。