valueFilter.showValues设置不起作用

页面代码


<template>
  <div class="componentContainer" >
    <button @click="searchdata">查询</button>
    <div class="spreadContainer" >
      <wj-flex-grid :items-source="data" id="theGrid" :initialized="initGrid">
              <wj-flex-grid-filter :filter-columns="filtercolumns" :filter-applied="FilterApplied">

        </wj-flex-grid-filter>
      </wj-flex-grid>
      <!--<gc-spread-sheets
        :hostClass='"spreadHost"'>

      </gc-spread-sheets>-->
    </div>
  </div>
</template>
<script>
  import '@grapecity/wijmo.styles/wijmo.css'
  import * as wjcCore from '@grapecity/wijmo'
  import * as wjcGrid from '@grapecity/wijmo.grid'
  import '@grapecity/wijmo.vue2.grid'
  import '@grapecity/wijmo.vue2.input'
  import '@grapecity/wijmo.cultures/wijmo.culture.zh.js'
  import "@grapecity/wijmo.vue2.grid.filter";
  import  {FlexGridFilter, FilterType} from '@grapecity/wijmo.grid.filter';
  //import '@assets/wijmo.grid.min.js';

  export default {
    name: 'sample-wijmo',
    data(){
      return {
        data: null,
        filtercolumns: ['行号','country'],
        grid: null
      }

    },
    // watch filter and update CollectionView when it changes
    created: function () {

    },
    // connect group panel and grid
    mounted: function () {
    },
    methods: {
      initGrid: function (grid) {
        //this.getData()
        this.grid = grid
      },
      FilterApplied(s){
        console.log('s',s)
        this.filtercolumns.forEach((item,index) => {
          let valueFilter = s.getColumnFilter(item, true).valueFilter;
          valueFilter.uniqueValues = null;
          // 筛选框选中的值
          let val = valueFilter._values
          console.log('val',val)
          if(val != undefined){
            localStorage.setItem(item,JSON.stringify(val))
          }
        })
      },
      searchdata(){
        this.data = this.getData()
        this.$nextTick(() => {
          let filter = new FlexGridFilter(this.grid);
          filter.defaultFilterType = FilterType.Value;
          //console.log(filter)
          this.filtercolumns.forEach((item,index) => {
                  var sval = localStorage.getItem(item)
                  if(sval && sval != undefined){
                          var col = this.grid.columns.getColumn(item),
                          cf = filter.getColumnFilter(col);
                          cf.valueFilter.showValues = JSON.parse(sval)
              console.log('cf',cf)
                  }
          })
          // filter.filterApplied.addHandler(function (s1, e1) {
          //         //console.log(s1)
          //         filtercol.forEach((item,index) => {
          //                 let valueFilter = s1.getColumnFilter(item, true).valueFilter;
          //                 valueFilter.uniqueValues = null;
          //                 // 筛选框选中的值
          //                 let val = valueFilter._values
          //     console.log('val',val)
          //                 if(val != undefined){
          //                         localStorage.setItem(item,JSON.stringify(val))
          //                 }
          //         })
          // });
        })
      },
      getData() {
          var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
              data = [];
          for (var i = 0; i < 100; i++) {
              data.push({
                  '行号': i,
                  country: countries[i % countries.length],
                  date: new Date(2014, i % 12, i % 28),
                  amount: i+1 + '',
                  active: i % 4 == 0
              });
          }
          return data;
      }
    },

  }
</script>
<style scoped>
  .componentContainer {
    width: 80%;
    position: absolute;
    padding: 10px;
    left: 50%;
    top: 0;
    bottom: 20px;
    right: 0;
    transform: translateX(-50%);
  }
  .spreadContainer{
    position: absolute;
    height: 400px;
    left: 0px;
    right: 30px;
    top: 80px;
    bottom: 10px;
    padding: 10px;
    box-shadow: 0 0 20px grey;
    overflow: hidden;
  }
  .spreadHost{
    width: 100%;
    height: 100%;
  }
  .wj-flexgrid{
    height: 100%;
  }

