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



我想计算整个表格中选中的复选框的总数。目前,当我切换到不同的表页,它不考虑到前表页的复选框。我的表是这样的:

<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

只能得到一个表页的长度,而不能得到整个表的长度。

我会在p:dataTable上添加rowSelectCheckboxrowUnselectCheckboxAjax事件侦听器并更新按钮。在按钮中,根据选择大小动态检查是否应该启用它。比如:

<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 process/update和JSF f:ajax execute/render属性
  • https://primefaces.github.io/primefaces/12_0_0//组件/datatable
  • https://primefaces.github.io/primefaces/12_0_0//组件/命令按钮

最新更新