7

UI にデータを表示するために、primefaces datatable を使用しています。ご存知のように、データ テーブル自体で並べ替えとフィルター処理を行うことができます。しかし、データテーブルの並べ替えフィールドに単一の文字を入力すると、データの検索が開始されます。ユーザーがフィールドに少なくとも 3 文字を入力した場合にのみ、データを検索する必要があります。それは可能ですか..？もしそうなら、どのように？それについてあなたのコメントを提供してください。

前もって感謝します。

4

1 に答える 1

4

私は Primefaces のデータ テーブルを少し調査しましたが、これが私の調査結果です。

実際には、再コンパイルは必要ありません。ソースの JavaScript の置換も同様です。

Primefaces が提供するものではなく、フィルター イベントの新しいハンドラーを登録する必要があります。

この場合、データ テーブルは次のように使用されます。

<h:outputScript name="js/customprimefacestable.js" target="body"/>

<p:dataTable var="data" value="#{filterBean.data}" filteredValue="#{filterBean.filteredData}" widgetVar="tableWidget">
    <p:column filterBy="#{data.name}" headerText="Name" filterMatchMode="contains">
        <h:outputText value="#{data.name}" />
    </p:column>
    <p:column filterBy="#{data.value}" headerText="Value" filterMatchMode="contains">
        <h:outputText value="#{data.value}" />
    </p:column>
    ...
</p:dataTable>

そしてJavaScriptは次のようになります：

$(document).ready(function() {
    tableWidget.thead.find('> tr > th.ui-filter-column > .ui-column-filter').each(function() {
        var filter = $(this);
        if(filter.is('input:text')) {
            if(tableWidget.cfg.filterEvent!="enter"){
                //unbind current handler
                filter.unbind(tableWidget.cfg.filterEvent);
                //bind new handler that accounts for conditional filtering
                filter.bind(tableWidget.cfg.filterEvent, function(c) {
                    if(filter.val().length > 3) {
                        //Primefaces 3.5 implementation
                        if(tableWidget.filterTimeout){
                            clearTimeout(tableWidget.filterTimeout);
                        }
                        tableWidget.filterTimeout=setTimeout(function(){
                            tableWidget.filter();
                            tableWidget.filterTimeout=null},
                        tableWidget.cfg.filterDelay);
                    }
                });
            }
        }
    });
});

注意事項：

  • target="body": <head>Primefaces は でそのウィジェット変数を初期化するため、javascript を で実行してはなりません。そのため、Primefaces の初期化が行われた後$(document).ready()に関数が実行されることは保証されません。
  • フィルタリングは、列の検索ボックスに入力された 4 文字以上で開始されるため (完了)、ユーザーが自分でテキストを 4 文字未満に削除した場合は、フィルタリングされていないビューを復元する必要があります (未完了)。
  • 上記のソリューションは Primefaces 3.5 を対象としてい<p:dataTable>ます。Primefaces の実装はバージョンごとに異なるため、使用しているバージョンの実装を確認するか、バージョン 3.5 にアップグレードしてください。
  • 入力フィールドがドロップダウン ボックスとして表示されるフィルタリング イベントの実装はカバーされていません。
  • keyupテーブルはデフォルト ( ) イベントをリッスンします。
于 2013-03-05T09:39:28.577 に答える