Question

我正在使用Mojarra JSF 2.1.28和Primefaces 3.5。我想为p:pickList组件实现客户端传输输入，其中用户键入内容并通过可用元素列表中的标签搜索值，然后将其传输到目标列表。这就是我的代码的样子：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
    <script>
        //Just for testing, transfer the second element 
        //to the target list when document is ready. Works well
        $(document).ready(function(string) {
            transfer("name2");
        });
        //Transfer function. It takes each list item from the source list and checks if it matches with the given pattern
        //If it does, moves it to the target list
        function transfer(string) {
            $(".ui-picklist-source li").each(function() {
                var re = new RegExp(string);
                if ($(this).attr('data-item-label').match(re)) {
                    $(".ui-picklist-target").append($(this));
                }
            });
        };
    </script>
    <h:form>
        <p:inputText
            onkeypress="if (event.keyCode == 13) { transfer(this.value); return false;}" />
    </h:form>
    <h:form id="form">
        <p:pickList value="#{bean.elements}" var="element"
            itemLabel="#{element.name}" itemValue="#{element.name}" id="picklist" />
        <p:commandButton value="Send" action="#{bean.send}" />
    </h:form>
</h:body>
</html>

@ManagedBean
@ViewScoped
public class Bean implements Serializable{

    public class Element {

        private String name;

        public Element(String n) {
            name = n;
        }

        public String getName() {
            return name;
        }

        @Override
        public String toString() {
            return "Element [name=" + name + "]";
        }

    }

    private DualListModel<Element> elements;

    public Bean() {
        List<Element> source = new ArrayList<Bean.Element>();
        List<Element> target = new ArrayList<Bean.Element>();
        source.add(new Element("name1"));
        source.add(new Element("name2"));
        elements = new DualListModel<Bean.Element>(source, target);
    }

    public DualListModel<Element> getElements() {
        return elements;
    }

    public void send() {
        System.out.println("Available: " + elements.getSource() + " assigned: "
                + elements.getTarget());
    }

    public void setElements(DualListModel<Element> elements) {
        this.elements = elements;
    }

}

嗯，在此测试用例中，有两个项目可供使用，name1和name2。加载页面时，我使用$(document).ready()来调用transfer(string)函数，以便将name2移动到目标列表。页面得到正确加载，如果我们点击Send按钮，我们会正确分配第二个元素。

使用p:inputText组件调用函数时出现问题。在这里，我们监听Enter键事件以发送当前给定值并执行传输。在客户端，它工作得很公平，它的行为符合预期。但是，点击Send时，模型在服务器端无法正确更新。

我推断这是由JSF保存的视图状态引起的，但是如何处理呢？有没有办法实现它，还是我必须坚持Ajax请求？

Answer 1

＆＃34;对＆＃34;实现这一目标的方法是使用Primefaces的Javascript API

PrimeFaces.widget.PickList

假设您的widgetVar为pickListWV，请按以下步骤操作：

function transfer(string) {
        PF('pickListWV').sourceList.children().each(function() {
            var re = new RegExp(string, "i");
            if ($(this).attr('data-item-label').match(re)) {
                PF('pickListWV').selectItem($(this));// select the item
                PF('pickListWV').add();// add it to the target
            }
        });
    }

修改你也可以把它变得更有趣，比如真人过滤..

<p:inputText onkeypress="if (event.keyCode == 13) { transfer(this.value); return false;} else{PF('pickListWV').filter(this.value, PF('pickListWV').sourceList)}" />

编辑2：

我可以看到你有一个区分大小写的匹配，所以你必须声明你的RegExp不区分大小写

var re = new RegExp(string, "i");

以下是github上的一个小工作示例，以及按要求工作的demo：）

希望这有帮助。

为p：pickList构建客户端传输方法

1 个答案: