使用 Dojo 显示表格数据，并带筛选(filter)功能(2) - filter 插件

来源：互联网发布：光网络计划 verizon 编辑：程序博客网时间：2024/04/29 04:30

这篇文章简单介绍下使用 Dojo 的 filter 插件，实现表格数据的筛选功能。
和上一篇使用 Dojo 显示表格数据，并带筛选(filter)功能不一样的是，grid.filter() 只是一个筛选函数的使用，而 filter 插件则是一个完整的筛选的解决方案。只需要 EnhancedGrid 对象的 structure 对象进行配置，就能得到效果完整的筛选功能。

在 dataGrid 对象加上 filter 插件步骤：

1. 将 dataGrid 对象升级为 EnhancedGrid 对象

2. 给 EnhancedGrid 对象加入 filter 的 plugin

3. 在 EnhancedGrid.structure 中配置 filter 参数。

实用的 filter 参数有：

filterable

autoComplete

datatype

disabledConditions

关于 filter 插件的更多详细信息参考 Dojo 官网

可运行代码如下 :

<!DOCTYPE html><html ><head><link rel="stylesheet" href="./dojo/dojo/../dijit/themes/claro/claro.css"><style type="text/css">@import "./dojo/dojo/../dojo/resources/dojo.css";@import "./dojo/dojo/../dijit/themes/claro/claro.css";@import "./dojo/dojo/../dijit/themes/claro/document.css";@import "./dojo/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";@import "./dojo/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";</style><script>dojoConfig = {parseOnLoad: true}</script><script src='./dojo/dojo/dojo.js'></script><script>dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dojox.grid.EnhancedGrid");dojo.require("dojox.grid.enhanced.plugins.Filter");var data = {    identifier: 'id',    label: 'id',    items: []};var data_list = [    {"Heard": true, "Artist":"aaa",  "Name":"HHH There", "Track":4, "Download Date":"1923/4/9"},    {"Heard": true, "Artist":"aabbb", "Name":"LLL Hey", "Track":4, "Download Date":"1947/12/6"},    {"Heard": true, "Artist":"bbcc", "Name":"LLL Hey", "Track":4, "Download Date":"1947/12/6"},    {"Heard": true, "Artist":"aabbcc", "Name":"LLL Street", "Track":8, "Download Date":"1906/3/22"},    {"Heard": true, "Artist":"bbcc", "Name":"TTT", "Track":5, "Download Date":"1994/11/29"}];var i, len;for(i=0, len = data_list.length; i < len; ++i){    data.items.push(dojo.mixin({'id': i + 1 }, data_list[i % len]));}var layout = [    { field: "id", datatype:"number", filterable:false},    { field: "Artist", datatype:"string",        // Declare that we need the ComboBox for suggestions (autoComplete by default)        autoComplete: true,        disabledConditions: ["contains", "startsWith", "endsWith", "notEqualTo", "notcontains", "notStartsWith", "notEndsWith", "isEmpty"]    },    { field: "Name", datatype:"string",        // Declare that we do not need the following conditions for this column        autoComplete: true,        disabledConditions: ["contains", "startsWith", "endsWith", "notEqualTo", "notcontains", "notStartsWith", "notEndsWith", "isEmpty"]    },    { field: "Download Date", datatype:"date", filterable:false },];// In case you've close the filter bar, here's a way to bring it up.function showFilterBar(){    dijit.byId('grid').showFilterBar(true);}dojo.ready(function(){    var store = new dojo.data.ItemFileWriteStore({data: data});    var grid = new dojox.grid.EnhancedGrid({        id: 'grid',        store: store,        structure: layout,        plugins: {            filter: {                closeFilterbarButton: true,                ruleCount: 5,                // Set the name of the items                itemsName: "itemsssss"            }        }    });    grid.placeAt('gridContainer');    grid.startup();});</script></head><body class="claro">    <div id="gridContainer" style="width: 100%; height: 400px;"></div><button onclick='showFilterBar()'>Show Filter Bar</button></body></html>

0 0