文章出處
文章列表
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 特性請參考：http://wijmo.gcpowertools.com.cn/
文章列表
全站熱搜
留言列表
