SpreadJS 文档
SpreadJS 文档 / 开发者指南 / JavaScript 框架 / 在Knockout中使用SpreadJS
在本主题中
    在Knockout中使用SpreadJS
    在本主题中

    SpreadJS支持Knockout。

    Knockout是一个JavaScript MVVM库,使用JavaScript和HTML可以更轻松地创建丰富的,类似于桌面的用户界面。 淘汰赛使用观察者使UI自动与基础数据模型保持同步,并提供一组功能强大且可扩展的声明性绑定。

    Knockout绑定包括两个项目,绑定名称和值,以冒号分隔。 例如:

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

    使用Knockout时,SpreadJS需要自定义绑定。 参考 https://knockoutjs.com/documentation 了解自定义绑定的更多信息。SpreadJS绑定名称为 gc-spread-sheets

    示例代码

    本示例创建一个自定义绑定。

    JavaScript
    复制代码
     //首先定义绑定值。
        //定义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);
            };
        
            //创建 ViewModel
            var initialData = [
                new Product(104, "Computers", 262, false),
                new Product(95, "Washers", 709, true)
            ];
            var viewModel = new ViewModel(initialData);
        
            //应用绑定
            $(function () {
                ko.applyBindings(viewModel);
            });
        //使用Knockout将SpreadJS绑定到html元素。
        <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>