如何在具有多页丰富的丰富数据表中获取选定记录计数：datascroller

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>

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

Answer 1

通过Richfaces Javascript API尝试。

对于页面中的每个组件，都有一个代表 Javascript 对象，命名为 next： Richfaces_componentId（小“f”代表面孔）。 使用它并实时了解它，转到ScrollableDatatable Live Demo，打开您的 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 表示对象。 希望这会有所帮助。

[更新]

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

<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>

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