JSF / Primefaces：点击数据表条目打开对话

Question

I have JSF project with PrimeFaces. 我有PrimeFaces的JSF项目。

I have a 'dashboard' in my project that contains a small p:panel with ap:datatable. 我的项目中有一个“仪表板”，其中包含一个带有ap：datatable的小型p：面板。 The data in my table gets updated dynamically by my beans. 表中的数据由我的bean动态更新。 I want to be able to click on one of the labels to open up a dialogue with more data. 我希望能够单击其中一个标签以打开包含更多数据的对话框。

This is what a typical column looks like: 这是典型的列的样子：

<p:column  style="text-align: left">
    <f:facet name="header">
       <h:outputText value="Name"/>
    </f:facet>
    <h:outputText value="#{t.name}" style="text-align: left"/>
</p:column>

Then I would have another column for something like totals or time, it depends. 然后我会有另一个列，如总计或时间，这取决于。

In my bean I have a sql query running and populating a list which populates the datatable,nothing intricate. 在我的bean中，我有一个sql查询正在运行并填充一个列表，该列表填充了数据表，一点也不复杂。

How would I go about - efficiently - making or replacing the outputText so it's clickable and opening a dialogue which would be populated with data based on which value I clicked on. 我将如何 - 有效地 - 制作或替换outputText，以便它可以点击并打开一个对话框，该对话框将填充基于我点击的值的数据。

The problem I think that I might encounter is that the value in that column is a name, and not an ID in my db (which I will need to get the rest of the data to populate the dialogue box) 我认为我可能会遇到的问题是该列中的值是名称，而不是数据库中的ID（我需要获取其余数据以填充对话框）

Should I change the outputText to a link and have some sort of ajax call to open up the dialogue box and get the data? 我应该将outputText更改为链接并进行某种ajax调用以打开对话框并获取数据吗？

Answer 1

You can use primefaces commandLink. 您可以使用primefaces commandLink。 Below is full working example 以下是完整的工作示例

XHTML file XHTML档案

<!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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form id="form">
        <p:dataTable value="#{mbean.personList}" var="person">
            <p:column headerText="Name">
                <p:commandLink value="#{person.name}" oncomplete="test.show()"
                    update=":form:dialog">
                    <f:setPropertyActionListener target="#{mbean.selectedPerson}"
                        value="#{person}" />
                </p:commandLink>
            </p:column>
            <p:column headerText="Country">
                #{person.country}
            </p:column>
        </p:dataTable>
        <p:dialog modal="true" width="500" height="500" widgetVar="test"
            id="dialog">
            Name : #{mbean.selectedPerson.name}
        </p:dialog>
    </h:form>
</h:body>
</html>

Managed Bean 托管豆

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "mbean")
@ViewScoped
public class TestBean implements Serializable {

    private List<Person> personList;
    private Person selectedPerson;

    public TestBean() {
        personList = new ArrayList<Person>();
        personList.add(new Person("AKN", "UK"));
        personList.add(new Person("AKF", "Australia"));
        personList.add(new Person("AKH", "Asia"));

    }

    public List<Person> getPersonList() {
        return personList;
    }

    public void setPersonList(List<Person> personList) {
        this.personList = personList;
    }

    public Person getSelectedPerson() {
        return selectedPerson;
    }

    public void setSelectedPerson(Person selectedPerson) {
        System.out.println("selected" + selectedPerson.getName());
        this.selectedPerson = selectedPerson;
    }

}

Person Class 人类

import java.io.Serializable;

public class Person implements Serializable{

    private String name;
    private String country;


    public Person(String name, String country) {
        super();
        this.name = name;
        this.country = country;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getCountry() {
        return country;
    }
    public void setCountry(String country) {
        this.country = country;
    }

}

Output 产量

在页面加载点击名称时

JSF / Primefaces：点击数据表条目打开对话

问题描述

1 个解决方案

解决方案1
7 已采纳 2014-01-05 14:36:55

JSF / Primefaces：点击数据表条目打开对话

问题描述

1 个解决方案

解决方案1 7 已采纳 2014-01-05 14:36:55

解决方案1
7 已采纳 2014-01-05 14:36:55