急，有什么方法监听列的 visible 改变吗

收藏

需要监听 `wjcGrid.ColumnCollection` 中的 `wjcGrid.Column` 的 visible 变化，或者是所有属性的变化

KevinChen · KevinChen

你好，问题已收到，预计上午就能给您反馈。

nutstore · nutstore

KevinChen 发表于 2020-12-29 09:57
你好，问题已收到，预计上午就能给您反馈。

有方法吗，我粗略过了一遍相关的文档，没找到

KevinChen · KevinChen

您好，原生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[i],
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[0].onPropertyChanged(() => {
console.log(1);
})
const originalColumnSetter = Object.getOwnPropertyDescriptor(
theGrid.columns[0].__proto__.__proto__, "visible").set;
let visible = theGrid.columns[0].visible;
Object.defineProperty(theGrid.columns[0], "visible", {
get(){
return visible
},
set(newValue) {
console.log('newValue, ',newValue);
originalColumnSetter.call(this, newValue);
}
});
document.getElementById('btn').addEventListener('click', function(){
console.log(theGrid.columns[0].visible);
visible = !visible
theGrid.columns[0].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">
<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/ ... nding/Basics/purejs

另补充说明，还是建议能够自己监听到导致visible更改的位置，加入代码逻辑，尽量不要用这种破坏原型的实现方案。

nutstore · nutstore

KevinChen 发表于 2020-12-29 11:58
您好，原生Column中对visible属性做了封装，定义了getter和setter方法，不过好在它原生的setter和getter是 ...

照你的说法，应该是你们内部不会有什么逻辑通过内部的方法来修改 visible 的值对吗。

我比较担心出现你们内部修改后我们这里的代码监听不到的情况

Richard.Ma · Richard.Ma

问题已经收到，这个我们需要验证后回复，预计明天以前给您回复

KevinChen · KevinChen

nutstore 发表于 2020-12-29 13:59
照你的说法，应该是你们内部不会有什么逻辑通过内部的方法来修改 visible 的值对吗。

我比较担心出现 ...

你好，visible不会无缘无故被内部逻辑修改的，毕竟这个属性直接决定了UI的展示效果，客户肯定不会愿意看到莫名其妙的列就消失了对吧~

另外，其实FlexGrid针对UI的监听还有一个事件，不知道对你有没有帮助：
https://www.grapecity.com/wijmo/ ... id.html#updatedview

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

[已处理] 急，有什么方法监听列的 visible 改变吗

6 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章