Jsf 基于Primefaces表行选择动态启用/禁用commandButton
是否有一种方法可以在表格行选择的基础上动态启用/禁用commandButton 在下一个示例中,我希望仅当选择了任何行时才启用“deleteBtn”:Jsf 基于Primefaces表行选择动态启用/禁用commandButton,jsf,jsf-2,primefaces,Jsf,Jsf 2,Primefaces,是否有一种方法可以在表格行选择的基础上动态启用/禁用commandButton 在下一个示例中,我希望仅当选择了任何行时才启用“deleteBtn”: <p:dataTable var="department" value="#{departmentCtrl.departmentTable}" selection="#{departmentCtrl.departmentList}"> <p:column selectionMode="multiple"
<p:dataTable
var="department" value="#{departmentCtrl.departmentTable}"
selection="#{departmentCtrl.departmentList}">
<p:column selectionMode="multiple" styleClass="w18" />
<p:column headerText="#{msgs.id}" sortBy="#{department.id}">
<h:outputText value="#{department.id}" />
</p:column>
<p:column headerText="#{msgs.name}" sortBy="#{department.name}">
<h:outputText value="#{department.name}" />
</p:column>
</p:dataTable>
<p:commandButton id="deleteBtn" value="#{msgs.delete}" disabled="???" />
谢谢
部门列表
为空时,应禁用它
<p:dataTable var="department"
value="#{departmentCtrl.departmentTable}"
selection="#{departmentCtrl.departmentList}">
<p:ajax event="rowSelect" update="deleteBtn"/>
<p:ajax event="rowUnselect" update="deleteBtn"/>
<p:column selectionMode="multiple" styleClass="w18" />
<p:column headerText="#{msgs.id}" sortBy="#{department.id}">
<h:outputText value="#{department.id}" />
</p:column>
<p:column headerText="#{msgs.name}" sortBy="#{department.name}">
<h:outputText value="#{department.name}" />
</p:column>
</p:dataTable>
<p:commandButton id="deleteBtn" value="#{msgs.delete}"
disabled="#{fn:length(departmentCtrl.departmentList) == 0}" />
<p:ajax event="rowSelectCheckbox" listener="#{departmentCtrl.departmentSelected}"
update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
<p:ajax event="rowUnselectCheckbox" listener="#{departmentCtrl.departmentUnselected}"
update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
参加聚会可能有点晚了,但下面是我根据复选框选择表中的每种可能的点击类型启用和禁用复选框的步骤。在我的情况下,我只需要告诉打印和删除按钮禁用时,没有选择
<p:ajax event="rowSelect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="toggleSelect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowSelectCheckbox" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselectCheckbox" update=":form:printBtn,:form:deleteBtn" />
有可能你并不需要所有的五项活动,但我确实需要<代码>行选择和
行取消选择
处理不在复选框中的鼠标单击toggleSelect
处理选择全部/无的复选框(列标题中的复选框),而rowSelectCheckbox
和rowSelectCheckbox
处理行中的复选框。我来不及响应。但它可能会帮助某些人。当用户没有选择任何复选框时,我也需要禁用按钮
我使用的是Primefaces 5.1
这是我提出的解决方案
我正在使用widgetVar
检查所选行数并启用/禁用命令按钮
从Primefaces文档中,我们为数据表提供了客户端API:
我们还有用于命令按钮的客户端API
现在我们将回到实现部分
<p:dataTable var="line" varStatus="loop"
value="#{myexpense.lazyModel}" paginator="true"
rows="#{myexpense.rows}"
rendered="#{myexpense.userIdSearch eq null}"
rowIndexVar="row"
emptyMessage="#{tk.expense_table_empty}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
widgetVar="expenseEntryTable"
rowsPerPageTemplate="#{myexpense.rowsPerPageTemplate}"
id="lazyDataTable" lazy="true"
selection="#{myexpense.selectedExpenseEntryList}"
rowKey="#{line.oid}">
<p:ajax event="toggleSelect" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:ajax event="rowSelectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:ajax event="rowUnselectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:column selectionMode="multiple" width="3%" styleClass="centerAlignColumn selectAll" id="selectAll"/>
.... more column
<f:facet name="footer">
<p:commandButton process="lazyDataTable" value="#{tk.expense_update_selected}" partialSubmit="true" ajax="true" widgetVar="updateBtn" disabled="#{myexpense.disableUpdateButton}"
actionListener="#{myexpense.updateSelected}"
update="lazyDataTable @form" rendered="#{myexpense.form.myOnly}" />
</f:facet>
</p:dataTable>
现在您可以编写java脚本了
function disableOrEnableCommandButton() {
if (PrimeFaces.widgets['expenseEntryTable']) {
if (PF('expenseEntryTable').getSelectedRowsCount() > 0) {
PF('updateBtn').enable();
} else {
PF('updateBtn').disable();
}
}
}
希望它能帮助任何人 使用
怎么样?它不起作用。我希望执行与基于复选框的选择示例()相同的操作;但是使用文档(Primefaces用户指南v3.3第141页)中所述的rowSelectCheckbox和rowUnselectcheckbox事件时,为什么不使用类似的谢谢,但很抱歉它不起作用。我希望执行与基于复选框的选择示例()相同的操作;但是使用文档(Primefaces用户指南v3.3第141页)中所述的rowSelectCheckbox和rowUnselectcheckbox事件时,您没有发布支持bean代码。您的解决方案没有关于禁用按钮属性的任何内容。您只更改了事件名称。
function disableOrEnableCommandButton() {
if (PrimeFaces.widgets['expenseEntryTable']) {
if (PF('expenseEntryTable').getSelectedRowsCount() > 0) {
PF('updateBtn').enable();
} else {
PF('updateBtn').disable();
}
}
}