利用div+css在GridView模版列打造可定制的ToolTip风格

在项目中，我们经常会遇到需要查看数据表中所有字段详细信息的情况，通常我们会把某些必要的字段如ID等显示出来，然后把其它字段汇总放到DetailView或者另一个页面，然后提供一个“查看详细信息”的LinkButton，抑或是利用脚本弹出另一个Web窗口。这些做法都稍显蹩脚，如果只是为“查看详细信息”而查看详细信息（额，有些拗口），我们还有更好的解决办法，利用div+css来达到类似ToolTip的效果。 

    众所周知，一些HTML元素或者ASP.NET控件都有一个叫做ToolTip的属性。这个属性主要是在鼠标移上的时候显示一些提示和描述信息。不幸的是，它不能像InnerHtml属性一样内嵌HTML代码。比如：

        <asp:Image ID="Image1" ImageUrl="~/images/more.gif" ToolTip="<b>抗震救灾 众志成城</b>" runat="server" />
        <asp:Label ID="Label2" runat="server" Text="<b>抗震救灾 众志成城</b>"></asp:Label>

运行效果如图：

     

    并没有达到我们预期的效果，好了，下面我们利用div+css在GridView模板内达到我们想要的效果。

    首先，我们添加一个数据源控件。

        <asp:SqlDataSource
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:MySqlConnectionString %>"
            ProviderName="System.Data.SqlClient"
            SelectCommand="SELECT * FROM [authors]">
        </asp:SqlDataSource>

         Web.config配置如下:

    <connectionStrings>

        <add name="MySqlConnectionString" connectionString="Data Source=./sqlexpress;AttachDBFilename=|DataDirectory|pubs.mdf;Integrated Security=True" />

    </connectionStrings>

  

    再添加一个GridView

 

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="au_id"

            DataSourceID="SqlDataSource1" AllowPaging="True">

            <Columns>

               <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />

                <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />

                <asp:TemplateField HeaderText="au_fname" SortExpression="au_fname">

                    <ItemTemplate>

                                          <%--想要添加的代码--%>                     

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

 

        Pubs数据库中的authors表有很多字段，我们只在Gridview里面显示前三个，之后，我们重点在au_fname模板列上做文章。

我们要达到这样的效果：每一行的au_fname后面都有一个小图片，鼠标移上时就弹出tooltip，里面有我们想要的详细信息。

首先，我们需要一个总的div容器。

                    <ItemTemplate>

                          <div>   

                          </div>                

                    </ItemTemplate>

    接着绑定要显示的字段：

                    <ItemTemplate>

                           <div>   

                               <asp:Label ID="Label1" runat="server" Text='<%# Bind("au_fname") %>'></asp:Label>

                           </div>                

                    </ItemTemplate>

 

    接着我们再添加一个div，这个div的作用十分重要，不可或缺，它主要是协调和Label1的布局（display:inline）并且框定tooltip的位置(position:relative)，使tooltip不至于在页面上“乱跑”。

                    <ItemTemplate>
                        <div>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("au_fname") %>'></asp:Label>
                            <div style="display:inline; position:relative;z-index:1000">
                                <img src="images/more.gif" alt="" />
                                <div id="div<%# Eval("au_id") %>" class="tooltip">
                                    <strong>phone</strong>:<%# Eval("phone")%><br />
                                    <strong>address</strong>:<%# Eval("address")%><br />
                                    <strong>city</strong>:<%# Eval("city")%><br />
                                    <strong>state</strong>:<%# Eval("state")%><br />
                                    <strong>zip</strong>:<%# Eval("zip")%><br />
                                    <strong>contract</strong>:<asp:CheckBox ID="CheckBox1"                  Checked='<%#Convert.ToBoolean(Eval("contract").ToString())%>' runat="server" />
                                </div>  
                            </div>                 
                        </div>                        
                    </ItemTemplate>

        Id为div<%# Eval("au_id") %>的div就是我们要的类似tooltip的容器，它是可定制的，也就是说，它可以是相当复杂的，你可以往里面添加任何你想要的HTML代码。

    编辑模板列，使其对齐：

   

   

   

    下一步，我们要利用CSS代码来控制这个div，使其状态在初始时隐藏，当img对象的onmousemove事件发生时显示，onmouseout事件发生时又隐藏。

    下面是CSS代码和Javascript脚本，都很简单。

    <style type="text/css">

        .tooltip

        {

            display: none;

            position: absolute;

            z-index: 1001;

            left: 10px;

            top: 15px;

            width: 170px;

           

            font-size: 0.8em;

            padding: 3px;

            border: dotted 1px;

            background-color: InfoBackground

        }

</style>

 

    <script type="text/javascript">

     function showPanel(divName) {

            var ctl = window.document.getElementById(divName);

            ctl.style.display = 'block';

            ctl.scrollIntoView();

     }

     function hidePanel(divName) {

            var ct2 = window.document.getElementById(divName);

            ct2.style.display = 'none';

     }

    </script>

 

好了，终于完成任务了，看一看实际效果吧。

这里有一个问题就是：