一个简单的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':' ...
随机推荐
- Python kmean
# -*- coding: utf-8 -*-from sklearn.cluster import KMeansfrom sklearn.externals import joblibimport ...
- JAVA常见算法题(三十四)---计算加密之后的电话号码
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的, 加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. 求加密之后的 ...
- JAVA常见算法题(三十三)---求子串在字符串中出现的次数
计算某字符串中子串出现的次数. public static void main(String[] args) { String s1 = "adcdcjncdfbcdcdcd"; ...
- 显示Mysql中的所有用户
在mysql中如何显示所有用户? 1.show databases显示所有数据库 2.show tables显示所有数据表 3.select current_user();显示当前用户 4.显示所有用 ...
- 几个不同版本的framework改进
一些主要的演变过程及改进,还有很多部分不可能一一列出,下面是从1.1到4.0的一些主要改进: 一..NET Framework 1.1版本 1.ASP.NET移动控件 2.ADO.NET的改动 添加S ...
- Windows下安装和配置Apache2.2.22服务器+PHP5+Mysql5
接下来,笔者将WindowsXP(Sp3)下,搭建和配置php运行环境做一个简单的介绍: 1.安装准备 1.1Apache下载,官方地址(http://httpd.apache.org/),此处笔者下 ...
- iOS开发-Get请求，Post请求，同步请求和异步请求
标题中的Get和Post是请求的两种方式,同步和异步属于实现的方法,Get方式有同步和异步两种方法,Post同理也有两种.稍微有点Web知识的,对Get和Post应该不会陌生,常说的请求处理响应,基本 ...
- Android UI-仿微信底部导航栏布局
现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如 ...
- STL List::sort() 解析
看侯捷翻译那本<STL源码剖析>中list内置sort的算法,书中注释说是quick sort,看了半天没看明白, template <class T, class Alloc> ...
- 【北京】低价出售C/C++经典书籍
都非常新 C++程序设计 5元 高质量C/C++编程指南 8元 C++对象模型 10元 STL源代码剖析 12元 深入浅出MFC 10元 设计模式 10元 C++ primer 8元 面向对象 ...