如何计算分页表 PrimeFaces 中选中的复选框

Question

我想计算整个表中选中复选框的总数。 目前，当我切换到不同的表格页面时，它不会考虑上一个表格页面的选中复选框。 我的桌子看起来像这样：

<div id="D625_S002_E042" class="ui-datatable ui-widget hpsapf-datatable ui-grid-col-12 ui-datatable-reflow">
   <div class="ui-datatable-tablewrapper">
      <table role="grid" summary="abcd" aria-describedby="D625_S002_E042_summary">
         <tbody id="D625_S002_E042_data" class="ui-datatable-data ui-widget-content" tabindex="-1">
            <tr data-ri="0" aria-selected="false" class="ui-widget-content ui-datatable-even ui-datatable-selectable">
               <td class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
            </tr>
            <tr data-ri="1" data-rk="99fcc576-c1ab-4f98-9613-84f9ce5efc77" role="row" aria-selected="false" class="ui-widget-content ui-datatable-odd ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:1:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Eintrager</div>
               </td>
            </tr>
            <tr data-ri="2" data-rk="ebc4121d-9d11-49c0-a544-af15a0f9706c" role="row" aria-selected="false" class="ui-widget-content ui-datatable-even ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:2:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Fachlicher Admin</div>
               </td>
            </tr>
            <tr data-ri="3" data-rk="b1b4993d-d4ce-4bf9-95f3-5461f58b3276" role="row" aria-selected="false" class="ui-widget-content ui-datatable-odd ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:3:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Justizverwaltung</div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>

我尝试使用此获取选中复选框的长度

$("#D625_S002_E002").find("td.ui-selection-column div.ui-chkbox-box.ui-state-active").length

但只有一个表格页的长度而不是整个表格的长度。

Answer 1

我会在您的p:dataTable上添加rowSelectCheckbox和rowUnselectCheckbox Ajax 事件侦听器并更新按钮。 在按钮中动态检查是否应根据选择大小启用它。 就像是：

<p:dataTable selection="#{bean.selectedItems}" ...>
    ...
    <p:ajax event="rowSelectCheckbox" update="myButton"/>
    <p:ajax event="rowUnselectCheckbox" update="myButton"/>
</p:dataTable>
<p:commandButton id="myButton" disabled="#{bean.selectedItems.size() gte 2}" .../>

也可以看看：

• 了解 PrimeFaces 进程/更新和 JSF f:ajax 执行/呈现属性
• https://primefaces.github.io/primefaces/12_0_0/#/components/datatable
• https://primefaces.github.io/primefaces/12_0_0/#/components/commandbutton