“onSelect”dataTableColumn 时 Bootsfaces 更新答案

【问题标题】：Bootsfaces update when "onSelect" dataTableColumn“onSelect”dataTableColumn 时 Bootsfaces 更新
【发布时间】：2018-06-02 02:24:44
【问题描述】：

我正在制作一个 JSF 网站（bootsfaces、xhtml、netbeans）。我有一个搜索框来搜索鸟类（它已经工作了），但是当我点击一个结果（显示在数据表中）时，我想更新一个包含关于那只鸟的详细信息的 DIV。但我不知道该怎么做。

我的 XHTML 是：

<div class="col-xs-12 col-lg-3">
    <!--SEARCH-->
    <div class="form-group">
        <label>Rechercher une espèce :</label>
        <b:form prependId="false">
            <div class="row">
                <div class="col-xs-10">
                    <b:inputText id="speciesTxt" value="#{speciesCaller.speciesSearchText}" class="form-control"/>
                </div>
                <div class="col-xs-2">
                    <b:commandButton action="#{speciesCaller.searchSpecies()}" type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search"></span>
                        <f:ajax execute="speciesTxt" event="click" render="output"></f:ajax>
                    </b:commandButton>
                </div>
            </div>
        </b:form> 

        <!--SEARCH RESULTS-->
        <b:dataTable id="output" paginated="false" searching="false" class="table table-hover" 
                value="#{speciesCaller.foundSpecies}" var="species" selectionMode="single" select="true"
                info="false" onselect="ajax:speciesCaller.onSelect(species);">
            <b:dataTableColumn value="#{species.name}">
                <f:facet name="header">
                    Nom
                </f:facet>
           </b:dataTableColumn>
        </b:dataTable>
    </div>
</div>

<!--SPECIES INFO-->  
<div id="speciesInfos" class="col-xs-12 col-lg-5">
    SPECIES INFO
    #{speciesCaller.selectedSpecies.name}
</div>

还有我的 BEAN：

@ManagedBean
@SessionScoped
public class SpeciesCaller {

    private String speciesSearchText;
    public void setSpeciesSearchText(String speciesSearchText){
        this.speciesSearchText = speciesSearchText;
    }
    public String getSpeciesSearchText(){
        return this.speciesSearchText;
    }

    private List<Species> foundSpecies;
    public List<Species> getFoundSpecies() {
        return foundSpecies;
    }
    public void setFoundSpecies(List<Species> foundSpecies) {
        this.foundSpecies = foundSpecies;
    }

    private Species selectedSpecies;
    public Species getSelectedSpecies() {
        return selectedSpecies;
    }
    public void setSelectedSpecies(Species selectedSpecies) {
        this.selectedSpecies = selectedSpecies;
    }


    public void searchSpecies() throws UnirestException{
        MainCaller mc = new MainCaller();
        if(speciesSearchText.equals("null") || speciesSearchText.equals("")){
            foundSpecies = mc.getToSpeciesList("species");
        }else{
            foundSpecies = mc.getToSpeciesList("species/search/"+this.speciesSearchText);
        }
    }

    public void onSelect(Species species) {
        selectedSpecies = species;
    }
}

【问题讨论】：

标签： jsf datatable xhtml bootsfaces

【解决方案1】：

我找到了答案，其实很简单……你不能更新一个 div（我认为），你需要更新一个 bootsfaces 元素（我在我的 div 中放了一个 b:form）。然后你只需要使用 update="idYouChoose"

在数据表中引用它的 ID

【讨论】：

【解决方案2】：

只是为了添加更多信息，您可以使用元素<h:panelGroup layout="block" /> 在 JSF 中呈现 div 标签，因此如果您使用带有 ID 的元素而不是编码原始 HTML，您将能够使用 ajax 调用更新该元素.我的意思是：

<h:panelGroup layout="block" id="speciesInfos" class="col-xs-12 col-lg-5">
    SPECIES INFO
    #{speciesCaller.selectedSpecies.name}
</h:panelGroup>

【讨论】：