dataTable在p

dataTable在p

关注
发信
关注(28)粉丝(399)

如何从p：dataTable在p：对话框中显示当前行的详细信息，并保存后更新

本文介绍了如何从p：dataTable在p：对话框中显示当前行的详细信息，并保存后更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个JSF 2应用程序有两个页面，一个用于列出学生，一个用于显示给定学生的详细信息。列表页面有一个链接到学生表的每一行的详细信息页面，在浏览器中打开一个新的选项卡，以便在点击时显示这些详细信息。



现在要求更改为在新标签页中不再显示详细信息，但在列表页面中的模态对话框中。



我的想法是将详细信息页面内容简单地嵌入到模态对话框，所以列表页面不会变得太大，难以维护。这里开始我的疑惑经过一些研究，我将列表的每一行中的链接更改为以下按钮：

 < p：commandButton value =详细信息type =button
 onclick =PF（'dialog-details'）。show（）> 
< / p：commandButton>

对话框声明如下：

 < p：dialog widgetVar =dialog-detailsheader =Detailsmodal =truewidth =95％> 
< ui：include src =student_details.xhtml> 
< ui：param name =idvalue =＃{student.id}/> 
< / ui：include> 
< / p：dialog>

最后，详细信息页面更改为如下：

 < ui：composition 
 xmlns =http://www.w3.org/1999/xhtmlxmlns：f =http： /java.sun.com/jsf/core
 xmlns：p =http://primefaces.org/uixmlns：h =http://java.sun.com/jsf/html
 xmlns：ui =http://java.sun.com/jsf/facelets> 
 
< f：metadata> 
< f：viewParam name =idvalue =＃{studentBean.id}/> 
< / f：metadata> 
 
< h1 class =title ui-widget-header ui-corner-all>＃{studentBean.bean.name} /＃{studentBean.bean.number}< / h1> 
< / ui：composition>

当我点击按钮时，对话框将显示出来，内容是详细信息页面。我在对话框中看到以下内容：

  / 
   
 
 
根本没有错误，但应该显示的数据不是。在 StudentBean.setId（）中设置了一个断点（此方法加载名为 bean的属性与 Student 对应于传递的id的实例），但它永远不会被击中。
 
 
 
经过一段时间的思考，我来了解为什么这是行不通的。传递给详细信息页面的参数是 student.id ，但 student 是用作<$ c $在< p：datatable /> 中显示所有学生的c> var ，所以 student 在< p：datatable /> < p：dialog /> 中无效c $ c>。
 
 
 
所以，我需要的是使用给定行中相应学生的ID显示对话框的方法。理想情况下，我想在这里打一个ajax，所以细节只有在加载时才会加载。
 
 
 
任何想法？
解决方案
按钮应该是一个ajax按钮，它设置bean中当前迭代的实体，然后更新对话框的内容，最后显示它。对话框应该仅仅引用bean中的实体，并在save上更新列表和表。
 
 
 
这是一个开始示例：
 < h：form id =master> 
< p：dataTable value =＃{bean.entities}var =entity> 
< p：column>＃{entity.property1}< / p：column> 
< p：column>＃{entity.property2}< / p：column> 
< p：column>＃{entity.property3}< / p：column> 
 ... 
< p：column> 
< p：commandButton value =Viewaction =＃{bean.setEntity（entity）}
 update =：detailoncomplete =PF（'detail' /> 
< / p：column> 
< / p：dataTable> 
< / h：form> 
 
< p：dialog id =detailwidgetVar =detail> 
< h：form> 
< p：inputText value =＃{bean.entity.property1}/> 
< p：inputText value =＃{bean.entity.property2}/> 
< p：inputText value =＃{bean.entity.property3}/> 
 ... 
< p：button value =Closeonclick =PF（'detail'）。hide（）; return false/> 
< p：commandButton value =保存action =＃{bean.save}
 update =：masteroncomplete =PF（'detail'）hide（）/> ; 
