Я пытаюсь реализовать функциональные возможности расширения/контракта строк таблицы в JSF с использованием реализации основных лиц. Как ответили в одном из моих предыдущих потоков, это не так просто добиться в реализации основных лиц. Итак, я думал об использовании HTML + jQuery для достижения функциональности. Я вызываю строку с +/- gif в качестве родительской строки, а строки, которые должны быть расширены и сжаты, являются его дочерними строками. Чтобы сделать родительскую строку осведомленной о том, какой дочерний объект ему нужно показать или скрыть, я использую jquery и присваиваю идентификатор строки каждому <tr>. Если родительский row-id="row1234", то дочерняя строка будет иметь row-id="row1234-child".Создать идентификатор для строки в JSF datatable
Ниже 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> </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 или если есть лучшее решение для этого.
Большой вопрос: для чего он нужен? По мере того, как вы пытаетесь создать его на стороне клиента, вам, по-видимому, нужна его только на стороне клиента. Есть, конечно, лучшие клиентские способы решения проблемы, для которой вы * мыслили *, что это * было * решением *. Короче говоря, просто уточните функциональные требования вместо того, чтобы спрашивать, как достичь решения (что, возможно, не является правильным решением в конце концов). – BalusC
BTW: чтобы форматировать код, выберите код и нажмите кнопку '010101' в панели инструментов редактора или' Ctrl + K'. Также попробуйте не смешивать вкладки/пробелы и последовательно пытаться отступом ** (например, 4 или 2 пробела). В достойных IDE/редакциях вы можете настроить это в настройках. – BalusC
@Nrusingha - обратите внимание, что по спецификации HTML идентификаторы элементов должны быть уникальными - http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 – McDowell