Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

jsf 2 - How to iterate a HashMap with primefaces selectable datatable

I have tried different solutions but none is working in my case. I want all the rows in this datatable to be selectable. The problem seems to be the <ui:repeatthat is probably overriding the objects...

My bean:

@ManagedBean
@ViewScoped
public class Chat {

    private static Map<String, List<ChatObject>> chat = new LinkedHashMap<String, List<ChatObject>>();
    private ChatObject selectedChatObject;

    public void onChatRowSelection(){
        if(getSelectedChatObject() != null){
            System.out.println("test");
        }
    }

    public List<Map.Entry<String, List<ChatObject>>> getChatList() {
        Set<Map.Entry<String, List<ChatObject>>> productSet = chat.entrySet();
        return new ArrayList<Map.Entry<String, List<ChatObject>>>(productSet);
    }

    @PostConstruct
    public void postConstructMethod() { 

        if(chat.isEmpty()){

            List<ChatObject> objectsList1 = new ArrayList<ChatObject>();
            objectsList1.add(new ChatObject("3369818", "1", "1"));
            objectsList1.add(new ChatObject("3369819", "2", "2"));
            objectsList1.add(new ChatObject("3369820", "3", "3"));

            chat.put("Chat Topic 1", objectsList1);

            List<ChatObject> objectsList2 = new ArrayList<ChatObject>();        
            objectsList2.add(new ChatObject("3369813", "4", "4"));
            objectsList2.add(new ChatObject("3369815", "5", "5"));
            chat.put("Chat Topic 2", objectsList2);
        }

    }

    public ChatObject getSelectedChatObject() {
        return selectedChatObject;
    }

    public void setSelectedChatObject(ChatObject selectedChatObject) {
        this.selectedChatObject = selectedChatObject;
    }
}

My JSF:

<!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:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:form id="form" enctype="multipart/form-data" acceptcharset="ISO-8859-1">

<ui:repeat value="#{chat.chatList}" var="chatEntry">

    <h2><h:outputText value="#{chatEntry.key}" /></h2>
    <br />

    <p:dataTable 
        value="#{chatEntry.value}" 
        var="chatEntryVar"
        widgetVar="chatTableWV" 
        styleClass="geralBorderless"
        style="cursor:pointer" 
        rowKey="#{chatEntryVar.id}" 
        rendered="true"
        selectionMode="single" 
        selection="#{chat.selectedChatObject}"
        paginatorAlwaysVisible="false">

        <p:ajax event="rowSelect"
            listener="#{chat.onChatRowSelection}" 
            oncomplete="chatTableWV.unselectAllRows();">

        </p:ajax>

        <p:column>
            <h:outputText value="#{chatEntryVar.name}" />
        </p:column>
    </p:dataTable>

</ui:repeat>
</h:form>
</html>

All the 5 ChatObject in my Map are successfully shown in my page. But onChatRowSelection method will only print "test" when I click in the rows related to the second list I added to my map: objectList2. When I click in the lines from the first list I added objectList1, when the system enters in the onChatRowSelection method, selectedChatObject will be null. How can I fix this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Your problem is here:

<ui:repeat ...>
    <p:dataTable ... widgetVar="chatTableWV">
       <p:ajax ... oncomplete="chatTableWV.unselectAllRows();">

Multiple data tables are been assigned exactly the same widgetVar name in JavaScript scope. In effects, the following JavaScript code is generated:

window['chatTableWV'] = new Widget(tableElement1);
window['chatTableWV'] = new Widget(tableElement2);
window['chatTableWV'] = new Widget(tableElement3);
// ...

Basically, every iteration overrides the last object assigned to the declared widgetVar name until it ends up referencing the last one. All widgets expect of the last one are basically unavailable, causing them to not be functional anymore as to row selection.

Fix it accordingly by giving them each an unique widgetVar. You could use the iteration index of <ui:repeat> for this.

<ui:repeat ... varStatus="loop">
    <p:dataTable ... widgetVar="chatTableWV_#{loop.index}">
       <p:ajax ... oncomplete="chatTableWV_#{loop.index}.unselectAllRows();">

This way the following JavaScript code is generated:

window['chatTableWV_0'] = new Widget(tableElement1);
window['chatTableWV_1'] = new Widget(tableElement2);
window['chatTableWV_2'] = new Widget(tableElement3);
// ...

And finally PrimeFaces widget manager can find them all.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...