Question

我有一个JSF MyFaces dataTable，它包含一个元素列表和一个带有删除按钮的列。我想要做的就是在点击删除按钮时弹出一个对话框，允许用户确认或取消操作。

我已经有了对话框（由于缺乏HTML5支持而简化并使用<a>）：

<div id="myModal">
    <h:form>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{somethingMagicInHere?}">Confirm</h:commandLink>
    </h:form>
</div>

在dataTable中我有类似的东西（也简化）：

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <a class="call-modal">Delete</a>
    </h:column>
</h:dataTable>

最后我的ManagedBean看起来像这样：

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    ...

    public String actionToPerform(ElementClass e) {
        MyBusinessLogicModel.getInstance().deleteElement(e);
    }
}

因此，简而言之，jQuery在加载页面时执行，并使用类call-modal获取所有元素，并为它们设置onclick，以便它们显示标识为myModal的组件，当然是模态窗口。我以这种方式继承了这个并且不想改变它，但任何解决方案或想法都会有所帮助。

我可以直接在dataTable中使用commandLink从视图中访问actionToPerform(element)，但当然不会触发模态。因此，鉴于此结构，我看到的主要问题是，在点击element按钮后，如何将dataTable中的Delete迭代发送到模态？（我不介意解决方案是否使用Ajax）。

任何输入都会有所帮助。感谢。

Answer 1

好的，这是一个丑陋但有效的解决方案，它不需要我重构所有视图和托管bean。简而言之：我添加了一个隐藏的输入字段，它将以模态形式存储要删除的元素的id。在数据表中，我所做的就是在单击按钮后设置隐藏输入字段的值并触发模态。然后用刚刚更新的值填充模态。

我的简化模式：

<div id="myModal">
    <h:form id="myForm">
        <h:inputHidden value="#{bean.elementIdInModal}" id="elementIdInModal"/>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{bean[actionToPerform]}">Confirm</h:commandLink>
    </h:form>
</div>

我的简化数据表：

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <h:link styleClass="call-modal"
            onclick="$('#myForm\\:elementIdInModal').val(#{element.id})">
            Delete
        </h:link>
    </h:column>
</h:dataTable>

我简化的ManagedBean：

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    private long elementIdInModal; // Ommiting getters and setters

    public void actionToPerform() {
        MyBusinessLogicModel.getInstance().deleteElement(elementIdInModal);
    }
}

如何使用JSF中的模态窗口确认操作？

1 个答案: