JSF AJAX CommandButton和Table

时间:2014-05-31 08:36:22

标签: ajax jsf commandbutton

我的菜单有问题。这将获取用户数据库表中的用户。

但是当我尝试在搜索栏中键入一个名称并单击SearchButton时,什么也没发生。我已经想通了,它将刷新整个页面的第四个,然后执行按钮操作并将整个页面刷新为五分之一。

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            template="../../templates/default.xhtml">
<ui:define name="title">Any great stuff</ui:define>
<ui:define name="content">
    <div class="row container">
        <div class="small-12 columns">
            <h1>Any great stuff</h1>
            <div class="row">
                <div class="small-12 large-12 columns">
                    <section class="class">

                        <div class="row">
                            <h:form>
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
                                                <f:selectItem id="actionItem0" itemValue="0" itemLabel="Choose"/>
                                                <f:selectItem id="actionItem1" itemValue="1" itemLabel="Delete"/>
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandButton value="Übernehmen" class="button postfix" action="#{adminController.actionUser}" />
                                        </div>
                                    </div>
                                </div>
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:selectOneMenu  id="roleDropbown" value="#{adminController.role}">
                                                <f:selectItem id="roleItem0" itemValue="0" itemLabel="Choose item"/>
                                                <f:selectItem id="roleItem1" itemValue="1" itemLabel="Item2"/>
                                                <f:selectItem id="roleItem2" itemValue="2" itemLabel="Item3"/>
                                                <f:selectItem id="roleItem3" itemValue="3" itemLabel="Item4"/>
                                                <f:selectItem id="roleItem4" itemValue="4" itemLabel="Item5"/>
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandButton value="Wechseln" class="button postfix" action="#{adminController.changeRole}" />
                                        </div>
                                    </div>
                                </div>
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <input type="text" id="usersearch" value="#{adminController.searchvalue}" placeholder="Suchen..."/>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
                                                <f:ajax execute="@form" render="@none" />
                                            </h:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </h:form>
                        </div>

                        <table>
                            <thead>
                            <tr>
                                <th width="5"><input onClick="selectAll(this)" type="checkbox"/></th>
                                <th></th>
                                <th>Number</th>
                                <th width="250">Name</th>
                                <th width="250">E-Mail</th>
                                <th width="150">Role</th>
                            </tr>
                            </thead>
                            <tbody>
                            <ui:repeat value="#{adminController.userList}" var="user">
                                <tr>

                                        <td><input type="checkbox" name="user[]" value=""/></td>


                                    <td><img src="#{user.picture}" alt="Picture"/></td>
                                    <td>#{user.registerNumber}</td>
                                    <td>#{user.name}</td>
                                    <td><a href="mailto:#{user.email}">#{user.email}</a></td>
                                    <td>#{user.role}</td>
                                </tr>
                            </ui:repeat>
                            </tbody>
                        </table>

                    </section>
                </div>
            </div>
        </div>
    </div>

    <script src="../../js/script.js"></script>
</ui:define>
</ui:composition>

我的adminController.java使用

public List<User> getUserList()

填写表值。这很好用,当我给searchvalue一个静态值时,它也会工作。 我在上面的xhtml中输入了什么? (问题是,我对x / html及其标签一无所知,所以请注意它。) 有人告诉我,我只能使用Panelgroup,但我不知道在哪里。 (我已经重命名了itemvalues,这是你必须要关心的事情)

2 个答案:

答案 0 :(得分:1)

您的searchButton包含&lt; f:ajax /&gt;标签。所以当你点击按钮时它不会提交页面。只是发送ajax请求。但是渲染= @无。这意味着没有更新表格。如果你改变这样渲染= @ form它应该工作。

<div class="small-4 columns">
    <div class="row collapse">
        <div class="small-8 columns">
            <h:inputText id="usersearch" value="#{adminController.searchvalue}" />
        </div>
        <div class="small-4 columns">
            <h:commandButton id="usersearchButton" value="Suchen" styleClass="button postfix" action="#{adminController.searchUser}">
                <f:ajax execute="@form" render="@form" />
            </h:commandButton>
        </div>
    </div>
</div>

更新:

使用&lt; h:dataTable /&gt;而不是&lt; ui:repeat /&gt;

 <h:dataTable id="myDataTable" value="#{adminController.userList}" var="user">
        <h:column>
            <img src="#{user.picture}" alt="Picture"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Number"/>
            </f:facet>
            <h:outputText value="#{user.registerNumber}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Name"/>
            </f:facet>
            <h:outputText value="#{user.name}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Email"/>
            </f:facet>
            <h:outputLink value="mailto:#{user.email}">
                <h:outputText value="#{user.email}"/>
            </h:outputLink>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Role"/>
            </f:facet>
            <h:outputText value="#{user.role}"/>
        </h:column>
    </h:dataTable>

