Question

我想知道如何更改primefaces向导的默认行为

<p:wizard />

我的意思是在用户点击下一个按钮后，突出显示的步骤（标签）只是当前步骤。不是他面前的步骤。在我对primefaces wizzard的实现中，我将获得将绘制当前步骤之前的步骤的行为。为此，我只需要在当前选项卡之前的选项卡中添加“ui-state-highlight”类。当然，当用户点击后退按钮

时，机制应该有效

我尝试使用'onnext'和'onback'客户端事件，但没有结果。在呈现下一步之前执行此事件。实际上，函数onnext和onback的改变被primefaces scirpt覆盖。

有人可以帮忙解决这个问题吗？我会感谢你的帮助

Answer 1

我找到了解决方案。

我们需要覆盖 PrimeFaces.widget.Wizard.prototype

的 loadStep 功能

我改变了原始的一段代码

这

//update step status
if($this.cfg.showStepStatus) {
   $this.stepControls.removeClass('ui-state-highlight');
   $($this.stepControls.get(currentStepIndex)).addClass('ui-state-highlight');
}

到

//update step status
if ($this.cfg.showStepStatus) {
   var stepsCon = $this.stepControls;
   stepsCon.removeClass('ui-state-highlight');
   stepsCon.each(function (index) {
       if (currentStepIndex >= index) {
           $(this).addClass("ui-state-highlight");
       }
   });
}

它开始按预期工作。

所有javascript覆盖看起来像

PrimeFaces.widget.Wizard.prototype.loadStep = function (stepToGo, isBack) {
var $this = this,
        options = {
            source: this.id,
            process: this.id,
            update: this.id,
            formId: this.cfg.formId,
            params: [
                {name: this.id + '_wizardRequest', value: true},
                {name: this.id + '_stepToGo', value: stepToGo}
            ],
            onsuccess: function (responseXML, status, xhr) {
                PrimeFaces.ajax.Response.handle(responseXML, status, xhr, {
                    widget: $this,
                    handle: function (content) {
                        this.content.html(content);
                    }
                });

                return true;
            },
            oncomplete: function (xhr, status, args) {
                $this.currentStep = args.currentStep;

                if (!args.validationFailed) {
                    var currentStepIndex = $this.getStepIndex($this.currentStep);

                    if ($this.cfg.showNavBar) {
                        if (currentStepIndex === $this.cfg.steps.length - 1) {
                            $this.hideNextNav();
                            $this.showBackNav();
                        } else if (currentStepIndex === 0) {
                            $this.hideBackNav();
                            $this.showNextNav();
                        } else {
                            $this.showBackNav();
                            $this.showNextNav();
                        }
                    }

                    //update step status
                    if ($this.cfg.showStepStatus) {
                        var stepsCon = $this.stepControls;
                        stepsCon.removeClass('ui-state-highlight');
                        stepsCon.each(function (index) {
                            if (currentStepIndex >= index) {
                                $(this).addClass("ui-state-highlight");
                            }
                        });
                    }
                }
            }
        };

        if (isBack) {
           options.params.push({name: this.id + '_backRequest', value: true});
        }

        PrimeFaces.ajax.Request.handle(options);
};

如何在primefaces向导上设置state-highlight

1 个答案: