在JSF數據表中為行生成ID

Question

我正在嘗試使用核心面孔實現在JSF中實現表行的擴展/收縮功能。 正如我在較早的主題之一中回答的那樣，在核心Faces實現中並不是直接實現的。 因此，我想到了使用HTML + jQuery實現功能。 我將帶有+/- gif的行稱為父行，要展開和收縮的行為其子行。 為了使父行知道需要顯示或隱藏哪個子行，我使用了jquery並將行ID分配給每個<tr> 。 如果父row-id="row1234" ，則子行將具有row-id="row1234-child" 。

以下是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>

因此，我想知道是否可以為數據表生成行ID，或者是否有更好的解決方案。

Answer 1

如果您只想使用jQuery訪問單擊圖像的父行，則只需執行以下操作：

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

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