2016-04-21 67 views
0

我正在开发一个Web应用程序,其中在一个页面(称为“abc.xhtml”)中,我使用纯CSS来创建弹出窗口。在此页面中,我使用dataTable以动态表格的形式填充值。在点击按钮后弹出css中的valus

这是HTML代码

<div class="content_box" > 

        <h:dataTable id="example" value="#{userdetails.orderList}" var="o" 
         styleClass="employeeTable" headerClass="employeeTableHeader" 
         > 
         <h:column> 
         <f:facet name="header">Action</f:facet> 




    <h:commandButton 
            type="submit" value="Edit" 
            action="#{userLayer.editAction(o)}" ></h:commandButton> 
            </h:column> 

         <h:column> 
          <f:facet name="User">User</f:facet> 

          <h:outputText value="#{o.user}" /> 

         </h:column> 

而是在行动项目列命令按钮,我想HREF,这样当用户点击HREF一个模式应该为屏幕上的一个形式弹出和那么用户可以相应地编辑这些值。

问题是,当加载HTML页面时,css弹出窗口中的值将自动填充dataTable的第一行的值,即对于index = 0.因此,不管哪一行,当我单击编辑按钮,它将始终使用第一行的值填充弹出窗口。

我想到两个解决方案 -

  • 是否有可能点击按钮后加载某些div的值,而不是用HTML页面加载它?
  • 是否有可能把return语句,这样,当用户点击按钮,它会调用在Java层的方法与return语句是这样的 -

回报“abc.xhtml#编辑”;

其中#edit是使用href按钮调用的弹出窗口。 请帮助

+0

考虑jQuery的AJAX –

回答

1

而不是H:dataTable中使用的用户界面:这里下面重复的例子

<div class="content_box"> 
<table cellpadding="0" cellspacing="0" border="0" style="white-space: nowrap"> 
<tr> 
<th>Action</th> 
<th>User</th> 
</tr> 
<ui:repeat value="#{userdetails.orderList}" var="o" varStatus="oList"> 
<tr> 
<td><h:commandLink action="#{userLayer.editAction(o)}" 
        value="Edit"> 
    </h:commandLink></td> 
<td> <h:outputText value="#{o.user}" /></td> 
</tr> 
</ui:repeat> 
</table> 
</div> 

当你点击编辑,那么你必须从DB特定对象获取数据,然后选择已经到设置来自DB的用户字段的值。

Java代码示例,说你在的usermodel绑定的用户价值

public void editAction(User user){ 
User u = userService.findById(user.id); 
userModel.setUser(u.user) 
// code for pop-up 
}