弹出一个鼠标，显示与gridview中该特定行相关的完整数据 [英] One mouse over pop up displaying the complete data related with that particular row in gridview

问题描述

--Scenario

city(table1)

Id      Name
1	chennai
2	Bhubaneswar
3	Bangalore
4	Delhi

place(table2)
Id      place
1	Thoraipakkam
1	Chrompet
2	kalpana chaka
2	badhei banka
3	Marathili
3	BTM Layout

--Now table1 will be displayed(binded) in gridview. And when i mouseover on anyrow, then particular places will be displayed as a small popup.

e.g when i move mouse over the 1st row..chennai. Then in popup it should display
Thoraipakkam
chrompet

- 我尝试过什么 -

--What i have tried--

1)i have written a function to get the html of second table.
select [dbo].[testfunction](1) 
<pre lang="xml"><Table width=400><tr><td>Thoraipakkam</td></tr><tr><td>Chrompet</td></tr></Table>
2) written a stored procedure
ALTER proc [dbo].[Distanceprocedure]
as
begin
select id,name,dbo.[testfunction](city.id) as functionhtml from city
end

3)Front end..(where i am facing problem)

::::::::::::::::::::::::::::::::::aspx page ::::::::::::::::::::::::::::::::::::::::::

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">&lt;/script>

&lt;script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js.txt">&lt;/script>

&lt;script type="text/javascript">
    $(function() {
        $('[id*=GridView1] tr').each(function() {
            var toolTip = $(this).attr("title");
            $(this).find("td").each(function() {
                $(this).simpletip({
                content: toolTip
                });
            });
            $(this).removeAttr("title");
        });
    });
&lt;/script>

&lt;head runat="server">
    &lt;title>&lt;/title>
&lt;/head>
&lt;body>
    <style type="text/css">
        #GridView1 tr.rowHover:hover
        {
            background-color: red;
            font-family: Arial;
        }



</style>
    &lt;form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" DataKeyNames="id" AutoGenerateColumns="False"
            Width="99%" OnRowDataBound="Gridplace_RowDataBound" BackColor="CadetBlue"
            BorderColor="Black" RowStyle-CssClass="rowHover">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblID" Font-Bold="true" BorderColor="CadetBlue" BorderStyle="Solid"
                            Font-Size="Medium" runat="server" Text='<%#Eval("id") %>' Width="283px"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblName" Font-Bold="true" BorderColor="CadetBlue" BorderStyle="Solid"
                            Font-Size="Medium" runat="server" Text='<%#Eval("name") %>' Width="283px"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <%--
                   <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblfunction" Font-Bold="true" Visible="false" BorderColor="CadetBlue" BorderStyle="Solid"
                            Font-Size="Medium" runat="server" Text='<%#Bind("functionhtml") %>' Width="283px"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>--%>
            </Columns>
        </asp:GridView>
    </div>
    &lt;/form>
&lt;/body>
&lt;/html>


</pre>


<pre>


</pre>

---------- -------------------------。CS ----------------------- ------------

-----------------------------------.cs-----------------------------------

protected void Gridplace_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {

           string functionhtml = DataBinder.Eval(e.Row.DataItem, "functionhtml").ToString();
           e.Row.ToolTip = functionhtml;

       }
   }

- 所以当我把它作为输出运行时..我得到的地方（table2）对应于城市（table1）但不是弹出窗口...但是显示在该特定行的下方...意味着当我将鼠标移动到

chennai ..我得到的结果如下



1 chennai

Thoraipakkam

chrompet

2布巴内斯瓦尔

3班加罗尔

4德里



请帮助我......

--So when i run this as output..I get the places(table2) corresponding to the city(table1) but not as popup...but displayed below that particular row...means when i move the mouse over
chennai..i get the result as below

1 chennai
Thoraipakkam
chrompet
2 Bhubaneswar
3 Bangalore
4 Delhi

Kindly help me...

推荐答案

（function（）{

(function() {

（'[id * = GridView1] tr'）。each（function（）{
var toolTip =

('[id*=GridView1] tr').each(function() { var toolTip =

（this）.attr（title）;

(this).attr("title");

这篇关于弹出一个鼠标，显示与gridview中该特定行相关的完整数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！