现在您只能更新您的表格。

<f:ajax execute="@form" render="myDataTable" />

答案 1 :(得分:0)

抱歉,小更新:DataTable的重新加载工作正常。 这是我目前的xhtml:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
            template="../../templates/default.xhtml">
<ui:define name="title">Benutzerverwaltung</ui:define>
<ui:define name="content"
<ui:include src="../../partials/navigationbar.xhtml"/>
    <f:metadata>
        <f:event listener="#{adminController.openPage}" type="preRenderView" />
    </f:metadata>

    <div class="row container">
        <div class="small-12 columns">
            <h1><h:outputText value="Benutzerverwaltung"/></h1>
            <div class="row">
                <div class="small-12 large-12 columns">
                    <section class="class">

                        <h:form>
                            <div class="row">
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:commandButton id="refreshButton" value="Userliste neu laden" class="button postfix" action="#{adminController.reloadUsers}">
                                                <f:ajax execute="@form" render="myDataTable"/>
                                            </h:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
                                                <f:selectItem id="actionItem0" itemValue="0" itemLabel="Aktion wählen..."/>
                                                <f:selectItem id="actionItem1" itemValue="1" itemLabel="Löschen"/>
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandLink value="Übernehmen" class="button postfix" actionListener="#{adminController.actionUser}">
                                                <f:ajax execute="@form" render="myDataTable" />
                                            </h:commandLink>
                                        </div>
                                    </div>
                                </div>
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:selectOneMenu  id="roleDropbown" value="#{adminController.role}">
                                                <f:selectItem id="roleItem0" itemValue="0" itemLabel="Rolle wählen..."/>
                                                <f:selectItem id="roleItem1" itemValue="1" itemLabel="Student"/>
                                                <f:selectItem id="roleItem2" itemValue="2" itemLabel="Tutor"/>
                                                <f:selectItem id="roleItem3" itemValue="3" itemLabel="Dozent"/>
                                                <f:selectItem id="roleItem4" itemValue="4" itemLabel="Admin"/>
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandButton value="Wechseln" class="button postfix" actionListener="#{adminController.changeRole}">
                                                <f:ajax execute="@form" render="myDataTable" />
                                            </h:commandButton>
                                        </div>
                                    </div>
                                </div>
                                <div class="small-4 columns">
                                    <div class="row collapse">
                                        <div class="small-8 columns">
                                            <h:inputText id="usersearch" value="#{adminController.searchvalue}" p:placeholder="Suchen..."/>
                                        </div>
                                        <div class="small-4 columns">
                                            <h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
                                                <f:ajax execute="@form" render="myDataTable"/>
                                            </h:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h:dataTable id="myDataTable" value="#{adminController.userList}" var="user" binding="#{adminController.dataTable}">
                                <h:column>
                                        <f:facet name="header"><!-- CheckBox -->
                                            <h:selectBooleanCheckbox onclick="selectAll(this)" />
                                        </f:facet>
                                    <h:selectBooleanCheckbox value="#{user.select}"/>
                                </h:column>
                                <h:column>
                                    <img value-id="#{user.id}" src="#{user.picture}" alt="Picture"/>

                                </h:column>
                                <h:column>
                                    <f:facet name="header"><!-- Matrikelnummer -->
                                        <h:outputText value="Matrikelnummer"/>
                                    </f:facet>
                                    <h:outputText value="#{user.registerNumber}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header"><!-- Name -->
                                        <h:outputText value="Name"/>
                                    </f:facet>
                                    <h:outputText value="#{user.name}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header"><!-- Email -->
                                        <h:outputText value="Email"/>
                                    </f:facet>
                                    <h:outputLink value="mailto:#{user.email}">
                                        <h:outputText value="#{user.email}"/>
                                    </h:outputLink>
                                </h:column>
                                <h:column>
                                    <f:facet name="header"><!-- Rolle -->
                                        <h:outputText value="Rolle"/>
                                    </f:facet>
                                    <h:outputText value="#{user.role}"/>
                                </h:column>
                            </h:dataTable>

                        </h:form>
                    </section>
                </div>
            </div>
        </div>
    </div>
 </ui:define>
 </ui:composition>

我的AdminController:

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.event.ActionEvent;
import java.util.*;