</style>

看到这里你是又new了一个filter出来，这样就不是拿到的默认显示的filter，设置和获取都是不对的，正确的应该是初始化的时候，获取到这个filter标签对应的 filter对象。进行后续操作

我把在线示例中的demo代码稍微改了一下，参考下面的代码，复制到原来的vue示例中就可以验证了

https://www.grapecity.com/wijmo/ ... Filter/Overview/vue
将下面的代码全部复制到app.vue中运行，点击按钮即可

1. <template>
   
2.    
   
3.     <div class="container-fluid">
   
4.         <!-- the grid -->
   
5.         <wj-flex-grid :itemsSource="data" :initialized="initGrid">
   
6.             <wj-flex-grid-filter :initialized="initialized"/>
   
7.         </wj-flex-grid>
   
8.         <button @click="searchdata">设置过滤结果</button>
   
9.     </div>
   
10. </template>
    
11. 
    
12. <script>
    
13. import "@grapecity/wijmo.styles/wijmo.css";
    
14. import "bootstrap.css";
    
15. import Vue from "vue";
    
16. import "@grapecity/wijmo.vue2.grid";
    
17. import * as wjcGrid from "@grapecity/wijmo.grid";
    
18. import "@grapecity/wijmo.vue2.grid.filter";
    
19. import * as wjcCore from "@grapecity/wijmo";
    
20. import  {FlexGridFilter, FilterType} from '@grapecity/wijmo.grid.filter';
    
21. 
    
22. let App = Vue.extend({
    
23.     name: "app",
    
24.     data: function() {
    
25.         return {
    
26.             data: this.getData(),
    
27.             grid:null,
    
28.             filter:null
    
29.         };
    
30.     },
    
31.     methods: {
    
32.         getData: function() {
    
33.             // create some random data
    
34.             let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
    
35.                 data = [];
    
36.             for (let i = 0; i < 200; i++) {
    
37.                 data.push({
    
38.                     id: i,
    
39.                     country: countries[i % countries.length],
    
40.                     downloads: Math.round(Math.random() * 20000),
    
41.                     sales: Math.random() * 10000,
    
42.                     expenses: Math.random() * 5000
    
43.                 });
    
44.             }
    
45.             return data;
    
46.         },
    
47.         searchdata(){
    
48.             
    
49.             var col = this.grid.columns.getColumn(1);
    
50.                   var cf = this.filter.getColumnFilter(col);
    
51.                   cf.valueFilter.showValues={ Japan: true };
    
52.               this.filter.apply();
    
53.         },
    
54.         initGrid(grid){
    
55.             this.grid=grid;
    
56.         },
    
57.         initialized: function(filter) {
    
58.             this.filter = filter;
    
59. 
    
60.         }
    
61.     }
    
62. });
    
63. 
    
64. new Vue({ render: h => h(App) }).$mount("#app");
    
65. </script>
    
66. 
    
67. <style>
    
68. .wj-flexgrid {
    
69.     max-height: 250px;
    
70.     margin: 10px 0;
    
71. }
    
72. body {
    
73.     margin-bottom: 20px;
    
74. }
    
75. 
    
76. /* show images on filtered columns */
    
77. .custom-icons .wj-glyph-filter {
    
78.     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC");
    
79.     background-repeat: no-repeat;
    
80.     background-position: bottom right;
    
81.     margin-top: 2px;
    
82.     width: 20px;
    
83.     height: 20px;
    
84.     border: none;
    
85. }
    
86. .custom-icons .wj-glyph-filter:after {
    
87.     display: none;
    
88. }
    
89. /* make active filter images 25% larger */
    
90. .custom-icons .wj-filter-on .wj-glyph-filter {
    
91.     transform: scale(1.25);
    
92. }
    
93. 
    
94. /* change the color of the filter glyphs */
    
95. .custom-colors .wj-glyph-filter {
    
96.     color: red;
    
97.     font-size: 125%;
    
98. }
    
99. </style>

复制代码