隐藏数据表列而不重新呈现它。 JSF 客户端操作

Question

我曾经使用 Spring MVC 结合 jQuery 和 html 开发丰富的客户端界面应用程序；然而，因为我们目前没有好的设计师，我想使用 PrimeFaces 5.2 来使用 JSF 2.2，这应该给我专业的界面，而不需要常规的设计师。

我非常了解如何将 JSF 用作基于组件的框架，但我担心的是我想尽可能避免对服务器进行不必要的调用，因为我每天有数万个请求。因此，我坚持在 JSF 中使用 jQuery，并且会尽可能避免调用 ajax 来更新视图，除非我需要根据某些用户 selection 完全重构它。

这是我尝试过的场景：我有一个 table，用户可以从中 select 到 hide/show 列，基于每个列的复选框 selection。现在，正如我所说，我不想使用 ajax 为每个 select/unselect 重新呈现视图，而是使用 jQuery。

在我制作第一个草稿页面并尝试使用 jQuery 后，我发现我不得不使用 firebug 浏览页面源代码并构建复杂的 [=30] =] 隐藏 p:dataTable 列。

这正常吗？我的意思是，当我查看代码并看到它在多大程度上依赖于 Primefaces html 结构生成时，我感到不自信。

我是在不明智地使用 JSF 还是这就是 JSF 的真相？

Answer 1

您可以在 JSF 视图上使用您想要的所有 jQuery/JS。主要问题是只要您不同步状态，模型就不会保持更新。要看到 hiding/showing 列并不那么复杂，这里有一个使用 jQuery 及其样式选择器的基本完整示例：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
    <script>
        function switchColumn() {
            if ($('.style1').is(":visible")) {
                $('.style1').fadeOut(1000);
            } else {
                $('.style1').fadeIn(1000);
            }
        }
    </script>
    <h:form>
        <p:commandButton type="button" onclick="switchColumn();"
            value="Switch" />
        <p:dataTable var="test" value="#{testBean.values}">
            <p:column styleClass="style1">
                #{test.id}
            </p:column>
            <p:column>
                #{test.val1}
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

@ManagedBean
@ViewScoped
public class TestBean {

    private List<TestClass> values = new ArrayList<TestClass>();

    public TestBean() {
        values.addAll(Arrays.asList(new TestClass(1, "val1"), new TestClass(2,
                "val2")));
    }

    public List<TestClass> getValues() {
        return values;
    }

    public class TestClass {

        private Integer id;

        private String val1;

        public TestClass(Integer id, String val1) {
            this.id = id;
            this.val1 = val1;
        }

        public Integer getId() {
            return id;
        }

        public String getVal1() {
            return val1;
        }

    }

}

不得不说JSF就是为你控制请求内容和模型更新而设计的。在这些方面不如 SpringMVC 轻，因为您不能选择发送什么（不是完全）。所以，如果担心 request/response 性能，也许你应该使用其他框架。

另请参阅：

Is there a way to add columns datatable without rerendering the entire table

隐藏数据表列而不重新呈现它。 JSF 客户端操作

Hide a datatable column without rerendering it. JSF Client side manipulation

jsf

primefaces