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/
												


											
SpreadJS 中应用 KnockoutJS 技术的更多相关文章
	

    
								
  1. tp中使用分页技术
		
    1 public function showList() { $m_ld = D ( 'guangxi_ld' ); $page = I ( 'get.p', 1 ); // 在配置中获取分页值 $p ...
    
		
    2. 
						
  2. Web 开发中应用 HTML5 技术的10个实例教程
		
    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
    
		
    3. 
						
  3. 【python游戏编程之旅】第七篇---pygame中的冲突检测技术
		
    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 上一个博客我们一起学习了pygame中的Sprite模块和如何加载动画:http://www.cnblogs ...
    
		
    4. 
						
  4. .net中对象序列化技术浅谈
		
    .net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储 ...
    
		
    5. 
						
  5. Unity教程之再谈Unity中的优化技术
		
    这是从 Unity教程之再谈Unity中的优化技术 这篇文章里提取出来的一部分,这篇文章让我学到了挺多可能我应该知道却还没知道的知识,写的挺好的 优化几何体   这一步主要是为了针对性能瓶颈中的”顶点 ...
    
		
    6. 
						
  6. GPRS  GPRS（General Packet Radio Service）是通用分组无线服务技术的简称，它是GSM移动电话用户可用的一种移动数据业务，属于第二代移动通信中的数据传输技术
		
    GPRS 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . GPRS(General Packet Radio Service)是通用分组无线服务技术的简称,它是GSM移动电话用户可 ...
    
		
    7. 
						
  7. Android中直播视频技术探究之---基础知识大纲介绍
		
    一.前言 最近各种视频直播app到处都是,各种霸屏,当然我们也是需要体验的,关于视频直播的软件这里就不介绍了,在不是技术的人来看,直播是一种潮流,是一种娱乐方式,但是作为一个高技术的,我们除了看看,更 ...
    
		
    8. 
						
  8. Android中Java反射技术的使用示例
		
    import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...
    
		
    9. 
						
  9. 【.Net免费公开课】--授技.Net中的高帅富技术-"工作流"
		
    课程简介 免费公开课主题: .Net中的高帅富技术-“工作流” 公开课开课时间:     10月17日 19:30--21:30 公开课YY频道:       85155393   (重要:公开课QQ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android之 -WebView实现离线缓存阅读
			
    前言 本篇博客要实现的是一个离线下载和离线阅读的功能,这是很多阅读类app都常见的一个功能,典型的应用就是网易新闻.什么是离线下载?其实这个概念是比较模糊,是离线之后下载呢,还是下载之后离线,但稍微有 ...
    
			
    2. 
						
  2. Spark源码系列（八）Spark Streaming实例分析
			
    这一章要讲Spark Streaming,讲之前首先回顾下它的用法,具体用法请参照<Spark Streaming编程指南>. Example代码分析 val ssc = )); // 获 ...
    
			
    3. 
						
  3. Spark和hadoop的关系
			
    1. Spark VSHadoop有哪些异同点? Hadoop:分布式批处理计算,强调批处理,常用于数据挖掘和数据分析. Spark:是一个基于内存计算的开源的集群计算系统,目的是让数据分析更加快速, ...
    
			
    4. 
						
  4. mshadow笔记
			
    矩阵维度表示和正常相反. a[2][3],行2列3,a.shape.shape_[0]=3,a.shape.shape_[1]=2. pred.Resize( Shape2( batch_size,  ...
    
			
    5. 
						
  5. Linux中vi显示中文乱码的问题
			
    由于在windows下默认是gb编码,而我的vim默认是utf-8(gedit默认也是utf-8),所以打开会成乱码.修改了一下配置文件,使vi支持gb编码就好了.$vi ~/.vimrclet &a ...
    
			
    6. 
						
  6. Codeforces Round #184 (Div. 2) E. Playing with String（博弈）
			
    题目大意 两个人轮流在一个字符串上删掉一个字符,没有字符可删的人输掉游戏 删字符的规则如下: 1. 每次从一个字符串中选取一个字符,它是一个长度至少为 3 的奇回文串的中心 2. 删掉该字符,同时,他 ...
    
			
    7. 
						
  7. Oracle Purchasing QUESTIONS AND ANSWERS
			
    Topic Summary Topic: CORRECTIONS: Corrections Topic: DELIVER: Receiving Delivery Topic: DROPSHIP: Dr ...
    
			
    8. 
						
  8. CentOS7之VMware安装
			
    选择CentOS的原因 起初也了解了几个linux的发行版,最终决定选择centOS的原因却很简单:阿里云和腾讯云提供的云服务器中centos的版本最多.  VMware12的安装 下载地址:http ...
    
			
    9. 
						
  9. 轻量级linux CRUX安装笔记
			
    感谢hrdd的分享,原文出处:http://wxdhrdd.blog.163.com/blog/static/120500564200952592240867/ 以下是对原文进行补充 crux的安装: ...
    
			
    10. 
						
  10. linux下如何修改weblogic console登陆的用户名和密码
			
    1. 执行安装目录下config.sh ./config.sh 2.选择  2|Extend an existing WebLogic configuration 3. 别的一路跳过,到修改secur ...
    
			
    11.