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

Building a client side transfer method for p:pickList

本文关键字：客户端 传输 方法 构建 pickList      更新时间：2023-09-26

我正在使用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请求?

实现这一点的"正确"方法是使用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上的一个小的工作示例，以及一个工作演示:)

相关文章：