Kendo-Grid for Vue API and Template
写此博客的原因：在做项目时前端用的vue，后端用的jfinal。在前端veu中调用了kendo grid插件，但是在官方文档中对kendo grid for vue 的api和template都不太详细，大多都是for jquery的。在我想要使用回调函数和增加一些属性的时候，遇见了麻烦，后来在我不懈的努力和同事的帮助下终于解决了我的问题。
For Vue的官方template
<div id="vueapp" class="vue-app">
<kendo-datasource ref="remoteDataSource"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
:transport-read-data-type="'jsonp'"
:transport-read-type="'GET'"
:transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
:transport-update-data-type="'jsonp'"
:transport-update-type="'GET'"
:schema-model-id="'ProductID'"
:schema-model-fields="schemaModelFields"
:page-size='20'>
</kendo-datasource>
<kendo-grid :height="600"
:data-source-ref="'remoteDataSource'"
:pageable='true'
:editable="'inline'">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
<kendo-grid-column :command="['edit']" title=" " width="250px"></kendo-grid-column>
</kendo-grid>
</div>
For Jquery的官方template
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
</script>
</div>
</body>
</html>
两者之间的联系
1.Jquery中的dataSouce属性的申明都在Vue中的<kendo-dataSource>中生命
2.Jquery中的层级关系，在vue中都用“-”来连接 如:
Jquery中： vue中
transport{ transport-read="www.baidu.com
read:www.baidu.com
}
schema{ shcema-model-field
model{
filed
}
}
VUE中的注意事项
schema-data="'data'" 一定到单引号，表示直接从response对象中的data中绑定。
kendo-grid中的属性
官网API去找吧Kendo-Grid for Vue API and Template的更多相关文章
- Kendo Grid控件中将枚举值转为枚举名显示
我们在开发过程中经常会遇到需要将枚举值转换成名称进行显示的情况.如下我们有这样一个数据源对象: var users = [ {id: 1, name: "similar1", st ...
- .Net Mvc4 Kendo Grid Demo
看见人家项目中用到了Kendo Grid组件,感觉不错,于是就没有压制住自己内心的好奇心!嘿嘿,咱们开始吧,步骤很简单,理解起来也很容易. 首先我们创建一个空的ASP.NET MVC 4 Web 应用 ...
- kendo grid应用经验总结
学习网址 https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview https://demos.telerik. ...
- Kendo Grid：将Edit button 移到grid view 得顶部
因为kendo grid 得toolbar 里不包括Edit button,所以我们要先用template 创建一个自定义得edit button,然后再对这个button实现edit 功能. < ...
- You are using the runtime-only build of Vue where the template compiler is not available.
使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...
- DevExpress Blazor组件全新来袭！增强Data Grid、TreeView API
点击获取DevExpress v19.1.7最新完整版试用下载 DevExpress UI for Blazor即将在最新的v19.1.8中可用,此次更新发布包括DevExpress Blazor组件 ...
- vue API 知识点（1）---全局 API 总结
1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...
- vue API 知识点（2）---选项总结
一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...
- vue error:The template root requires exactly one element.
error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...
随机推荐
- MMM 状压dp学习记
状压dp学习记 by scmmm 开始日期 2019/7/17 前言 状压dp感觉很好理解(本质接近于爆搜但是又有广搜的感觉),综合了dp的高效性(至少比dfs,bfs优),又能解决普通dp难搞定的问 ...
- idea的安装与配置及基本用法
Intellij IDEA 确实使用更加方便,由于目前只用到maven项目,所以此处只记录maven项目的配置. 一.配置idea前准备: 1.下载idea安装包.jdk安装包.maven安装包.gi ...
- select模块(I/O多路复用)
0709自我总结 select模块 一.介绍 Python中的select模块专注于I/O多路复用,提供了select poll epoll三个方法(其中后两个在Linux中可用,windows仅支持 ...
- 面向对象和pickle模块结合
面向对象和pickle模块相关 1.面向对象: class 类名: def init(self,参数1,参数2): self.对象的属性1 = 参数1 self.对象的属性2 = 参数2 def 方法 ...
- Apache Httpd 启用重定向 rewrite
1.启用模块 由:#LoadModule rewrite_module modules/mod_rewrite.so 更改为:LoadModule rewrite_module modules/mod ...
- python查漏补缺 --- 模块及异常
1.方法定义好之后,如,def test(x) : ,此时将方法名赋值给一个新的变量,那么该变量等同于方法,可以具备test方法内部的全部功能2.导包的时候,可以使用as关键字在不同的名称下导入模块或 ...
- UIRefreshControl 问题
这两天在学UIRefreshControl,主要参照的是github上的一个Demo(网址 https://github.com/evgeniymikholap/UIRefreshControlExa ...
- oracle-11g2下载安装笔记
一.下载链接地址 http://download.oracle.com/otn/nt/oracle11g/112010/win64_11gR2_database_1of2.zip http://dow ...
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- Python学习系列（四）Python 入门语法规则2
Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, ...