< / h：form> 
< / p：dialog> 
  
这里有一个 @ViewScoped  bean： 
 私人列表<实体>实体; // + getter 
 private Entity entity; // + getter + setter 
 
 @EJB 
 private EntityService entityService; 
 
 @PostConstruct 
 public void load（）{
 entities = entityService.list（）; 
 entity = null; 
} 
 
 public void save（）{
 entityService.save（entity）; 
 load（）; 
} 
  
 
 
 
另请参见：
 
 
 
     
     
  •   
    •  
     
  •   
    •  
     
  •   
    •  
     
  •  的渲染和可视属性之间的差异
    •  
     
  •   
    •  
     
 
I have a JSF 2 application that has two pages, one to list students and one to show details of a given student. The listing page has a link to the details page in each row of the students table, that opens a new tab in browser to show those details, when clicked.
Now the requirements changed to no more show details in a new tab, but in a modal dialog in the listing page.
My idea is to simply embed the details page content in the modal dialog so the listing page will not get too big and hard to maintain. Here start my doubts. After some research I changed the link in each row of the listing to the following button:
<p:commandButton value="Details" type="button"
                 onclick="PF('dialog-details').show()">
</p:commandButton>

The dialog is declared as follows:
<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
    <ui:include src="student_details.xhtml">
        <ui:param name="id" value="#{student.id}"/>
    </ui:include>
</p:dialog>

Finally, the details page was changed to be something like this:
<ui:composition
    xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <f:metadata>
        <f:viewParam name="id" value="#{studentBean.id}" />
    </f:metadata>

    <h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>

When I click the button, the dialog really shows and the content is the details page. I see the following content in the dialog:
Details of  /

No errors at all, but the data that should be shown, isn't. A breakpoint was set in StudentBean.setId() (this method loads a property named bean with the Student instance corresponding to the passed id) but it is never hit.
After some time thinking about it, I came to understand why it does not work. The parameter passed to the details page is student.id, but student is the name used as the var in the <p:datatable/> that show all the students, so student is not valid in <p:dialog/> which is outside the <p:datatable/>.
So, what I need is a way to show the dialog using the id of the corresponding student in a given row. Ideally, I would like an ajax call here, so the details would loaded only when neded.
Any ideas?
 解决方案 
The button should be an ajax button which sets the currently iterated entity in the bean, and then updates the dialog's content, and finally shows it. The dialog should just reference that entity in the bean and update the list and table on save.
Here's a kickoff example:
<h:form id="master">
    <p:dataTable value="#{bean.entities}" var="entity">
        <p:column>#{entity.property1}</p:column>
        <p:column>#{entity.property2}</p:column>
        <p:column>#{entity.property3}</p:column>
        ...
        <p:column>
            <p:commandButton value="View" action="#{bean.setEntity(entity)}"
                update=":detail" oncomplete="PF('detail').show()" />
        </p:column>
    </p:dataTable>
</h:form>

<p:dialog id="detail" widgetVar="detail">
    <h:form>
        <p:inputText value="#{bean.entity.property1}" />
        <p:inputText value="#{bean.entity.property2}" />
        <p:inputText value="#{bean.entity.property3}" />
        ...
        <p:button value="Close" onclick="PF('detail').hide(); return false" />
        <p:commandButton value="Save" action="#{bean.save}"
            update=":master" oncomplete="PF('detail').hide()" />
    </h:form>
</p:dialog>

With this inside a @ViewScoped bean:
private List<Entity> entities; // +getter
private Entity entity; // +getter+setter

@EJB
private EntityService entityService;

@PostConstruct
public void load() {
    entities = entityService.list();
    entity = null;
}

public void save() {
    entityService.save(entity);
    load();
}

See also:
                        
这篇关于如何从p：dataTable在p：对话框中显示当前行的详细信息，并保存后更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-18 22:48
Powered by LMLPHP ©2024 dataTable在p 0.047101