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,
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/demos/Grid/FilteringSearching/Excel-likeFilter/Overview/vue
将下面的代码全部复制到app.vue中运行，点击按钮即可
<template>
<div class="container-fluid">
<!-- the grid -->
<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,
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>
页:
[1]