我可以在p:dataTable中同时进行单选和行选择吗

Question

我有一个p:dataTable，它需要同时具有单选和行选择。在primefaces.org/showcase中，我们有复选框和行选择，但有多项选择，只有行选择和单选按钮选择。

下面是我的代码

<p:dataTable value="#{streetListBean.streetList}" var="street"
selection="#{streetListBean.selectedStreet}"
rowKey="#{street.streetId}">
<p:column selectionMode="single" style="text-align:center" width="5%"/>
<p:column headerText="#{msgs['label.streetName']}">
<p:outputLabel value="#{street.streetName}"/>
</p:column>
<p:column headerText="#{msgs['label.postalCode']}">
<p:outputLabel value="#{street.postalCode}"/>
</p:column>
<p:column headerText="#{msgs['label.location']}">
<p:outputLabel value="#{street.locName}"/>
</p:column>
</p:dataTable>

在上面的数据表中，我们只有单选，我也需要行选择。请帮助

Answer 1

ALWAYS需要记住的一件事是，客户端的一切都是html/javascript/css(在本例中有jQuery的帮助(。

PrimeFaces 7.0(及更高版本(具有onRowClick属性，但我不确定这是否适用于这种情况。一个始终有效的解决方案(旧版本和新版本(由几个非常简单的步骤组成(只需记住这个答案中的第一句话(

从jQuery开始获取Table行上的Click事件。为此，我们需要检查实际点击的位置。使用数据表的id作为第一部分并不是一个糟糕的选择。但是id是什么？对于这个问题，Stackoverflow中也有一个Q/a。我如何知道JSF组件的id，以便在Javascript中使用对于PrimeFaces展示，这实际上是#form\:radioDT"。但在整个html结构中，我们只需要点击某些行(例如，不在标题或类似内容中(。因此，这就变成了类似的东西

$("#form\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
console.log(this);
});

如果你在PrimeFaces展示中尝试，你会看到正在记录的行上的点击(包括源自单选按钮的点击(

下一步是模拟点击'；a'；元素使用javascript/jquery

但是点击哪里？好吧，这也可以很容易地在浏览器开发工具中找到。与单击的tr(this(相关的是：

$(this).find(".ui-selection-column .ui-radiobutton-icon").click(); //javascript version (selectors can be different, many work). Alternative is using jquery .trigger('click')

在中结合这些结果

$("#form\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
console.log(this);
$(this).find(".ui-selection-column .ui-radiobutton-icon").click();
});

不幸的是，这导致了"太多递归"错误。这是因为点击单选按钮会弹出一行，从而触发点击单选按钮。。。你明白了。

因此，第一个想法是防止点击冒泡。不幸的是，它不是来自我们的功能，而是来自点击无线电按钮，所以我们需要调整我们的来源。再次在stackoverflow中已有问答帮助：jQuery触发器点击给出"；太多递归"；

您要做的是检查对行的单击是否源于对除单选按钮之外的任何内容的单击。只有这样才能模拟单击。为此，我们需要事件，并从事件中选择目标，使用与点击相同的选择器，我们进行检查：

$("#form\:radioDT").on("click", "tbody.ui-datatable-data tr", function(event) {
if ( !$(event.target).is('.ui-selection-column .ui-radiobutton-icon')) {
console.log("Simulate click on radiobutton: ", event.target);
$(this).find(".ui-selection-column .ui-radiobutton-icon").click();
} else {
console.log("Skip: ", event.target);
}
}
);

请记住，$("#form\:radioDT")基于PrimeFaces展示中数据表组件的完整客户端id。把它换成你的。

如何以及在哪里将其添加到页面中，以及在ajax更新的情况下如何重新添加，也在Stackoverflow的Q/A中介绍。