dojo小例子（31）dgrid增加filter搜索功能

<div id="filter-wrapper">
    <input
        id="filter"
        data-dojo-type="dijit/form/TextBox"
        data-dojo-props="
            placeHolder: 'filter by name',
            intermediateChanges:true
            "
        style="padding:2px;margin:3px;width:20em;"        
    />
</div>

<div id="grid"></div>

html, body {
    height: 100%;
}
body {
    font-family: sans-serif;
    font-size: 11px;            
}

#filter-wrapper {
    background-color: lightyellow;
    font-size: 14px;
}

#grid {
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}

require([
    "dojo/ready",
    "dojo/_base/declare",
    "dojo/store/Memory",
    
    "dgrid/OnDemandGrid",
    "data/dtuned",
    
    "dijit/registry",
    "dijit/form/TextBox",
    "dojo/domReady!"
], function(
    ready,
    declare,
    Memory,
        
    Grid,
    data,
        
    registry
) {
    
ready(function() {
    
    var timeoutId;
    var filter = registry.byId("filter");
    var store = new Memory({ data: data});
    // 对每一条记录进行判断，true则显示该条记录，false不显示，达到过滤效果
    var filterQuery = function(item, index, items) {
        var filterString = filter ? filter.get("value") + "" : "";
        
        // early exists
        if (filterString.length < 2) return true;
        if (!item.Name) return false;
        
        var name = (item.Name + "").toLowerCase();
        if (~name.indexOf(filterString.toLowerCase())) { return true;}
        
        return false;
    }
    
    var grid = new Grid({
        store: store,
        query: filterQuery,
        columns: {
            Name: "Name",
            Year: "Year",
            Artist: "Artist",
            Album: "Album",
            Genre: "Genre"
        }
    }, "grid");
    // 监测输入，输入字母间隔超300毫秒，才刷新grid，触发filterQuery执行
    filter.watch("value", function(name, oldValue, newValue) {
        if (timeoutId) {
            clearTimeout(timeoutId);
            timeoutId = null;
        };
        // 设置超时，防止每输入一个字母就刷新grid
        timeoutId = setTimeout(function() {
            grid.refresh();
        }, 300);
    });
    
});    
});

dtuned.js

define([], {

	identifier: "Key",
	label: "Name",
	items: [
		{"Key":"1","Name":"Grind","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"284","TrackNumber":"1","Year":"1995"},
		{"Key":"2","Name":"Brush Away","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"202","TrackNumber":"2","Year":"1995"},
		{"Key":"3","Name":"Sludge Factory","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"432","TrackNumber":"3","Year":"1995"},
		{"Key":"4","Name":"Heaven Beside You","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"327","TrackNumber":"4","Year":"1995"},
		{"Key":"5","Name":"Head Creeps","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"388","TrackNumber":"5","Year":"1995"},
		{"Key":"6","Name":"Again","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"245","TrackNumber":"6","Year":"1995"},
		{"Key":"7","Name":"Shame In You","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"335","TrackNumber":"7","Year":"1995"},
		{"Key":"8","Name":"God Am","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"248","TrackNumber":"8","Year":"1995"},
		{"Key":"9","Name":"So Close","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"165","TrackNumber":"9","Year":"1995"},
		{"Key":"10","Name":"Nothin' Song","Artist":"Alice In Chains","Album":"Alice In Chains","Genre":"Alternative","Time":"340","TrackNumber":"10","Year":"1995"}
	]

});

原文http://jsfiddle.net/phusick/7gnFd/