0

私は自分の言葉をパッパーにしているので、Primefacesの助けが必要です。JSF 2.0 と Primefaces 4.0 を使用しています。

デフォルトのPrimeFace DataTableは素晴らしいです。なぜなら、選択した行のオブジェクトを取得できるからです。純粋な JSF ではできないと思います。

しかし、1 つの問題があります。ユーザーが行を選択できず、行をクリックするだけです。つまり、ユーザーが行をクリックすると、クリックされた行の値が取得され、これにはリンクが必要です。

以下の私のコードを見ると、よりよく理解できます。

<p:dataTable id="minhaTabela" var="disciplina" value="#{disciplinaMBean.listaDisciplinasPesquisadas}" rowKey="#{disciplina.id}"                       
selection="#{disciplinaMBean.disciplinaSelecionada}" selectionMode="single">

    <p:column headerText="Nome" styleClass="pull-left">
        <a class="various fancybox.ajax" href="edit.jsf">
                     #{disciplina.nome}
        </a>    
    </p:column>

</p:dataTable>

ご覧のとおり、ユーザーが行をクリックすると、「edit.jsf」にリダイレクトされます (実際には、これは jQuery でモーダルを開くだけです)。だから、私が必要なのは：

  1. ユーザーが行をクリックすると、その行は選択されません。
  2. 行には、「さまざまなfancybox.ajax」クラスとリンクを持つリンクまたはそのようなものが必要です。

それで、PrimeFaces dataTable でそれを行う方法はありますか? この問題を解決するにはどうすればよいですか?

編集

これは、@rayleeの回答に似た私の新しいコードです:

<p:dataTable tableStyleClass="table table-hover" var="disciplina" value="#{disciplinaMBean.listaDisciplinasPesquisadas}" rowKey="#{disciplina.id}" selection="#{disciplinaMBean.disciplinaSelecionada}" selectionMode="single" emptyMessage="Nenhuma disciplina encontrada." >

    <p:column headerText="Nome" styleClass="pull-left">
        <p:lightBox iframe="true" width="100%" height="100%">

            <h:outputLink value="edit.jsf">
                <h:outputText value="#{disciplina.nome}" />
            </h:outputLink>

            <f:facet name="inline">
                <p:panel header="Editar disciplina">
                    <ui:include src="edit.xhtml" />
                </p:panel>
            </f:facet>  

        </p:lightBox>
     </p:column>
     <p:ajax event="rowSelect" listener="#{disciplinaMBean.limparSelecionadosDataTable}"/>

</p:dataTable>

最後のevent="rowSelect"行に近い は、選択されたすべての行を削除するだけです（ユーザーがクリックしたときに行が選択されることは望ましくありません。これは、PrimeFacesが属性を与えないため、それを修正するために見つけた方法です"selectOrClickRow" - そのような機能を待っています)。

4

1 に答える 1

1

これは、PrimeFaces ライトボックスを使用した例です。必要なコードはこれだけです。jQuery や手動でダイアログ ボックスを定義する必要はありません。dataTable には選択属性がないため、ユーザーは行を選択できないことに注意してください。

必要なのはこれだけです:

<p:dataTable var="report" value="#{tab.reports}" 
    resizableColumns="true" paginator="true" rows="30">

    <p:column headerText="Title" width="20%">

        <p:lightBox iframe="true" width="100%" height="100%">

            <h:outputLink value="#{report.URL}" title="#{report.title}">

                <h:outputText value="#{report.title}" />

            </h:outputLink>

        </p:lightBox>

    </p:column>

    ...

</p:dataTable>
于 2013-11-04T19:15:56.253 に答える