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

深藏阁楼爱情的钟 2022-08-07 09:38 133阅读 0赞

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/