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的模版中只有能一个根节 ...
随机推荐
- ADO.NET_包括DataReader和dataSet的使用
今天总结了一下ADO.NET编程中DataReader和dataSet两个比较重要的对象的使用,完成了combobox,listbox,以及fpSpread动态添加数据的测试,对使用sqlComman ...
- TF项目实战（基于SSD目标检测）——人脸检测1
SSD实战——人脸检测 Tensorflow 一 .人脸检测的困难: 1. 姿态问题 2.不同种族人, 3.光照 遮挡 带眼睛 4.视角不同 5. 不同尺度 二. 数据集介绍以及转化VOC: 1. F ...
- python 3.5学习笔记（第五章）
本章内容 1.什么是模块 2.模块的导入方法 3.搜索路径 4.重要标准库 一.什么是模块 1.模块本质上是一个以.py 结尾的python文件,包含了python对象定义和python语句. 2.模 ...
- MTSC2019第五届移动互联网测试开发大会PPT下载
关注公众号「软件测试大本营」后台回复「MTSC」或「测试开发大会」即可获取云盘下载地址及提取码. 注:PPT文件版权归相关撰写人所有,仅供学习交流,请勿用于任何商业用途,谢谢 前不久在北京举办了第五届 ...
- c语言进阶5-递归算法
一. 什么是递归 程序调用自身的编程技巧称为递归( recursion). 递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型 ...
- fjnu2016-2017 低程 PROBLEM B 捧杯
#include <iostream>#include <cmath>using namespace std; int _gcd(int x,int y){ return y= ...
- Java EE.JavaBean
JavaBean是一组可移植.可重用.并可以组装到应用程序中的Java类.一个Model类(属性+构造函数).
- OpenStack 初探（一） -- All-In-One模式部署（初学OpenStack必备）
OpenStack 初探(一) -- All-In-One模式部署(初学OpenStack必备) 一.操作前需了解: 1. OpenStack提供IaaS(基础设施即服务)服务,它是开源的云计 ...
- springboot整合mybatis时无法读取xml文件解决方法（必读）
转 http://baijiahao.baidu.com/s?id=1588136004120071836&wfr=spider&for=pc 在springboot整合myba ...
- 逆向MFC程序
目录 @ 1 MFC执行流程 1.1 环境支持 1.2 分析 1.3 实践探索 1.3.1 创建一个MFC程序 1.3.2 下关键断点并调试 1.4 转向MFC库源文件中观测 2 逆向 2.1 特征码 ...