Primefaces 向导自定义后退/下一个按钮标签答案

【问题标题】：Primefaces Wizard custom back/next button labelPrimefaces 向导自定义后退/下一个按钮标签
【发布时间】：2020-06-01 06:35:10
【问题描述】：

我对 primefaces 向导的后退/下一个按钮标签有疑问。可以像以下示例一样自定义导航按钮标签：

第 0 步的按钮标签 -> 显示按钮标签文本“下一个 1”
第 1 步的按钮标签 -> 显示按钮标签文本“Next 2”和按钮后标签“Back 1”
第 2 步的按钮标签 -> 显示按钮标签文本“Next 3”和按钮返回标签“Back 2”
...

最好的问候，多路复用器

【问题讨论】：

标签： button primefaces label wizard

【解决方案1】：

是的，组件有两个属性 nextLabel 和 backLabel。

https://primefaces.github.io/primefaces/7_0/#/components/wizard?id=attributes

nextLabel   null    String  Label of next navigation button.
backLabel   null    String  Label of back navigation button.

那就做吧..

<p:wizard widgetVar="wgtWizard" nextLabel="Next #{component.step}" backLabel="Back #{component.step}">

但是由于 #component.step 不会在每一步都进行评估，因此您必须使用 JQuery JS 代码来执行此操作，如下所示：

var wizard = PF('wgtWizard');
var stepIndex = wizard.getStepIndex(wizard.currentStep);
wizard.nextNav.find('.ui-button-text').text('Next ' + stepIndex);
wizard.backNav.find('.ui-button-text').text('Back ' + (stepIndex-1));

只需在向导 'onback' 和 'onnext' JS 方法上执行该 JS 代码。

【讨论】：

我认为当您转到下一个或上一个标签时，这些标签不会自动更新
你可能是对的。那么这将是一个增强请求，否则用户将不得不使用一些聪明的 Jquery 代码来更新标签。
另外，您可能想要使用隐式 EL 对象 component。见stackoverflow.com/questions/29035760/…
谢谢我从来不知道#{component}！我刚刚更新了我的答案。
另外你是对的，它只在组件首次呈现时才被评估，所以我用 Jquery 解决方案更新了我的答案。