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

来源：互联网发布：2017耽美网络剧百度云编辑：程序博客网时间：2024/04/28 13:01

<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/

0 0