带选择列表的YUI Datatable的客户端过滤器？

Question

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

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

Answer 1

每个YAHOO.widget组分如YUI DataTable使用YUI DataSource组分提供了所需要填充每个渲染YAHOO.widget部件数据。娄你可以看到它是如何工作

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

sendRequest(request, callback) 

• 请求

对于远程数据，该请求可以是PARAM /值串，如“ID = 123 &名称=富”。 对于本地数据，这个请求也许一个简单的值，如123指定的参数可能是无关紧要，所以这个值可以简单地为空

• 回调

这只是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组件调用内部YUI数据源时通过sendRequest方法，它会传递一个内置的回调对象，如上所示它负责渲染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 
     }); 
    } 
}); 

Althoug没有测试过，我敢肯定它会正常工作。