yui - Client-side filter of YUI Datatable with select list?

Question

Can I filter the rows of a static dataset using multiple drop-down menus and a paginated YUI datatable ?

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

Answer 1

每个 YAHOO.widget 组件（例如YUI DataTable ）都使用一个YUI DataSource组件，该组件提供填充每个渲染的 YAHOO.widget 组件所需的数据。下面你可以看到它是如何工作的

注意每个 YAHOO.widget 组件在内部通过sendRequest方法调用底层 YUI 数据源（参见步骤 1）。现在让我们看看 sendRequest 签名

sendRequest(request, callback)

• 要求

对于远程数据，这个请求可能是一个参数/值字符串，例如“id=123&name=foo”。对于本地数据，这个请求可能是一个更简单的值，比如 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
        });
    }
});

虽然未经测试，但我很确定它会正常工作。