Я пытаюсь добиться расширения / сжатия функциональности строк таблицы в JSF, используя реализацию основных граней. Как ответили в одной из моих предыдущих тем, это не так просто для реализации основных граней. Итак, я подумал об использовании HTML + jQuery для достижения функциональности. Я называю строку с +/- gif в качестве родительской строки, а строки, которые должны быть расширены и сокращены, являются его дочерними строками. Чтобы родительская строка узнала, какого потомка ему нужно показать или скрыть, я использую jquery и присваиваю идентификатор строки каждому <tr>. Если родительский row-id="row1234", то дочерний ряд будет иметь row-id="row1234-child".
Ниже приведен Jquery Script и 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> </TD>
<TD>2007-01-02</TD>
<TD>A short description</TD>
<TD>15</TD>
</TR>
<TR ID="row123-child" style="display: none; ">
<TD> </TD>
<TD>2007-02-03</TD>
<TD>Another description</TD>
<TD>45</TD>
</TR>
<TR ID="row123-child" style="display: none; ">
<TD> </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> </TD>
<TD>2007-01-02</TD>
<TD>A short description</TD>
<TD>15</TD>
</TR>
<TR ID="row2345-child" style="display: none; ">
<TD> </TD>
<TD>2007-02-03</TD>
<TD>Another description</TD>
<TD>45</TD>
</TR>
<TR ID="row2345-child" style="display: none; ">
<TD> </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 или есть лучшее решение для этого.