您好,Grid本身带的筛选器,可以调用筛选器的clear方法来清空筛选设置,参考API:
https://demo.grapecity.com.cn/wi ... idfilter.html#clear
示例如下:
1、app.js
- import 'bootstrap.css';
- import '@grapecity/wijmo.styles/wijmo.css';
- import './styles.css';
- import * as wjGrid from '@grapecity/wijmo.grid';
- import * as wjGridFilter from '@grapecity/wijmo.grid.filter';
- //
- document.readyState === 'complete' ? init() : window.onload = init;
- //
- function init() {
- //
- // generate some random data
- var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
- for (var i = 0; i < 2000; i++) {
- data.push({
- id: i,
- country: countries[i % countries.length],
- downloads: Math.round(Math.random() * 20000),
- sales: Math.random() * 10000,
- expenses: Math.random() * 5000,
- });
- }
- //
- // FlexGridFilter client-side filtering
- var theGrid = new wjGrid.FlexGrid('#theGrid', {
- itemsSource: data,
- });
- var filter = new wjGridFilter.FlexGridFilter(theGrid);
- document.getElementById("btn").addEventListener("click",function(){
- filter.clear();
- });
- }
复制代码
2、inde.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>GrapeCity Wijmo FlexGrid Excel-like Filter</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- SystemJS -->
- <script src="node_modules/systemjs/dist/system.src.js"></script>
- <script src="systemjs.config.js"></script>
- <script>
- System.import('./src/app');
- </script>
- </head>
- <body>
- <button id="btn">按钮</button>
- <div class="container-fluid">
- <div id="theGrid">
- </div>
- </div>
- </body>
- </html>
复制代码
测试地址:
https://demo.grapecity.com.cn/wi ... ter/Overview/purejs |