大佬教程收集整理的这篇文章主要介绍了使用 Dojo 显示表格数据,并带筛选(filter)功能(2) - filter 插件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这篇文章简单介绍下使用 Dojo 的 filter 插件,实现表格数据的筛选功能。
和上一篇 使用 Dojo 显示表格数据,并带筛选(filter)功能不一样的是,grid.filter() 只是一个筛选函数的使用,而 filter 插件则是一个完整的筛选的解决方案。只需要 EnhancedGrid 对象的 structure 对象进行配置,就能得到效果完整的筛选功能。
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 插件全部内容,希望文章能够帮你解决使用 Dojo 显示表格数据,并带筛选(filter)功能(2) - filter 插件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。