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

男娘i 2021-12-23 09:21 329阅读 0赞

今天在无意中发现了一个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/][http_zsl79812sun.blog.163.com_blog_static_1234112752009631103456382]

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

[http_zsl79812sun.blog.163.com_blog_static_1234112752009631103456382]: http://zsl79812sun.blog.163.com/blog/static/1234112752009631103456382/