【问题标题】:Disabling ability to change the sort-order of a sorted OpenFaces Datatable禁用更改已排序 OpenFaces 数据表的排序顺序的功能
【发布时间】:2012-03-28 13:11:17
【问题描述】:

在用于查看数据的 JSF 页面上,我有一个启用了排序和列重新排序的 OpenFaces 数据表,它保存到适当的支持 bean 属性(通过:o:dataTable 元素上的 sortColumnId、sortAscending、columnsOrder 属性)。在相应的内联编辑页面上(通过自定义代码,用户可以一次保存表格的各个行),数据表的 columnsOrder 链接到相同的属性,因此列的显示顺序与查看页面,但数据表中不存在 o:columnReordering 元素,以防止编辑页面上的列重新排序。这是必需的,因为移动列启动的 AJAX 调用由于部分响应 XML 中的错误而无法更新表。 (还有其他要求,这意味着应该防止表格在编辑页面上通过 AJAX 进行更新。)

我希望能够让编辑页面上的数据表按照与视图页面上相同的顺序排序,但也禁用排序。但是,这在 OpenFaces 中似乎是不可能的。我已将编辑页面上的数据表链接到相同的支持 bean 属性,但是要使已排序的列显示为已排序,o:column 标记需要具有 sortExpression 属性。当该属性被添加到列中时,该列变得可排序,用户能够单击列标题。未添加时,用户无法对该列进行排序,但该表也不会按该列排序,即使它在支持 bean 属性中指定为要排序的列。

创建 DOM 后使用 JQuery 运行的 JavaScript,我尝试覆盖 OpenFaces 列标题的“第”元素上的 click 事件调用的函数,但在调用该函数后,AJAX 调用排序和刷新表仍然被调用。使用的代码是:

在 Edit.xhtml 中:

<script type="text/javascript">
    $(document).ready(function() {
        $('#doorNumberColumnHeader').parents('th').onclick = null;
        $('#doorNumberColumnHeader').parents('th').click(function(event) {
            alert("Preventing AJAX call");

            if (event) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }

            return false;
          });
      });
</script>

在 Edit.xthml 的 OpenFaces 数据表中:

<o:column id="doorNumberColumn" sortingExpression="#{submission.doorNum}" fixed="true" width="50px">
    <f:facet name="header">
        <h:outputText value="#{bundle.SubmissionDoorNumber}" id="doorNumberColumnHeader"/>
    </f:facet>
    <h:outputText value="#{submission.doorNum}"/>
</o:column>

有没有更好的方法来阻止 AJAX 调用以阻止用户更改表格的排序顺序?

谢谢。

【问题讨论】:

    标签: jsf sorting datatable openfaces


    【解决方案1】:

    对于那些可能感兴趣的人,我发现我的问题的答案是在创建 DOM 后覆盖 OpenFaces JavaScript _reload() 函数。我知道这可能会阻止同一页面上的 任何 OpenFaces 组件进行 AJAX 调用(尽管在有问题的页面上我只有一个数据表,所以这不是问题。)

    <script type="text/javascript">
        $(document).ready(function() {
            // Prevent OpenFaces datatable component from sending AJAX requests!
            window.OpenFaces.Ajax._reload = function(one, two, three) {
                // Do nothing!
            };
        });
    </script>
    

    此解决方案不会阻止在页面内进行其他 AJAX 调用,因此仍然可以使用 a4j:commandButton。

    【讨论】:

    • 恭喜修复!如果有能力,请确保将您的答案标记为“已接受”,以便其他人可以从您的成功中学习。干杯~
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-22
    • 1970-01-01
    • 2013-05-07
    • 2012-01-16
    • 2013-02-25
    • 1970-01-01
    相关资源
    最近更新 更多