[英]Generate id for row in JSF datatable
我正在尝试使用核心面孔实现在JSF中实现表行的扩展/收缩功能。 正如我在较早的主题之一中回答的那样,在核心Faces实现中并不是直接实现的。 因此,我想到了使用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('.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>
因此,我想知道是否可以为数据表生成行ID,或者是否有更好的解决方案。
如果您只想使用jQuery访问单击图像的父行,则只需执行以下操作:
var tr = $(this).parents('tr');
this
是单击的图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.