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

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","Time":"202","TrackNumber":"2",{"Key":"3","Name":"Sludge Factory","Time":"432","TrackNumber":"3",{"Key":"4","Name":"Heaven Beside You","Time":"327","TrackNumber":"4",{"Key":"5","Name":"Head Creeps","Time":"388","TrackNumber":"5",{"Key":"6","Name":"Again","Time":"245","TrackNumber":"6",{"Key":"7","Name":"Shame In You","Time":"335","TrackNumber":"7",{"Key":"8","Name":"God Am","Time":"248","TrackNumber":"8",{"Key":"9","Name":"So Close","Time":"165","TrackNumber":"9",{"Key":"10","Name":"Nothin' Song","Time":"340","TrackNumber":"10","Year":"1995"}
	]

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!