请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

nutstore
金牌服务用户   /  发表于:2020-12-29 09:24  /   查看:2881  /  回复:6
需要监听 `wjcGrid.ColumnCollection` 中的 `wjcGrid.Column` 的 visible 变化,或者是所有属性的变化

6 个回复

倒序浏览
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-12-29 09:57:58
沙发
你好,问题已收到,预计上午就能给您反馈。
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2020-12-29 11:08:11
板凳
KevinChen 发表于 2020-12-29 09:57
你好,问题已收到,预计上午就能给您反馈。

有方法吗,我粗略过了一遍相关的文档,没找到
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-12-29 11:58:22
地板
您好,原生Column中对visible属性做了封装,定义了getter和setter方法,不过好在它原生的setter和getter是在__proto__中定义的,因此我们可以在这里找到一些切入点,参考代码示例:

App.js

  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import { SortDescription, format } from '@grapecity/wijmo';
  4. import { FlexGrid } from '@grapecity/wijmo.grid';
  5. document.readyState === 'complete' ? init() : window.onload = init;
  6. function init() {
  7.     // create some random data
  8.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  9.     var data = [];
  10.     for (var i = 0; i < countries.length; i++) {
  11.         data.push({
  12.             id: i,
  13.             country: countries[i],
  14.             sales: Math.random() * 10000,
  15.             expenses: Math.random() * 5000
  16.         });
  17.     }
  18.     // bind a grid to the raw data
  19.     var theGrid = new FlexGrid('#theGrid', {
  20.         autoGenerateColumns: false,
  21.         columns: [
  22.             { binding: 'country', header: 'Country', width: '2*' },
  23.             { binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
  24.             { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
  25.         ],
  26.         itemsSource: data
  27.     });
  28.     // show the current item
  29.     var selItemElement = document.getElementById('selectedItem');
  30.     function updateCurrentInfo() {
  31.         selItemElement.innerHTML = format('Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>', theGrid.collectionView.currentItem);
  32.     }
  33.     // update current item now and when the grid selection changes
  34.     updateCurrentInfo();
  35.     theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
  36.     // sort the data by country
  37.     var sd = new SortDescription('country', true);
  38.     theGrid.collectionView.sortDescriptions.push(sd);

  39.     theGrid.columns[0].onPropertyChanged(() => {
  40.         console.log(1);
  41.     })

  42.     const originalColumnSetter = Object.getOwnPropertyDescriptor(
  43.         theGrid.columns[0].__proto__.__proto__, "visible").set;
  44.    
  45.     let visible = theGrid.columns[0].visible;
  46.     Object.defineProperty(theGrid.columns[0], "visible", {
  47.         get(){
  48.             return visible
  49.         },
  50.         set(newValue) {
  51.             console.log('newValue, ',newValue);
  52.             originalColumnSetter.call(this, newValue);
  53.         }
  54.     });

  55.     document.getElementById('btn').addEventListener('click', function(){
  56.         console.log(theGrid.columns[0].visible);
  57.         visible = !visible
  58.         theGrid.columns[0].visible = visible;
  59.     });

  60. }
复制代码


index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>GrapeCity Wijmo FlexGrid Arrays and CollectionViews Binding</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8.     <!-- SystemJS -->
  9.     <script src="node_modules/systemjs/dist/system.src.js"></script>
  10.     <script src="systemjs.config.js"></script>
  11.     <script>
  12.         System.import('./src/app');
  13.     </script>
  14. </head>
  15. <body>
  16. <div class="container-fluid">
  17.     <button id="btn">按钮</button>
  18.     <p id="selectedItem"></p>
  19.     <div id="theGrid"></div>
  20. </div>
  21. </body>
  22. </html>
复制代码


地址:
https://www.grapecity.com/wijmo/ ... nding/Basics/purejs

另补充说明,还是建议能够自己监听到导致visible更改的位置,加入代码逻辑,尽量不要用这种破坏原型的实现方案。
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2020-12-29 13:59:27
5#
KevinChen 发表于 2020-12-29 11:58
您好,原生Column中对visible属性做了封装,定义了getter和setter方法,不过好在它原生的setter和getter是 ...

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

我比较担心出现你们内部修改后我们这里的代码监听不到的情况
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-12-30 09:09:24
6#
问题已经收到,这个我们需要验证后回复,预计明天以前给您回复
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-12-31 10:07:28
7#
nutstore 发表于 2020-12-29 13:59
照你的说法,应该是你们内部不会有什么逻辑通过内部的方法来修改 visible 的值对吗。

我比较担心出现 ...

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

另外,其实FlexGrid针对UI的监听还有一个事件,不知道对你有没有帮助:
https://www.grapecity.com/wijmo/ ... id.html#updatedview
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部