为JSF datatable中的行生成id [英] Generate id for row in JSF datatable
问题描述
我正在使用核心面实现来实现JSF中表行的扩展/合约功能。在我之前的一个线程中回答说，这不是直接在核心面实现中实现的。所以，我想到使用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 ）
{
$（this）.attr（src，plus.gif）;
}
else
{
$（this）.attr（src，subtract1.gif）;
}
$（this）.toggleClass（'hidden'）;
$（this）.parent（）。parent（）。siblings（'＃'+ $（this）.parent（）。parent（）。attr（'id'）+' - child'）。 ）;
}）;
}）;
< / script>
< style>
.hover {background-color：＃00f; color：#fff;}
< / style>
< / head>
< body>
< table border =1cellspacing =0cellpadding =0>
< thead>
< tr>< th>滚动< th>事务< / th>< / tr>
< / thead>
< tbody>
< TR class =parentid =row123style =cursor：pointer;title =点击展开/折叠>
< TD> 123< / TD>
< TD colspan =2>< img
class =expandsrc =plus.gif/> ABC< / TD>
< TD> 100< / TD>
< / TR>
< TR ID =row123-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-01-02< / TD>
< TD>简短描述< / TD>
< TD> 15< / TD>
< / TR>
< TR ID =row123-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-02-03< / TD>
< TD>另一个描述< / TD>
< TD> 45< / TD>
< / TR>
< TR ID =row123-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-03-04< / TD>
< TD>更多资料< / TD>
< TD> 40< / TD>
< / TR>
< TR class =parentid =row2345style =cursor：pointer;title =点击展开/折叠>
< TD> 234< / TD>
< TD colspan =2>< img class =expandsrc =plus.gif/> DEF< / TD>
< TD> 100< / TD>
< / TR>
< TR ID =row2345-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-01-02< / TD>
< TD>简短描述< / TD>
< TD> 15< / TD>
< / TR>
< TR ID =row2345-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-02-03< / TD>
< TD>另一个描述< / TD>
< TD> 45< / TD>
< / TR>
< TR ID =row2345-childstyle =display：none;>
< TD>& nbsp;< / TD>
< TD> 2007-03-04< / TD>
< TD>更多资料< / TD>
< TD> 40< / TD>
< / TR>
< TR class =parentid =row3456style =cursor：pointer;title =点击展开/折叠>
< TD> 345< / TD>
< TD colspan =2> HIJ< / TD>
< TD> 100< / TD>
< / TR>
< / tbody>
< / table>
< / body
< / html>
所以，我想知道是否可以生成datatable的行ID，或者如果有更好的解决方案
如果您想要的是使用jQuery访问点击的图像的父列，那么只需执行以下操作： p>
var tr = $（this）.parents（'tr'）;
其中此是点击的图像。 / p>
I am trying to achieve the expand/contract functionality of table rows in JSF using core faces implementation. As answered in one of my earlier thread this is not straight forward to achieve in core faces implementation. So, I thought of using HTML + jQuery to achieve the functionality. I am calling the row with +/- gif as parent row and the rows that are to be expanded and contracted are its child rows. To make parent row aware of which child it needs to show or hide, I am making use of jquery and assigning row id to each <tr>. If the parent row-id="row1234", then the child row will have row-id="row1234-child".
Below is the Jquery Script and HTML code:
<!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>
So, I was wondering whether I can generate row id for datatable or if there is a better solution for it.
If all you want is to access the parent row of the clicked image using jQuery, then just do:
var tr = $(this).parents('tr');
Where this is the clicked image.
这篇关于为JSF datatable中的行生成id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
