J'essaye de réaliser la fonctionnalité d'expansion/contrat des rangées de table dans JSF en utilisant l'implémentation des faces principales. Comme cela a été répondu dans l'un de mes sujets précédents, ce n'est pas simple à réaliser dans la mise en œuvre des faces principales. J'ai donc pensé à utiliser HTML + jQuery pour réaliser la fonctionnalité. J'appelle la ligne avec +/- gif comme ligne parente et les lignes à développer et à contracter sont ses lignes enfants. Pour que la ligne parente soit consciente de l'enfant qu'elle doit montrer ou cacher, j'utilise jquery et j'attribue un identifiant de ligne à chaque <tr>. Si le parent row-id="row1234", la ligne enfant aura row-id="row1234-child".Générer id pour la ligne dans JSF datatable
est en dessous du script Jquery et le code 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>
Alors, je me demandais si je peux générer id de ligne pour datatable ou s'il y a une meilleure solution pour elle.
Grande question: qu'est-ce que vous en avez besoin? Comme vous essayez de le générer côté client, vous n'en avez apparemment besoin que du côté client. Il y a certainement de meilleures façons pour résoudre le problème pour lequel vous * pensiez * que * c'était * la * solution. En bref: il suffit d'élaborer l'exigence fonctionnelle au lieu de demander comment parvenir à une solution (qui n'est peut-être pas la bonne solution après tout). – BalusC
BTW: pour mettre en forme le code, sélectionnez le code et appuyez sur le bouton '010101' dans la barre d'outils de l'éditeur ou' Ctrl + K'. Essayez également de ne pas mélanger les onglets/espaces et d'indenter ** de manière cohérente ** (par exemple 4 ou 2 espaces). Dans IDE/éditeurs décents, vous pouvez configurer cela dans les paramètres. – BalusC
@Nrusingha - Notez que, par la spécification HTML, les ID d'élément doivent être uniques - http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 – McDowell