带有选择列表的 YUI 数据表的客户端过滤器? [英] Client-side filter of YUI Datatable with select list?

问题描述

我可以使用多个下拉菜单和分页的 YUI 数据表过滤静态数据集的行吗?

注意每个 YAHOO.widget 组件内部通过 sendRequest 方法(参见步骤 1).现在让我们看看sendRequest签名

sendRequest(request, callback)

• 请求

<块引用>

对于远程数据，这个请求可能是一个参数/值字符串，比如id=123&name=foo".对于本地数据，这个请求可能是一个更简单的值，比如123.指定参数可能无关紧要，所以这个值可能只是空

• 回调

它只是一个JavaScript对象，可以描述如下(注意每个属性)

var 回调 = {成功:功能(请求，响应，有效载荷){/** 成功请求由成功属性执行*/},失败:功能(请求，响应，有效载荷){/** 失败请求由失败属性执行*/},范围:空，参数:空}

所以当每个 YAHOO.widget 组件通过 sendRequest 方法调用内部 YUI 数据源时，它会传递一个内置的回调对象，如上图，它负责渲染 YAHOO.widget 组件本身.所以如果你想要自定义行为，你需要调用底层的YUI数据源并传递你的自定义回调对象来过滤YUI数据源提供的数据如下

var datatable =//YUI 数据表设置在这里

将每个更改事件附加到每个选择，您可以使用

YAHOO.util.Event.addListener("sex", "change", function(e) {var value = e.getTarget(e).value;如果(雅虎.lang.isValue(值)){/*** 注意我正在检索底层数据源来调用sendRequest方法*/datatable.getDataSource().sendRequest(null, {成功:功能(请求，响应，有效载荷){/*** 因为范围属性(见下文)指的是数据表* 这个关键字可以用来获取对数据表的引用*//*** initializeTable 方法清除数据表存储的任何数据*/this.initializeTable();var rs = response.results;var 过滤 = [];for(var i = 0; i < rs.length; i++) {/*** 性属性是否等于用户选择的值?*/if(rs[i]["sex"] == 值) {过滤[过滤.长度] = rs[i];}}this.getRecordSet().setRecords(filtered, 0);//更新界面this.render();},范围:数据表，参数:空});}});

虽然没有经过测试，但我很确定它会正常工作.

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

解决方案

Each YAHOO.widget component such as YUI DataTable uses a YUI DataSource component which provides data needed To populate each rendered YAHOO.widget component. Bellow you can see how it works

Notice each YAHOO.widget component internally makes a call To The underlying YUI datasource Through sendRequest method (See step 1). Now let's see sendRequest signature

sendRequest(request, callback)

• request

For remote data, this request may be a param/value string, such as "id=123&name=foo". For local data, this request maybe a simpler value such as 123. Specifying parameters may be irrelevent, so this value may be simply be null

• callback

It is just an JavaScript object which can be described as follows (Notice each property)

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
}

So when each YAHOO.widget component makes a call To The internally YUI datasource Through sendRequest method, It pass a built-in callback object as shown above which Takes care of rendering The YAHOO.widget component itself. So if you want a custom behavior, you need To make a call To The underlying YUI datasource and pass your custom callback object To filter The data provided by The YUI datasource as follows

var datatable = // YUI datatable settings goes here

To attach each change event To each select, you can use

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
        });
    }
});

Althoug not Tested, i am pretty sure it will work fine.

这篇关于带有选择列表的 YUI 数据表的客户端过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！