1

で行の即時選択を試みましたが、セル テキストをクリックしても行が選択さprimefaces <p:datatable>れないことがわかりました。行を選択する場合は、エッジ セルをクリックする必要があります。

問題を解決するための任意のアイデア。

4

6 に答える 6

6

少なくとも PrimeFaces 5.3 の状況で<p:outputLabel>は、セルのコンテンツで a を使用すると、クリックして行を選択できなくなることがわかりました。回避策は、PrimeFaces ラベルを使用せず、代わりにデフォルトの JSF ライブラリを使用して、手の込んだ「ガジェット」を使用せずに単純にテキストを出力することです。

変化する：

<p:outputLabel value="#{item.description}" />

に：

<h:outputText value="#{item.description}"/>
于 2015-12-03T16:07:10.273 に答える
1

質問が適切に配置されており、それが起こっていることを確認できます。Primefaces 3.5.7 では、著者のサイトで説明されているように、データテーブルのインスタント選択を使用しています。選択は、テーブルのファセット部分にヒットしない場合にのみ正しくトリガーされます! Mozilla Firefox 24 でテストしています。

彼の例では、列のファセット内にコンポーネントがないため、または celleditor が選択の例で誤動作を引き起こしている可能性があるため、機能することを述べさせてください。

       <p:column headerText="Model" style="width:30%">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.model}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{car.model}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>

代わりに彼は以下を使用しています:

       <p:column headerText="Model">  
            #{car.model}  
        </p:column>

私が行ったこと (PF の作成者は、ソリューションを提供するために PRO サブスクライバーである必要があるため!) は、データテーブルの最初または最後に空の列を追加し、そこをクリックした場合にのみ、ユーザーはあなたが許可したことを実行できます。行う。

例えば：

<p:column headerText="Select" width="10">
</p:column>
于 2013-09-29T15:45:00.150 に答える
1

数年後、しかし一体何だ - これはそこにいる誰かに役立つかもしれないと思った...

PF 5.3 でも同じ問題に遭遇しました。クリック イベントがテーブルの行に反映されないようです。これは、PF スクリプトの間違いです。以前の回答で述べたように、「公式」の修正が必要な場合は、PRO サポートを購入する必要があります... 一方、回避策をコーディングすることは不可能ではありません。実装または設計において、このサンプルの効率性を主張するものではありません。必要なのは次の関数だけです。これは、スクロール可能なテーブルとスクロールできないテーブルの両方で機能します。かなりの数のシナリオをテストしていませんが、開始する必要があります-更新を投稿してください:)

$(document).ready(function() {
    attachShowEvent();
});

/*
 * Seems that if the table is hidden then the ready functions 
 * wont fire...so you have to manualy attach the thing. Has
 * to be an easier way - this would happen if the table is
 * in a tabView tab which is not visible on page load. In this case you have to 
 * manualy attach the events when the tab gets selected
 */
function attachShowEvent(){
  /*
   * Fix hover pointer
   */
   $('.ui-datatable-selectable label').hover(function() {
     $(this).css('cursor','pointer');
   });
   /*
    * attach click and double click events to p:outputLabel
    */
   $('.ui-datatable-selectable label').click(function(event) {
     tableLabelClicked(event);        
   });
   /*
    * dblclick doesnt work - something is explicity blocking it
    * dont have the energy to find it:)
    */
   $('.ui-datatable-sekectable label').dblclick(function(event){
     tableLabelDblClicked(event);
   });
}

function tableLabelClicked(event){  
  /*
   * Trigger the "click" event on the parent td  
   */
  try{
    $(event.target).parent().trigger( "click" );
  }catch(e){
    console.log(e);
  }
}

function tableLabelDblClicked(event){  
  /*
   * Trigger the "dblclick" event on the parent td  
   */
  try{
    $(event.target).parent().trigger( "dblclick" );
  }catch(e){
    console.log(e);
  }
}
于 2016-03-19T10:30:39.730 に答える