给GridView加点料:Div动态浮动显示

 首先看看效果:

鼠标移动到 按钮上面就浮动显示详细信息,下面是实现代码:

用到控件:HoverMenuExtender

 

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                CellPadding="4" DataKeyNames="采购单号,行号" DataSourceID="SqlDataSource1" Font-Size="10pt"
                ForeColor="#333333" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound"
                PageSize="5" Style="position: static" Width="100%">
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <Columns>
                    <asp:TemplateField HeaderText="历/详" InsertVisible="False">
                       <ItemTemplate>
                            <asp:Panel ID="PanelMenu2" runat="server">
                            
                            <%...--<asp:ImageButton ID="ImageBtnEdit" runat="server" CommandArgument='<%# Eval("行号")%>'
                                CommandName="CommandHistory" ImageUrl="~/image07/histrory.gif" />--%>
                       <a href="hthistory07.aspx?id=<%# Eval("物料")%>" target="_blank">
                                    <img src="image07/histrory.gif" alt=""  style="border-width:0px"/>
                                </a>
                         </asp:Panel>
                       <asp:Panel ID="Panel_CGDHangInfo" runat="server"  Width="300px">
                    <div class="notice" style="border:1px outset white; font-size:12px;">
                    物料代码:<asp:Label ID="lbl_01" runat="server" Text='<%# Bind("物料")%>'></asp:Label>
                    <br />
                     物料描述:<asp:Label ID="lbl_02" runat="server"  Text='<%# Bind("物料描述")%>'></asp:Label>
                     <br />
                     采购数量:<asp:Label ID="lbl_03" runat="server" Text='<%# Bind("采购数量")%>'></asp:Label>
                     <br />
                     单价:<asp:Label ID="lbl_04" runat="server" Text='<%# Bind("单价")%>'></asp:Label>
                     <br />
                     一次性费用:<asp:Label ID="lbl_05" runat="server" Text='<%# Bind("一次性费用")%>'></asp:Label>
                     <br />
                     单位:<asp:Label ID="lbl_06" runat="server" Text='<%# Bind("单位")%>'></asp:Label>
                     <br />
                     到货日期:<asp:Label ID="lbl_07" runat="server" Text='<%# Bind("到货日期")%>'></asp:Label>
                     <br />
                     合计价格:<asp:Label ID="lbl_08" runat="server" Text='<%# Bind("合计价格")%>'></asp:Label>
                     <br />
                     任务号:<asp:Label ID="lbl_09" runat="server" Text='<%# Bind("任务号")%>'></asp:Label>
                     <br />
                     定额数:<asp:Label ID="lbl_10" runat="server" Text='<%# Bind("定额数2")%>'></asp:Label>
                     <br />
                     备注:<asp:Label ID="lbl_11" runat="server"  ForeColor="red" Text='<%# Bind("备注")%>'></asp:Label>
                    </div>
                    </asp:Panel>
                        <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="PanelMenu2" PopupControlID="Panel_CGDHangInfo" HoverCssClass="popupHover" PopupPosition="Right" /> 
                 </ItemTemplate>  
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="行号" HeaderText="行号" ReadOnly="True">
                        <ItemStyle Width="30px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="物料" HeaderText="ERP代码">
                        <ItemStyle Width="90px" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="物料描述" HeaderText="物料描述">
                        <ItemStyle Width="90px" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="采购数量" HeaderText="采购数量">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="单价" InsertVisible="False" >
                        <ItemTemplate>
                            
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("单价")%>'>
                            </asp:Label><br/>
                           <asp:Image ID="ImagePrice" runat="server" /> 
                            <asp:Label ID="lbl_percent" runat="server">
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    
                    <%...--<asp:BoundField DataField="单价" HeaderText="单价">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>--%>
                    <asp:BoundField DataField="单价" HeaderText="单价" Visible="false" DataFormatString="{0:f2}">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="一次性费用" HeaderText="一次费" HtmlEncode="false" DataFormatString="{0:f2}">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="单位" HeaderText="单位">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="到货日期" HeaderText="到货日期"  HtmlEncode="false" DataFormatString="{0:yyyy-MM-dd}">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="合计价格" HeaderText="合计价格" HtmlEncode="false" DataFormatString="{0:f2}">
                        <HeaderStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="任务号" HeaderText="任务号"  Visible="false">
                        <HeaderStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="定额数2" HeaderText="定额数" Visible="false">
                        <HeaderStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="备注" HeaderText="备注" Visible="false">
                        <HeaderStyle HorizontalAlign="Center" />
                        </asp:BoundField>

                </Columns>
                <EditRowStyle BackColor="#2461BF" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Left" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>