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

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

         < table  cellspacing ="0"  cellpadding ="0"  width ="100%"  border ="0"  height ="100%" >
             < 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，此样式会将单元格内容超长的部分截取（隐藏）。样式的定义如下：

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

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

//  在页面装载完毕时触发resizeGrid
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：

     < script  for = " 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%。

如果你觉得有可以改进的地方，或有更好的方法请告诉我。