如何在具有多个富页面的富数据表中获取所选记录计数:datacroller

Question

我面临一个问题，我想测试用户是否从rich:dataTable中的多个页面中选择了任何记录。这些页面是通过rich:datascroller创建的。相关代码如下。

            <rich:datascroller id="dataScroller" selectedStyleClass="myClass" renderIfSinglePage="false"
                align="center" for="dataList" maxPages="10" 
                 pageIndexVar="currentPage" pagesVar="totalPages" reRender="pageNum,dataList" ajaxSingle="false">
                <f:facet name="first"><h:outputText value="First" /></f:facet>
                <f:facet name="last"><h:outputText value="Last" /></f:facet>
            </rich:datascroller>
            <h:inputHidden id="pageNum" value="#{currentPage}"></h:inputHidden> 
            <h:inputHidden id="numOfRows" value="10"></h:inputHidden>

问题是，如果用户选择了一条记录（比如第三页），然后转到第一页。现在，在这种情况下，当我尝试在Java Script中迭代表以了解他是否选择了任何记录时，它总是允许我迭代到我所在的当前页面，因此我无法在按下提交按钮时向用户发出正确的警告消息，让其先选择记录。我只想知道用户已经根据可用页面中任何页面上的记录选中了复选框，而不管当前在哪个页面上打开。有什么想法吗？

Answer 1

通过Richfaces Javascript API进行尝试。

对于页面中的每个组件，都有一个表示Javascript对象，命名为next：Richfaces_componentId（小"f"表示面）。使用它并实时了解它，转到ScrollableDatatable实时演示，打开chrome浏览器控制台，执行以下操作：

 Richfaces_ScrollableGrid_j_id353_carList.selectionManager.selection.ranges

这将打印出一个空的javascript数组。尝试选择一些行，然后再次运行该行，您将得到一个包含所选行索引的数组。

所以把它放在一个函数中：

<script>
    function tableHasSelection() {
         return Richfaces_ScrollableGrid_j_id353_carList.selectionManager.selection.ranges.length != 0;
    }
</script>

现在，您可以通过提交按钮的onclick调用此函数，如果没有选择，则通过return false调用此函数以阻止提交。当然，您可以将Richfaces_ScrollableGrid_j_id353_carList替换为组件的javascript表示对象。希望这会有所帮助。

[更新]

根据我们在评论中的讨论，这里有一个可能会有所帮助的更新。你的数据表是这样的：

<rich:extendedDataTable value="..." var="element" id="table" selectionMode="..." selection="...">
     <rich:column>
         <h:selectBooleanCheckbox value="..." onclick="toggleSelection(this, #{element.id});" />
     </rich:column>
</rich:extendedDataTable>
<h:commandButton value="Submit" action="#{...}" onclick="return tableHasSelection();" />

您的脚本将具有以下功能：

<script>
    var selectedElements = [];
    function toggleSelection(checkbox, id) {
         if ($(checkbox).is(':checked')) {
             //add selected row if checkbox is checked
             selectedElements.push(id);
         } else {
             //or find it in the array and remove it
             var index = selectedElements.indexOf(id);
             if (index > -1) {
                 array.splice(index, 1);
             }
         }
    }
    function tableHasSelection() {
         return selectedElements.length != 0;
    }
</script>

Answer 2

（<rich:extendedDataTable>有可选择的行，您可能想看看）

你可以做的一件事是在用户点击时提交选择。例如

<h:selectBooleanCheckbox onclick="saveSelection(#{rowId})">
…
<a4j:jsFunction name="saveSelection">
    <a4j:param name="id" assignTo="#{bean.selectedId}">
</a4j:jsFunction>

但是，如果用户只选择一行，那么简单地说，如果所选行不在当前页面上，则用户没有选择任何内容，我不认为这是错误的方法。