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

这篇文章简单介绍下使用 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","Download Date":"1947/12/6"},"Artist":"bbcc","Artist":"aabbcc","Name":"LLL Street","Track":8,"Download Date":"1906/3/22"},"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",// Declare that we do not need the following conditions for this column
        autoComplete: true,"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>

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

相关文章