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（小脸＆＃39; f＆＃39;面孔）。使用它并实时了解它，转到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表示对象。希望这会有所帮助。

[UPDATE]

根据我们在评论中的讨论，这是一个可能有用的更新。您的数据表将如下所示：

<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>有可选择的行，你可能想看一下）

您可以做的一件事是在用户点击它时提交选择。 E.g。

<h:selectBooleanCheckbox onclick="saveSelection(#{rowId})">

…
<a4j:jsFunction name="saveSelection">
    <a4j:param name="id" assignTo="#{bean.selectedId}">
</a4j:jsFunction>

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

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

2 个答案: