我试图使用下面的脚本将简单的fin-Hypergrid添加到GoldenLayout组件中,但是我不断收到错误:

Uncaught TypeError: this.div.appendChild is not a function  @Hypergrid.js:854
Uncaught TypeError: Cannot set property 'range' of null     @Hypergrid.js:2132

HTML,
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>

<div id="fin-grid"></div>

<script src="https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" /></script>
<script>

var config = {
    content: [{
        type: 'stack',
        content: [
            {
            type: 'component',
            componentName: 'example',
            componentState: {}
        }
        ]
    }]
};
var myLayout = new GoldenLayout(config);

var hyperGridComponent = function (container, state) {
    this._hyperGridcontainer = container;

    container.on('open', this._createHyperGrid.bind(this));
};

hyperGridComponent.prototype._createHyperGrid = function () {
    var data = [
      { symbol: 'APPL', name: 'Apple Inc.', prevclose: 93.13 },
      { symbol: 'MSFT', name: 'Microsoft Corporation', prevclose: 51.91 },
      { symbol: 'TSLA', name: 'Tesla Motors Inc.', prevclose: 196.40 },
      { symbol: 'IBM', name: 'International Business Machines Corp', prevclose: 155.35 }
    ];
    var grid = new fin.Hypergrid(this._hyperGridcontainer.getElement(), { data: data });


    grid.addProperties({
        showRowNumbers: false,
        showFilterRow: false
    });

};

 myLayout.registerComponent('example', hyperGridComponent);
 myLayout.init();

 </script>
 </body>
 </html>

对如何纠正这些错误有什么想法吗?

最佳答案

这里是Hypergrid的维护者之一。我们已经发布了一个新版本的Hypergrid(请注意它是一个“去聚合”版本)。
你能试试这个版本吗。
https://github.com/openfin/fin-hypergrid/

07-26 09:39