JSF数据表和Bootsfaces模式窗口的问题



我将JSF用于我的Web应用程序(与EJB结合使用),并将Bootsfaces作为JavaScript添加来显示模式窗口。我有一个通过dataTable显示的项目列表。通过点击列表中的命令按钮,我打开了一个模式窗口,询问用户"他是否确定要删除"。该模式确认对话框有YES和NO。我可以在模式窗口中执行YES-execute按钮。但是我不能做#{controller.delete(item)},因为在构建列表表时,该项仅在服务器端可用。不知怎的,我必须将实际选择的项目发送到模式窗口,以便在控制器调用中进行设置。。。???

有人有主意吗?

<!-- looping the jsf list //-->
<h:dataTable value="#{controller.itemlist}" var="item"...
...
<!-- showing modal window //-->
<h:commandButton value="delete" action="" onClick="return false;" p:toggle-data.... />
</h:dataTable>
</h:form>
...
<!-- modal window in panel, with item not set //-->
...
<h:commandButton action="#{controller.delete(item)}" />
</h:form>
</b:panel>
...

您可以使用ajax来填充模态的内容:

$.ajax({
    url : "yourPage.jsf",
    type : "POST",
    data : {
        id: "your object's id"
    },
    dataType : "html"
}).done(function(html) {
    $("#yourModal").html(html);
});

这个ajax应该用<h:commandButton> 上的onclick事件调用

当然,您还需要为您的模态内容创建一个JSF视图。此视图将包含您的文本以及"是"one_answers"否"两个按钮。"否"应该只是驳回你的模态,而"是"应该调用你的bean操作:<h:commandButton action="#{controller.delete(item)}" />

不要忘记用id参数填充控制器item,以便将数据绑定到视图。

编辑:

我试着给你举个例子。

主视图(View.xhtml):

<h:form>
  <h:dataTable value="#{controller.itemlist}" var="item">
    <h:column>
     ...
    </h:column>
    <h:column>
      <h:commandButton value="delete" onclick="return populateModal(#{item.id}); " />
    </h:column>
  </h:dataTable>
</h:form>

用于填充模态(view.xhtml)的脚本:

<script type="text/javascript">
  function populateModal(id) {
    $.ajax({
      url: "view2.jsf",
      type: "POST",
      data: { id: id },
      dataType: "html"
    }).done(function(html) {
      $("#modal").html(html);
      $("#modal").show();
    });
    return false;
  }
</script>

然后您需要一个模态内容的视图(view2.xhtml):

<h:form>
  Delete #{testBean2.item.name} ?
  <h:commandButton value="YES" action="#{testBean2.delete(testBean2.item)}" />
  <h:commandButton value="NO" onclick="return closeModal();" />
</h:form>

这个视图的控制器(testBean2.java):

private Item item;
@PostConstruct
public void init() {
    // GET id parameter from HTTPRequest
    // Populate Local Item
}
public void delete(Item item) {
    // Delete your item
}

相关内容

  • 没有找到相关文章

最新更新