使用 Dojo 显示表格数据,并带筛选(filter)功能(2) - filter 插件
2016-01-22 01:59
726 查看
这篇文章简单介绍下使用 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>
和上一篇
使用 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>
相关文章推荐
- Codeforces-Edu6-C.Pearls in a Row
- Make VLC player support polarized 3D.让VLC播放器支持偏振3D效果。
- 16初出茅庐B题
- Codeforces-Edu6-B. Grandfather Dovlet’s calculator
- 2、Winsock的寻址方式和字节顺序
- 深入理解JVM--JVM垃圾回收机制
- iOS Sqlite3 Demo 及 FMDB Demo
- Python练习_更改配置文件(3)
- 什么样的人当不好程序员?
- [iOS]App上架流程[利用Archive进行上传]
- POJ 3294 二分找超过一半字符串中存在的子串
- Android studio 搭建 Svn 及文件忽略
- Codeforces-Edu6-A. Professor GukiZ's Robot
- 一箭多星: 如何syn flood 一个网段服务器
- Educational Codeforces Round 6(C)尺取法+贪心
- 16初出茅庐A题
- qt 容器类
- Educational Codeforces Round 6 (B)模拟
- Educational Codeforces Round 6 (A)贪心
- tensorflow源代码方式安装