急,有什么方法监听列的 visible 改变吗
需要监听 `wjcGrid.ColumnCollection` 中的 `wjcGrid.Column` 的 visible 变化,或者是所有属性的变化你好,问题已收到,预计上午就能给您反馈。 KevinChen 发表于 2020-12-29 09:57
你好,问题已收到,预计上午就能给您反馈。
有方法吗,我粗略过了一遍相关的文档,没找到 您好,原生Column中对visible属性做了封装,定义了getter和setter方法,不过好在它原生的setter和getter是在__proto__中定义的,因此我们可以在这里找到一些切入点,参考代码示例:
App.js
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import { SortDescription, format } from '@grapecity/wijmo';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries,
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
// bind a grid to the raw data
var theGrid = new FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', width: '2*' },
{ binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
],
itemsSource: data
});
// show the current item
var selItemElement = document.getElementById('selectedItem');
function updateCurrentInfo() {
selItemElement.innerHTML = format('Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>', theGrid.collectionView.currentItem);
}
// update current item now and when the grid selection changes
updateCurrentInfo();
theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
// sort the data by country
var sd = new SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);
theGrid.columns.onPropertyChanged(() => {
console.log(1);
})
const originalColumnSetter = Object.getOwnPropertyDescriptor(
theGrid.columns.__proto__.__proto__, "visible").set;
let visible = theGrid.columns.visible;
Object.defineProperty(theGrid.columns, "visible", {
get(){
return visible
},
set(newValue) {
console.log('newValue, ',newValue);
originalColumnSetter.call(this, newValue);
}
});
document.getElementById('btn').addEventListener('click', function(){
console.log(theGrid.columns.visible);
visible = !visible
theGrid.columns.visible = visible;
});
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexGrid Arrays and CollectionViews Binding</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>
<div class="container-fluid">
<button id="btn">按钮</button>
<p id="selectedItem"></p>
<div id="theGrid"></div>
</div>
</body>
</html>
地址:
https://www.grapecity.com/wijmo/demos/Grid/Data-binding/Basics/purejs
另补充说明,还是建议能够自己监听到导致visible更改的位置,加入代码逻辑,尽量不要用这种破坏原型的实现方案。 KevinChen 发表于 2020-12-29 11:58
您好,原生Column中对visible属性做了封装,定义了getter和setter方法,不过好在它原生的setter和getter是 ...
照你的说法,应该是你们内部不会有什么逻辑通过内部的方法来修改 visible 的值对吗。
我比较担心出现你们内部修改后我们这里的代码监听不到的情况 问题已经收到,这个我们需要验证后回复,预计明天以前给您回复 nutstore 发表于 2020-12-29 13:59
照你的说法,应该是你们内部不会有什么逻辑通过内部的方法来修改 visible 的值对吗。
我比较担心出现 ...
你好,visible不会无缘无故被内部逻辑修改的,毕竟这个属性直接决定了UI的展示效果,客户肯定不会愿意看到莫名其妙的列就消失了对吧~
另外,其实FlexGrid针对UI的监听还有一个事件,不知道对你有没有帮助:
https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#updatedview
页:
[1]