<!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的绑定的更多相关文章

  1. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  2. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

  3. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  4. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  5. javascript常用开发笔记：一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  6. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  7. 一个简单的Vue.js组件开发示例

    //创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...

  8. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

  9. 一个简单的倒计时js插件

    接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数. countdown({ 'end':' ...

随机推荐

  1. Tomcat6内存不足问题及解决方法

    1.Tomcat默认可以使用的内存为128MB,在较大型的应用项目中,这点内存是不够的,有可能导致系统无法运行.常见的问题是报Tomcat内存溢出错误,Out of Memory(系统内存不足)的异常 ...

  2. UCN（User-Centric Networks，用户中心网络）

    UCN(User-Centric Networks,以用户为中心的网络)是下一代移动通信网络(5G)的发展方向,目前尚处于初级发展阶段.2016年11月,IEEE SDN研究组(聚焦研发SDN.NFV ...

  3. HorizontalScrollView的使用演示样例

    MainActivity例如以下: package cc.cv; import android.os.Bundle; import android.view.LayoutInflater; impor ...

  4. MySQL冷知识

    问题:在网站后台添加了扩展字段后,对于数据库表不太熟悉的,可能会花较长时间查找,如何有效提高我们的工作效率呢? 解决方法:利用SQL语句来查询字段所在的表

  5. C++获得本机所有网卡的IP和MAC地址信息

    一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...

  6. sql server 将字符串分割成表函数 strsplitetotable

    在sql server里,调用存储过程时,经常需要将数据拼成字符串做为参数调用存储过程,而在储存过程中分割字符串虽然简单但麻烦,封装了该函数,可以将拼串分割成内存表返回,方便使用,返回的表字段从a,b ...

  7. 系统运维技巧（三）——利用dd命令临时增加交换分区

    有时会遇到内存不够用的情况,可以使用本文提供的方法进行临时增加交换分区. #制作交换分区——得到文件 [root@serv01 linux-2.6.38]# dd if=/dev/zero of=/s ...

  8. spring cloud 报错Error creating bean with name 'hystrixCommandAspect' ，解决方案

    spring cloud 升级到最新版 后,报错: org.springframework.beans.factory.BeanCreationException: Error creating be ...

  9. Java基础（二）：基本数据类型和变量类型

    一.java基本数据类型: 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间.内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. Java 的两 ...

  10. electron项目中使用jquery不生效的解决方法

    才开始接触electron的时候,本来想用bootstrap快速搞一个demo,无奈有些功能没法用,之后才意识到是jquery没发用,之后找了一些资料,比较简单的方式就是在引入jquery之前加入一下 ...