为p:pickList构建客户端传输方法
Building a client side transfer method for p:pickList
我正在使用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上的一个小的工作示例,以及一个工作演示:)
相关文章:
- CORS——它是客户端的东西,服务器端的东西,还是传输级别的东西
- socket.io:断开连接事件 - “传输关闭”、“客户端命名空间断开连接”、“传输错误”和“强制关闭”
- 如何在node.js中将数组从服务器端传输到客户端
- 从客户端应用程序使用门守进行身份验证,而无需传输机密
- Netty-socketio:客户端未完成升级 - 关闭传输
- 在 Flask 中将客户端数据传输到服务器端
- 如何在 2 个客户端之间直接连接流式传输视频
- 在客户端使用 CometD 获取传输和 EOF 异常
- 仅从客户端检测下载开始/文件传输的开始
- 通过服务器将视频从一个客户端流式传输到另一个客户端
- 将JavaScript和CSS作为二进制文件从服务器传输到客户端的可行性
- Web身份验证-如何安全地将用户名/密码从客户端传输到服务器
- 将部分视频流式传输到客户端
- 如何将数据从客户端表单输入传输到服务器端Nodejs脚本
- javascript客户端的节俭传输
- 将数据从JavaScript客户端传输到c#服务器
- 文件从服务器传输到客户端Node.js
- 将javascript变量从客户端传输到服务器
- Socket IO|如何在服务器端获取客户端传输类型
- 为p:pickList构建客户端传输方法