0

我确信有不止一种方法可以做到这一点，但是当另一个 JSF/PrimeFaces 组件发生更改时，有什么好的方法可以更新？

我有一个滑块，可以正确更新输入字段的值（包括支持 bean 中的值）。但是该值是一个数字，我想将其显示为文本值，例如，如果它是 1，我想显示“简单”，如果它是 4，则显示“困难”。

我通过隐藏存储数值的输入字段来部分工作。然后我添加了另一个“可见”的 outputLabel，它链接到我的支持 bean 中的一个 getter，它将数字转换为文本值。

但是我不确定如何说“当隐藏字段的值发生变化时，刷新 outputLabel 中显示的值”。

当然这与 valueChangeListeners 或“更新”属性有关，但很难将它们放在一起。

任何人都可以模糊地指出我正确的方向吗？尽管我已经尝试过，但我什至不太确定谷歌是什么。

谢谢

4

2 回答 2

3

我认为使用基于 PrimeFaces 的解决方案比使用基于 JavaScript 的解决方案要容易得多。所以，就我而言，我使用了它，它对我有用。

滑块豆：

package ma.klagrida;

import javax.faces.bean.ManagedBean;


import org.primefaces.event.SlideEndEvent;

@ManagedBean
public class SliderBean {

    private int number;

    private String category = "Start";

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }


    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public void onSlideEnd(SlideEndEvent event) {
        int value = event.getValue();
        if(value > 0 && value <= 50) {
            category = "Easy";
         } else if(value > 50 && value <= 100) {
            category = "Difficult";
         } else {
                category = "Start";
         } 
    }

}

索引.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head><title>PrimeFaces Slider</title>
</h:head>
<h:body>

<h:form> 
    <h:inputText id="number" value="#{sliderBean.number}" />
    <p:slider for="number">
        <p:ajax event="slideEnd" listener="#{sliderBean.onSlideEnd}" update="category" />
    </p:slider>
    <h:inputText id="category" value="#{sliderBean.category}" />
</h:form>

</h:body></html>
于 2015-01-08T14:35:08.703 回答
2

使用 Javascriptonchange事件并使用所需的标签更新标签。

或者..您可以使用 primefacesonSlideEnd事件。

valueChangeListeners 将一直到 backing bean，然后返回到客户端

基于此

我有一个滑块，可以正确更新输入字段的值（包括支持 bean 中的值）。但是该值是一个数字，我想将其显示为文本值，例如，如果它是 1，我想显示“简单”，如果它是 4，则显示“困难”。

您只需要一个 JavaScript onchange 事件并更新标签。

这是一个例子（我没有测试或检查语法，但它应该给你一个想法）用户第一次进入你可以从服务器或客户端初始化标签，就像你设置默认值一样滑块。

  <script>
      var labelElement = document.getElementById('output');
      var sliderElement = document.getElementById('txt2');

      function updateSliderLabel(){
         if(sliderElement.value > 75){
              labelElement.value = "Large";
         } else if(sliderElement.value > 50){
              labelElement.value = "Avg";
         } else {
              labelElement.value = "Small";
         }

      }
  </script>

  <h:form id="form">
    <h:panelGrid columns="1" style="margin-bottom:10px">  
        <h:panelGroup>  
            <h:outputText value="Set ratio to "/>  
            <h:outputText id="output" value="#{sliderBean.number2}"/>  
        </h:panelGroup>   

        <h:inputHidden id="txt2" value="#{sliderBean.number2}" />  
        <p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" />  
    </h:panelGrid>
  </h:form>
于 2012-05-10T21:27:16.603 回答