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

今天在无意中发现了一个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/

转载于:https://www.cnblogs.com/Godblessyou/archive/2011/09/13/2175037.html