Создать идентификатор для строки в таблице данных JSF

Я пытаюсь реализовать функциональность расширения/сокращения строк таблицы в JSF, используя реализацию основных лиц. Как было сказано в одном из моих предыдущих потоков, это не так просто реализовать в основных гранях. Итак, я подумал об использовании HTML + jQuery для достижения функциональности. Я вызываю строку с +/- gif в качестве родительской строки, а строки, которые должны быть расширены и сжаты, являются ее дочерними строками. Чтобы родительская строка знала, какой дочерний элемент ей нужно показать или скрыть, я использую jquery и присваиваю идентификатор строки каждому <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>

Итак, мне было интересно, могу ли я сгенерировать идентификатор строки для таблицы данных или есть лучшее решение для этого.


datatable row jsf
person Nrusingha    schedule 26.01.2010    source источник
comment
Большой вопрос: для чего он нужен? Поскольку вы пытаетесь сгенерировать его на стороне клиента, вам, по-видимому, это нужно только на стороне клиента. Конечно, есть лучшие способы решения проблемы на стороне клиента, для которой вы думали, что это было решением. Короче говоря: просто разработайте функциональное требование вместо того, чтобы спрашивать, как найти решение (которое, в конце концов, может быть неправильным решением).   -  person BalusC    schedule 27.01.2010
comment
Кстати: чтобы отформатировать код, выберите код и нажмите кнопку 010101 на панели инструментов редактора или Ctrl+K. Также старайтесь не смешивать табуляции и пробелы и старайтесь делать отступы последовательно (например, 4 или 2 пробела). В приличных IDE/редакторах это можно настроить в настройках.   -  person BalusC    schedule 27.01.2010
comment
@Nrusingha - обратите внимание, что согласно спецификации HTML идентификаторы элементов должны быть уникальными - w3.org/TR/html4/struct/global.html#h-7.5.2   -  person McDowell    schedule 27.01.2010

Ответы (1)


arrow_upward
0
arrow_downward

Если все, что вам нужно, это получить доступ к родительской строке щелкнутого изображения с помощью jQuery, просто выполните:

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

Где this — изображение, по которому щелкнули.

person BalusC    schedule 27.01.2010
comment
Благодаря BalusC, я могу добиться желаемой функциональности с помощью Jquery. Большое спасибо за ваше ценное предложение и время - person Nrusingha; 01.02.2010