一个简单的knockout.js 和easyui的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>
<script type="text/javascript">
//预编译函数， 可以定义在另一个js文件中
(function(){
//自定义绑定
ko.bindingHandlers.mydatagrid={
update:function (element, viewModelAccessor, allBindings) {
//得到当前绑定的model
var viewModel = viewModelAccessor();
$(element).datagrid({
url:viewModel.url,
columns:viewmodel.columns
})
}
}
})();
</script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>
<table id="tt" title="Basic DataGrid" style="width:700px;height:250px" data-bind="mydatagrid:grid">
</table>
<script type="text/javascript">
var viewmodel = function() {
this.grid={
url:'mydata.json',
columns:[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]
}
};
ko.applyBindings(new viewmodel());
<!--easyui的写法
$('#tt').datagrid({
url:'mydata.json', <!--跨域请求 在chrome的快捷方式上添加 --allow-file-access-from-files -->
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
-->
</script>
</body>
</html>
一个简单的knockout.js 和easyui的绑定的更多相关文章
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- 搭建一个简单的node.js服务器
第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- javascript常用开发笔记：一个简单强大的js日期格式化方法
前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- 一个简单的倒计时js插件
接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数. countdown({ 'end':' ...
随机推荐
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- WP8.1 VS iOS VS Android全方面大比拼
众所周知,苹果的OS和谷歌的Android系统都有着相对成熟的设计和较好的用户体验,而随着WP8.1的发布,微软WP系统在交互方面也有了很多改进和提升,而今天小编便为大家全面对比一下这三大系统. ...
- 在Xcode4.5中禁用ARC（Automatic Referencing Counting） 转
最近升级了xcode4.5,用上了ios6的SDK.但用着用着发现一个比较烦的问题,以前很多代码提示错误,发现原来因为xcode启用了ARC,当ARC启用后会自动在代码中加入retain.releas ...
- 嵌入式linux应用程序调试方法
嵌入式linux应用程序调试方法 四 内存工具 五 C/C++代码覆盖.性能profiling工具 四 内存工具 您肯定不想陷入类似在几千次调用之后发生分配溢出这样的情形. 许多小组花了许许多多时间来 ...
- 【Burnside定理】&【Pólya定理】
Burnside & Pólya (详细内容请参阅<组合数学>或2008年cyx的论文,这里只写一些我学习的时候理解困难的几个点,觉得我SB的请轻鄙视……如果有觉得不科学的地方欢迎 ...
- Redis:ERR operation not permitted
Redis服务开启之后: D:\Redis\redis>redis-server.exe redis.conf 那么另外开一个命令窗口 D:\Redis\redis>redis-cli.e ...
- SystemVerilog Event Scheduling Algorithm
While simulating System Verilog design and its test-bench including assertions, events has to be dyn ...
- OpenCV学习(22) opencv中使用kmeans算法
kmeans算法的原理参考:http://www.cnblogs.com/mikewolf2002/p/3368118.html 下面学习一下opencv中kmeans函数的使用. 首先我们 ...
- 动态改变UIPopupList选项（NGUI）
NGUI的UIPopupList 可以通过修改items属性来动态改变菜单选项: public class popListvahnge : MonoBehaviour { public UIPopup ...
- [android错误] Failed to install *.apk on device 'emulator-5554': timeout
[2014-06-26 15:35:42 - app] ------------------------------ [2014-06-26 15:35:42 - app] Android Launc ...