<template>
<div class="container-fluid">
<wj-flex-grid :initialized="initData"
:itemsSource="grid.data"
:cellEditEnding="onValueChanged">
</wj-flex-grid>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.grid';
let App = Vue.extend({
name: 'app',
data: function(){
return {
grid: {
data: null,
instance: null
}
}
},
methods: {
getData: function(s, e){
let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries,
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
},
initData: function(grid){
this.grid.instance = grid;
this.grid.data = this.getData();
},
onValueChanged: function(){
let newData = {
id: Math.random(),
country: "newData",
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
}
data.push(newData);
this.grid.collectionView.refresh();
}
}
})
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.wj-flexgrid {
height: 200px;
margin: 10px 0;
}
body {
margin-bottom: 20pt;
}
</style>
差不多就是上面的功能，当我编辑cellEditEnding时，给itemsSource追加一行新数据，并显示，但是会发生上面所描述的情况。
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图