nutstore 发表于 2020-12-29 09:24:11

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

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

KevinChen 发表于 2020-12-29 09:57:58

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

nutstore 发表于 2020-12-29 11:08:11

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

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

KevinChen 发表于 2020-12-29 11:58:22

您好,原生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更改的位置,加入代码逻辑,尽量不要用这种破坏原型的实现方案。

nutstore 发表于 2020-12-29 13:59:27

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

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

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

Richard.Ma 发表于 2020-12-30 09:09:24

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

KevinChen 发表于 2020-12-31 10:07:28

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

我比较担心出现 ...

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

另外,其实FlexGrid针对UI的监听还有一个事件,不知道对你有没有帮助:
https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#updatedview
页: [1]
查看完整版本: 急,有什么方法监听列的 visible 改变吗