jquery与DataGrid实现点击列名显示/隐藏详细信息

      今天在无意中发现了一个DataGrid显示某列详细信息的方法，点击某一列的列名，就将想要显示的内容显示在Panel里。

具体实现如下：

 前台 DataGrid：

 1 <asp:DataGrid ID="axDadData" runat="server" AutoGenerateColumns="False" OnItemCommand="axDadData_ItemCommand"
 2             OnItemDataBound="axDadData_ItemDataBound" PageSize="15" Width="100%">
 3             <Columns>
 4                 <asp:TemplateColumn>
 5                     <ItemTemplate>
 6                         <table border="1" cellpadding="1" cellspacing="1">
 7                             <tr>
 8                                 <td class="style4">
 9                       <%# (this.axApgPage.CurrentPageIndex - 1) * this.axApgPage.PageSize + Container.ItemIndex + 1%></td>
10                                 <td class="style5">
11                  <span class='myspan'><%# DataBinder.Eval(Container.DataItem, "dIntgArticleID").ToString()%></span></td>
12                                 <td class="style9">
13                                    <a href="show.aspx?vID=<%# DataBinder.Eval(Container.DataItem, "dIntgArticleID").ToString()%>" target="_blank"><%# DataBinder.Eval(Container.DataItem, "dVch2ArticleTitle").ToString()%></a></td>
14                                 <td class="style7"><%# DataBinder.Eval(Container.DataItem, "dIntgArticleTypeID").ToString()%>
15                                 </td>
16                                 <td class="style3">
17                                     <%# DataBinder.Eval(Container.DataItem, "dVch2ArticeType").ToString()%>
18                                 </td>
19                                 <td class="style8">
20                                    <%# DataBinder.Eval(Container.DataItem, "dVch2ReleasePeople").ToString()%></td>
21                                 <td class="style2" width="80">
22                                    <%# DataBinder.Eval(Container.DataItem, "dDaeReleaseTime").ToString()%></td>
23                             </tr>
24                                 <tr >
25                                 <td colspan="7">
26                                     <asp:Panel ID="ccc" runat="server" CssClass="hideClass" 
27                                         ToolTip='<%# DataBinder.Eval(Container.DataItem, "dIntgArticleID").ToString()%>'>
28                                         <%# DataBinder.Eval(Container.DataItem, "dVch2ArticeType").ToString()%>Never use oils or lotions which contain oils on your bird. They gunk up the feathers,
29         and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--those
30         require immediate veterinary attention--a bird can die within two days because a cat's mouth is so
31         filthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,
32         and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen the
33         situation. Never try to treat a fracture at home.</asp:Panel>
34                                     </td>
35                             </tr>
36                          </table>               
37                     </ItemTemplate>
38                 </asp:TemplateColumn>

 Jquery代码：

 1 $(document).ready(function()
 2  {
 3     var myid;
 4     $(".myspan").toggle
 5    (
 6       function() 
 7       {
 8           //myid = $('.myspan').html();// 不能确定点击的是哪一行，永远返回第一行
 9 
10     alert($(this).html());//改用这种方式，获取鼠标点击的对象
11     myid = $(this).html();
12           //alert($("div[title=" + myid + "]").attr('id'));
13     $("div[title=" + myid + "]").removeClass("hideClass");//通过title属性，来查找该行中的panel对象

14       },
15       function() {
16       $("div[title=" + myid + "]").addClass("hideClass");
17                 
18       }
19    );
20 });

需要注意的几点事项：

1、DataGrid只添加一个模板列，在该模板列中使用table规划好想要读取数据库的数据列，并且table制定为两行，第一行显示主体信息，第二行里使用panel显示从体信息。

2、不能用div替代panel，使用div后，隐藏和显示的内容，不会跟随点击的某一行，永远停留在第一行做显示隐藏。

3、panel输出至html后，显示为div标签，tooltip显示为title，因此在jquery代码中$("div[title=" + myid + "]")使用该方式。

4、panel输出至html后，ID为客户端重新生成的ID，因此需要用jquery的[attribute=value]匹配给定的属性是某个特定值的元素，该例中匹配title为指定的值，值来自点击的内容，通常我习惯将主键来做匹配，将主键信息放入title用来与点击的对象的值做匹配，再对匹配获取的对象进行操作。

 

还有使用嵌套DataGrid来实现主从显示效果：http://zsl79812sun.blog.163.com/blog/static/1234112752009631103456382/