valueFilter.showValues设置不起作用

Richard.Ma

页面代码

<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>
   
</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>

Richard.Ma · Richard.Ma

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

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

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

<template>
<div class="container-fluid">
<wj-flex-grid :itemsSource="data" :initialized="initGrid">
<wj-flex-grid-filter :initialized="initialized"/>
</wj-flex-grid>
<button @click="searchdata">设置过滤结果</button>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import * as wjcGrid from "@grapecity/wijmo.grid";
import "@grapecity/wijmo.vue2.grid.filter";
import * as wjcCore from "@grapecity/wijmo";
import {FlexGridFilter, FilterType} from '@grapecity/wijmo.grid.filter';
let App = Vue.extend({
name: "app",
data: function() {
return {
data: this.getData(),
grid:null,
filter:null
};
},
methods: {
getData: function() {
// create some random data
let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
data = [];
for (let i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
},
searchdata(){
var col = this.grid.columns.getColumn(1);
var cf = this.filter.getColumnFilter(col);
cf.valueFilter.showValues={ Japan: true };
this.filter.apply();
},
initGrid(grid){
this.grid=grid;
},
initialized: function(filter) {
this.filter = filter;
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
max-height: 250px;
margin: 10px 0;
}
body {
margin-bottom: 20px;
}
/* show images on filtered columns */
.custom-icons .wj-glyph-filter {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: bottom right;
margin-top: 2px;
width: 20px;
height: 20px;
border: none;
}
.custom-icons .wj-glyph-filter:after {
display: none;
}
/* make active filter images 25% larger */
.custom-icons .wj-filter-on .wj-glyph-filter {
transform: scale(1.25);
}
/* change the color of the filter glyphs */
.custom-colors .wj-glyph-filter {
color: red;
font-size: 125%;
}
</style>

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] valueFilter.showValues设置不起作用

最佳答案

1 个回复

本帖子中包含更多资源

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人