SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新。关于KO的详细介绍、教程和文档请参考:http://knockoutjs.com/.
你可以通过以下步骤轻松在 SpreadJS 中应用 Knockout 技术:
1. 添加最新的 jQuery 引用, Wijmo 插件, Knockout .js 文件和 KO 关于 Wijmo 的扩展文件。
2. 创建 ViewModel 和 View:添加 JavaScript 定义数据和 UI 行为。创建标记创建 View 视图,可交互的UI。
3. 绑定 SpreadJS 插件到 ViewModel 和 KO.
添加以下引用到 <head> 标签下:
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script><!-- Knockout --><script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.1.0.js"></script><!-- SpreadJS CSS and script --><link href="http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /><link href="http://cdn.wijmo.com/spreadjs/gcfilter-ui.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /><link href="http://cdn.wijmo.com/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" /><script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.full.min.js" type="text/javascript"></script>
接下来创建视图和数据模型,在<head> 下 <script> 节点下添加以下代码:
function Pet(name, sales, price) {this.name = ko.observable(name);
this.sales = ko.observable(sales);
this.price = ko.observable(price);
}var initialData = [new Pet("Well-Travelled Kitten", 352, 75.95),new Pet("Speedy Coyote", 89, 190.00),new Pet("Furious Lizard", 152, 25.00),new Pet("Indifferent Monkey", 1, 99.95),new Pet("Brooding Dragon", 0, 6350),new Pet("Ingenious Tadpole", 3940, 0.35),new Pet("Optimistic Snail", 420, 1.50)];var PagedGridModel = function (items) {this.activeIndex = ko.observable(0);
this.items = ko.observableArray(items);
this.activeItem = ko.observable(this.items()[this.activeIndex()]);this.addItem = function () {
this.items.push(new Pet("New item", 0, 100));};};
创建 HTML Input 元素和 SpreadJS 插件,把下面标记添加到 Body 标签下:
<div><div><h3>Knockout List-Detail Binding Sample</h3><p>Name: <input type="text" data-bind="value: activeItem().name" /></p><p>Sales: <input type="value" data-bind="value: activeItem().sales" /></p><p>Price: <input type="value" data-bind="value: activeItem().price" /></p><br /><div id="ss" data-bind="dataSource: items()" style="position:relative; width:640px; height:300px; border:1px solid grey"></div></div></div>
现在创建 SpreadJS 实例并且绑定到 ViewModel ,通过 apllyBidings 方法应用 KO:
$("#ss").wijspread({ sheetCount: 1 });
var ss = $("#ss").wijspread("spread");var vm = new PagedGridModel(initialData);
ko.applyBindings(vm);
除此之外提供数据字段的包装,并且绑定初始化数据:
function name(item, value) {
if (arguments.length == 2) {
item["name"](value);} else {
value = item["name"]();return value;}}function sales(item, value) {
if (arguments.length == 2) {
item["sales"](value);} else {
value = item["sales"]();if (typeof (value) == "string" && value.length > 0) {value = parseInt(value);}return value;}}function price(item, value) {
if (arguments.length == 2) {
item["price"](value);} else {
value = item["price"]();if (typeof (value) == "string" && value.length > 0) {value = parseFloat(value);}return value;}}ko.bindingHandlers.dataSource = {init: function (element, valueAccessor, allBindingsAccessor, viewModel) {var ss = $("#" + element.id).wijspread("spread");ss.getActiveSheet().autoGenerateColumns = false;
ss.getActiveSheet().setDataSource(valueAccessor());var cis = [{ name: "name", value: name },{ name: "sales", value: sales },{ name: "price", formatter: "$#,##0.00", value: price }];ss.getActiveSheet().bindColumns(cis);var cc = ss.getActiveSheet().getColumnCount();for (var i = 0; i < cc; i++)
ss.getActiveSheet().setColumnWidth(i, 160);ss.invalidateLayout();ss.repaint();},update: function (element, valueAccessor, allBindingsAccessor, viewModel) {var ss = $("#" + element.id).wijspread("spread");ss.repaint();}};
最终效果如下:
Demo 下载:
更多关于 HTML5 Wijmo 特性请参考:/developer/wijmojs