Question

我想在Primefaces DataTable行中显示一个按钮，以显示一个对话框，显示有关该行中对象的更多信息。当我单击行中不在按钮中的任何位置时，将选中该行。但是，当我按下按钮时，未选中该行。如何使按钮位于所选行中的行？

Primefaces展示中的这个示例在backing bean中设置selectedCar，并在单击行中的按钮时显示一个包含行数据的对话框，但未选中该行：

<p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
    <f:facet name="header">
        Basic
    </f:facet>
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>
    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
    <p:column style="width:32px;text-align: center">
         <p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">
            <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

..来自同一页面的此示例选择表格中的一行和辅助bean，但后续按钮单击以显示对话框：

<p:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
    <f:facet name="header">
        Single with Row Click
    </f:facet>
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>
    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
    <f:facet name="footer">
        <p:commandButton process="singleDT" update=":form:carDetail" icon="ui-icon-search" value="View" oncomplete="PF('carDialog').show()" />
    </f:facet>
</p:dataTable>

我正在寻找一个优雅的解决方案，您可以在其中单击一行中的多个按钮中的任意一个，同时选择该行。这是一个使用多个按钮很有用的用例 - 该行的数据包含两个任意大小的richtext字段，这些字段在表中不易显示：

Answer 1

使用primefaces dataTable属性的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-name="john" data-clr="red"></div> <div data-name="mary" data-clr="green"></div>值，在dataTable的每一行内创建一个commandLink（或按钮）：

如果单击commandLink，则会调用actionListener并将rows对象设置为dataTableDialog bean中的 selectedElement 。
ajax请求成功完成后，commandLink的 update 属性会强制该对话框从bean请求当前数据。
现在，oncomplete属性的JavaScript代码会显示对话框。

查看commandLink的actionListener。

rows对象存储在成员变量var中。所选元素的数据由对话框显示。

这里有一个近乎完整的例子：

selectedElement

豆子：

<h:form id="form">
    <p:dialog widgetVar="dlg" modal="true" id="dialog">
      <h:outputText value="#{dataTableDialog.selectedElement.key} / #{dataTableDialog.selectedElement.val}" />
    </p:dialog>

    <p:dataTable
        var="cur"
        tableStyle="width: auto !important;"
        value="#{dataTableDialog.elements}">

        <p:column>
            <h:outputText value="#{cur.key}" />
        </p:column>

        <p:column>
            <h:outputText value="#{cur.val}" />
        </p:column>

        <p:column>
            <p:commandLink
                value="Read more ..."
                actionListener="#{dataTableDialog.setSelectedElement(cur)}"
                update="form:dialog"
                oncomplete="PF('dlg').show()" />
        </p:column>

    </p:dataTable>
</h:form>

数据类：

    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.List;
    import javax.annotation.PostConstruct;

    @javax.inject.Named
    @javax.enterprise.context.SessionScoped
    public class DataTableDialog implements Serializable {

    private List<Data>  elements;
    private Data        selectedElement;

      @PostConstruct
      public void init() {
        elements = new ArrayList<>();
        elements.add(new Data("Elem 1 Key", "Elem 1 Value"));
        elements.add(new Data("Elem 2 Key", "Elem 2 Value"));
      }

      public List<Data> getElements() {
        return elements;
      }

      public Data getSelectedElement() {
        return selectedElement;
      }

      public void setSelectedElement(Data selectedElement) {
        this.selectedElement = selectedElement;
      }
    }

Answer 2

受primefaces show case启发，适用于dataTable 选择：

如果是省略该按钮的选项，此示例将打开行单击对话框，包括行选择。

为您的DataModel添加ID
将属性 selection ， selectionMode 和 rowKey 添加到dataTable
在dataTable中插入<p:ajax ... />标记以显示rowSelectEvent

小脸：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head></h:head>

<h:body>
  <h:form id="form">
    <p:dialog
      widgetVar="elementDialog" modal="true">
      <p:outputPanel id="elementDetail">
        <p:panelGrid
          columns="2"
          rendered="#{not empty bean.selectedElement}"
          columnClasses="label,value">
          <h:outputText value="Key: #{bean.selectedElement.key}" />
          <h:outputText value="Val: #{bean.selectedElement.val}" />
        </p:panelGrid>
       </p:outputPanel>
      </p:dialog>

      <p:dataTable
        var="element"
        value="#{bean.elements}"
        selection="#{bean.selectedElement}"
        selectionMode="single"
        rowKey="#{element.id}"
        tableStyle="width: auto !important;">

        <p:ajax event="rowSelect" oncomplete="PF('elementDialog').show();" />

        <p:column headerText="Key">#{element.key}"</p:column>
        <p:column headerText="Val">#{element.val}"</p:column>
      </p:dataTable>
    </h:form>
  </h:body>
</html>

<p:dataTable
  var="element"
  value="#{bean.elements}"
  selection="#{bean.selectedElement}"
  selectionMode="single"
  rowKey="#{element.id}"
  tableStyle="width: auto !important;">

  <p:ajax
    event="rowSelect"
    oncomplete="PF('elementDialog').show();" />

...
</p:dataTable>

数据类：

public class Data implements Serializable {

	private int    id;        // + getter/setter
	private String key, val;  // + getter/setter

	public Data(int id, String key, String value) {
		super();
		this.setId(id);
		this.key = key;
		this.value = value;
	}

}

豆子：

public class Bean implements Serializable {

	private List<Data> elements;        // + getter
	private Data       selectedElement; // + getter/setter

	@PostConstruct
	public void init() {
		elements = new ArrayList<>();
		elements.add(new Data(0, "Elem 1 Key", "Elem 1 Value"));
		elements.add(new Data(1, "Elem 2 Key", "Elem 2 Value"));
	}

}

希望这个例子可以让你归档你的目标...;）

JSF Datatable - 如何选择按钮按行的行

2 个答案: