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

【问题标题】：Can I have both both radio selection and row selection in a p:dataTable我可以在 p:dataTable 中同时进行单选和行选择吗
【发布时间】：2020-03-09 05:15:17
【问题描述】：

我有一个p:dataTable，它需要同时具有 radio 选择和 row 选择。在 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>

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

【问题讨论】：

不，它不应该，也许“你会喜欢它...”你读过/检查文档？你的 PF 版本是多少？
Primefaces 6.2 版

标签： jsf primefaces primefaces-datatable

【解决方案1】：

要始终记住的一件事是，客户端的一切都是 html/javascript/css（在这种情况下借助 jQuery）。

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

以jQuery for getting Click event on a Table row 开头。为此，我们需要检查实际点击需要在哪里。在第一部分使用数据表的 id 并不是一个糟糕的选择。但是id是什么？好吧，为此在 Stackoverflow 中也有一个 Q/A。 How can I know the id of a JSF component so I can use in Javascript 对于 PrimeFaces 展示，这实际上是 #form\\:radioDT" 但在整个 html 结构中，我们只需要单击某些行（例如，不在标题等中）。因此，这变成了类似

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

如果您在 PrimeFaces 展示中尝试此操作，您会看到正在记录的行上的点击（包括来自单选按钮的点击）

下一步将是Simulate a click on 'a' element using 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 trigger click gives "too much recursion"

您要做的是检查对行的点击是否源自对单选按钮以外的任何内容的点击。然后才模拟点击。为此，我们需要事件和来自事件的目标，并使用与单击相同的选择器进行检查：

$("#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。用你的替换它。

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

【讨论】：