在JSF数据表中为行生成ID

Question

I am trying to achieve the expand/contract functionality of table rows in JSF using core faces implementation. 我正在尝试使用核心面孔实现在JSF中实现表行的扩展/收缩功能。 As answered in one of my earlier thread this is not straight forward to achieve in core faces implementation. 正如我在较早的主题之一中回答的那样，在核心Faces实现中并不是直接实现的。 So, I thought of using HTML + jQuery to achieve the functionality. 因此，我想到了使用HTML + jQuery实现功能。 I am calling the row with +/- gif as parent row and the rows that are to be expanded and contracted are its child rows. 我将带有+/- gif的行称为父行，要展开和收缩的行为其子行。 To make parent row aware of which child it needs to show or hide, I am making use of jquery and assigning row id to each <tr> . 为了使父行知道需要显示或隐藏哪个子行，我使用了jquery并将行ID分配给每个<tr> 。 If the parent row-id="row1234" , then the child row will have row-id="row1234-child" . 如果父row-id="row1234" ，则子行将具有row-id="row1234-child" 。

Below is the Jquery Script and HTML code: 以下是Jquery脚本和HTML代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
  <html>
   <head>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
    $('.expand').click(function() {
     if( $(this).hasClass('.hidden') )
     {
                        $(this).attr("src", "plus.gif");
                    }
                else 
                {

                        $(this).attr("src", "subtract1.gif");
                    }

                $(this).toggleClass('hidden');

           $(this).parent().parent().siblings('#'+$(this).parent().parent().attr('id')+'-child').toggle();     

     });

      });
    </script>

    <style>
     .hover {background-color:#00f; color: #fff;}
    </style>
   </head>
   <body>
    <table border="1" cellspacing="0" cellpadding="0">
     <thead>
      <tr><th>Rolling </th><th>transaction</th></tr>
     </thead>
     <tbody>
      <TR class="parent" id="row123" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>123</TD>
  <TD colspan="2"><img 
  class="expand" src="plus.gif"/>ABC</TD>
  <TD>100</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-01-02</TD>
  <TD>A short description</TD>
  <TD>15</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-02-03</TD>
  <TD>Another description</TD>
  <TD>45</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-03-04</TD>
  <TD>More Stuff</TD>
  <TD>40</TD>
 </TR>
 <TR class="parent" id="row2345" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>234</TD>
  <TD colspan="2"><img class="expand" src="plus.gif"/>DEF</TD>
  <TD>100</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-01-02</TD>
  <TD>A short description</TD>
  <TD>15</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-02-03</TD>
  <TD>Another description</TD>
  <TD>45</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-03-04</TD>
  <TD>More Stuff</TD>
  <TD>40</TD>
 </TR>
 <TR class="parent" id="row3456" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>345</TD>
  <TD colspan="2">HIJ</TD>
  <TD>100</TD>
 </TR>
     </tbody>
    </table>
   </body
  </html>

So, I was wondering whether I can generate row id for datatable or if there is a better solution for it. 因此，我想知道是否可以为数据表生成行ID，或者是否有更好的解决方案。

Answer 1

If all you want is to access the parent row of the clicked image using jQuery, then just do: 如果您只想使用jQuery访问单击图像的父行，则只需执行以下操作：

var tr = $(this).parents('tr');

Where this is the clicked image. this是单击的图像。

在JSF数据表中为行生成ID

问题描述

1 个解决方案

解决方案1
0 2010-01-27 13:48:50

在JSF数据表中为行生成ID

问题描述

1 个解决方案

解决方案1 0 2010-01-27 13:48:50

解决方案1
0 2010-01-27 13:48:50