@SessionScoped
@ManagedBean
public class AdminController {
private int action, role;
private String searchvalue, dbsearch;
private int userID;
private static Database db;

private HtmlDataTable dataTable = new HtmlDataTable();

/**
 * Fills the datatable
 *
 *
 */
public List<User> getUserList(){
    System.out.println("getUserList()");
    System.out.println("searchvalue:"+searchvalue);

    getwholeUsers();
    return db.get().getItems();
}



public void collectCheckboxes(){
    int anz = dataTable.getRowCount();
    for(int i = 0; i < anz; i++){
        dataTable.setRowIndex(i);
        User ts = (User) dataTable.getRowData();
        System.out.println(ts.getId() + " - "  + ts.isSelect());
    }
}

/**
 *
 * This method will be executed, when the page is opened or refreshed
 */
@PostConstruct
public void openPage(){
    System.out.println("openPage()");
    getwholeUsers();
}

/**
 * reloads the usertable with all users
 *
 *
 */
public void reloadUsers(){
    System.out.println("ReloadUsers()");
    getwholeUsers();
}

/**
 *
 * Grabs the whole users from database
 *
 **/
private void getwholeUsers(){
    db = Database.getInstance().prepare("SELECT * FROM users");
}

/**
 * Search the typed text in usersearch in database
 *
 *
 */
public void searchUser(){
    System.out.println("searchUser()");

   // searchvalue="Robert";

    dbsearch = "%"+searchvalue+"%";

    System.out.println("dbsearch:"+dbsearch);

    db = Database.getInstance().prepare("SELECT * FROM users WHERE name LIKE ? OR email LIKE ? OR registernumber LIKE ?");
    db.with(dbsearch); // name
    db.with(dbsearch); // email
    db.with(dbsearch); // registernumber
    System.out.println("Search success");
    db.get();
    System.out.println("Search db.get success");
}

/**
 * Makes an action on selected user, values got from the itemValue of actionDropwdown
 * 0 = do nothing
 * 1 = delete User
 *
 * 13 ACTION 1 collectCB openPage 4
 */
public void actionUser(ActionEvent event){
    System.out.println("action:"+action);
    collectCheckboxes();
    userID = 7;

    switch (action){
        case 0:
            Flash.setFlashMessage("error", "Bitte eine Aktion auswählen");
            break;
        case 1:
            db = Database.getInstance().prepare("DELETE FROM users WHERE id = ?");
            db.with(Integer.toString(userID)); // id
            db.run();
            break;
        default:
            break;
    }
}

/**
 * Sets the role ("type" in Database) on selected user, values got from the itemValue of roleDropdown
 * 0 = no nothing
 *
 * Recognize the type convention:
 * Student = 1
 * Tutor = 2
 * Dozent = 3
 * Admin = 4
 *
 *
 *
 *
 */
public void changeRole(ActionEvent event){
    collectCheckboxes();
    userID=8;

    if (role >= 1 && role <= 4){
        Database db = Database.getInstance().prepare("UPDATE users SET type = ? WHERE id = ?");
        db.with(Integer.toString(role));
        db.with(Integer.toString(userID));
        db.run();
    } else if (role == 0){
        Flash.setFlashMessage("error", "Bitte eine Rolle auswählen");
    } else {
        Flash.setFlashMessage("error", "Kein gültiger Wert");
    }
}





public void setAction(int action) {
    this.action = action;
}

public int getAction() {
    return action;
}

public void setRole(int role) {
    this.role = role;
}

public int getRole() {

    return role;
}

public void setSearchvalue(String searchvalue) {
    this.searchvalue = searchvalue;
}

public String getSearchvalue() {
    return searchvalue;
}

public void setDataTable(HtmlDataTable dataTable) {
    this.dataTable = dataTable;
}

public HtmlDataTable getDataTable() {
    return dataTable;
}

}

有人告诉我,我的servlet(我不知道)的东西是错的。因此,点击我的按钮,它将重新加载用户列表的9倍,然后执行此操作,然后再次重新加载5次。当我通过链接或第一次打开页面时,它会执行两次openPage()(具有@PostConstruct)。 希望这会帮助你。

(另一个问题:如何获得项目的ID,在表格中显示和检查 - 在这种情况下是用户的ID。我将选择1个或多个复选框来执行roleChange或deleteUser) 编辑:我更新了两个源代码。我找到了一个答案(http://www.java-forum.org/allgemeines-ee/56126-datatable-checkboxen.html)来阅读所选的复选框 - 但它们都是假的。我想通了,当我点击动作按钮时,它会执行13次getUserList(),然后执行actionUser()一次,collectCheckboxes()一次,openPage()一次,getUserList()执行4次。 希望能帮到你。 :/