在 Knockout 中使用 Spread.Sheets

Spread.Sheets 支持 Knockout.

Knockout 是一款 JavaScript MVVM 框架，可以让你使用 JavaScript 和 HTML 创建和桌面应用体验接近的应用。Knockout 使用 observers 来让界面保持和数据一致。

Knockout 提供了一系列可扩展的声明式绑定机制。

Knockout 绑定包含两个属性，name 和 value，使用冒号分隔，比如：

<span data-bind="text: myMessage"></span>

要在 Konckout 中使用 Spread.Sheets，需要自定义绑定。请见： http://knockoutjs.com/documentation 来获取和自定义绑定的相关信息。

Spread.Sheets 的绑定名称是： gc-spread-sheets。

示例代码

以下代码创建了自定义绑定。

JavaScript

//First define the binding value.
    //Defines ViewModel
        function Product(id, name, price, discontinued) {
             this.id = ko.observable(id);
             this.name = ko.observable(name);
             this.price = ko.observable(price);
             this.discontinued = ko.observable(discontinued);
        }
        var ViewModel = function (items) {
            this.items = ko.observableArray(items);
        };
    
        //Creates ViewModel
        var initialData = [
            new Product(104, "Computers", 262, false),
            new Product(95, "Washers", 709, true)
        ];
        var viewModel = new ViewModel(initialData);
    
        //Apply binding
        $(function () {
            ko.applyBindings(viewModel);
        });
    //Bind Spread.Sheets to the html element to use Knockout.
    <div id="ss" data-bind="gc-spread-sheets: {
                sheetCount: 1,
                tabStripVisible: false,
                sheets: [
                    {
                        data: items,
                        columns: [
                            { displayName: 'ID', name: 'id', size: 80},
                            { displayName: 'Name', name: 'name', size: 120},
                            { displayName: 'Price', name: 'price', size: 80},
                            { displayName: 'Discontinued', name: 'discontinued', size: 120}
                        ]
                    }
                ]
    
            }" style="width:100%; height:400px;border: 1px solid gray;"></div>

Page tree

在 Knockout 中使用 Spread.Sheets

示例代码