4

複数のドロップダウン メニューとページ分割された YUI データテーブルを使用して、静的データセットの行をフィルター処理できますか?

http://www.mappingbahia.org/project/iguape_dataset.html

4

1 に答える 1

1

YUI DataTableなどの各 YAHOO.widget コンポーネントは、レンダリングされた各 YAHOO.widget コンポーネントに入力するために必要なデータを提供するYUI DataSourceコンポーネントを使用します。以下で、それがどのように機能するかを見ることができます

YUI データソース

各 YAHOO.widget コンポーネントは、内部でsendRequestメソッドを介して、基礎となる YUI データソースを呼び出します(手順 1 を参照)。次に、sendRequest 署名を見てみましょう

sendRequest(request, callback)
  • リクエスト

リモート データの場合、このリクエストは「id=123&name=foo」などのパラメータ/値文字列になります。local data の場合、このリクエストは 123 などのより単純な値である可能性があります。パラメータの指定は無関係である可能性があるため、この値は単に null である可能性があります

  • 折り返し電話

以下のように記述できるJavaScriptオブジェクトです（各プロパティに注意）

var callback = {
    success:function(request, response, payload) {
        /*
         * successful request is performed by success property
         */
    },
    failure:function(request, response, payload) {
        /*
         * failure request is performed by failure property
         */
    },
    scope:null,
    argument:null
}

したがって、各 YAHOO.widget コンポーネントが sendRequest メソッドを介して内部的に YUI データソースを呼び出すと、上記のように、YAHOO.widget コンポーネント自体のレンダリングを処理する組み込みのコールバック オブジェクトが渡されます。したがって、カスタム動作が必要な場合は、基礎となる YUI データソースを呼び出し、カスタム コールバック オブジェクトを渡す必要があります。次のように、YUI データソースによって提供されるデータをフィルタリングします。

var datatable = // YUI datatable settings goes here

各変更イベントを各選択に添付するには、次を使用できます

YAHOO.util.Event.addListener("sex", "change", function(e) {
    var value = e.getTarget(e).value;

    if(YAHOO.lang.isValue(value)) {
        /**
          * Notice i am retrieving The underlying datasource To make a call To sendRequest method
          */
        datatable.getDataSource().sendRequest(null, {
            success:function(request, response, payload) {
                /**
                  * because scope property (see bellow) refers To The datatable
                  * this keyword can be used To get a reference To The datatable
                  */

                /**
                  * initializeTable method clear any data stored by The datatable
                  */
                this.initializeTable();

                var rs = response.results;
                var filtered = [];
                for(var i = 0; i < rs.length; i++) {
                    /**
                      * Is The sex property equal To The value selected by The user ?
                      */ 
                    if(rs[i]["sex"] == value) {
                        filtered[filtered.length] = rs[i];
                    }
                }

                this.getRecordSet().setRecords(filtered, 0);

                // Update UI
                this.render();
            },
            scope:datatable,
            argument:null
        });
    }
});

テストされていませんが、問題なく動作すると確信しています。

于 2010-07-28T03:21:45.223 に答える