一个简单的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>
相关文章
- 微信小程序一个js文件读取多个接口数据「建议收藏」
- JS面试题-js新增基本数据类型BigInt
- JS对象转数组_js怎么把数组转成对象
- 控制台禁用js_禁止直接访问js
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- js控制文本框只能输入中文、英文、数字与指定特殊符号详解编程语言
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- 妙用JS获取Oracle信息的快速方法(js获取Oracle)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- JS自动安装exe程序
- Js仿新浪微博首页内容滚动
- js实现的仿新浪微博完美的时间组件升级版
- js延迟加载改变JS的位置加快网页加载速度
- js获取url参数代码实例分享(JS操作URL)
- JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- 使用js实现一个可编辑的select下拉列表
- js中array的sort()方法使用介绍
- js正则表达式学习笔记之匹配字符串
- 用box固定长宽实现图片自动轮播js代码
- js获取日期:昨天今天和明天、后天