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的模版中只有能一个根节 ...
随机推荐
- 彻底搞清楚c#中的委托和事件
一.什么是委托呢? 听着名字挺抽象,确实不好理解.面试官最喜欢考察这个,而且更喜欢问:“委托和事件有何异同?”.如果对一些知识点没有想明白,那么很容易被绕进去.研究任何事物,我们不妨从它的定义开始,委 ...
- 学习11:内容# 1.函数名第一类对象及使用 ***** # 2.f格式化 *** # 3.迭代器 **** # 4.递归 ****
目录 1.第一类对象 -- 特殊点 2.f.格式化 Python3.6版本以上才能够使用 3.迭代器 迭代 : 器 : 工具 4.递归 1.第一类对象 -- 特殊点 1.可以当做值被赋值给变量 def ...
- I/O：DataInput
DataInput: boolean readBoolean() :读取一个输入字节,如果该字节不是零,则返回 true,如果是零,则返回 false. byte readByte() :读取并返回一 ...
- [原创]实现MongoDB数据库审计SQL语句的脚本
功能:实现具体显示mongodb数据库表操作语句的状态和情况,使用awk和shell实现抓取和分析处理.脚本内容如下: #!/bin/bash if [ $# == 0 ];then echo &qu ...
- 【HDU - 3533】Escape（bfs）
Escape Descriptions: 一个人从(0,0)跑到(n,m),只有k点能量,一秒消耗一点,在图中有k个炮塔,给出炮塔的射击方向c,射击间隔t,子弹速度v,坐标x,y问这个人能不能安全到 ...
- Eclipse中Cannot nest src folder解决方法
错误示例: : Java Model Status [Cannot nest output folder 'xxx/bin/main' inside output folder 'xxx/bin'] ...
- Excel催化剂开源第43波-Excel选择对象Selection在.Net开发中的使用
Excel的二次开发有一极大的优势所在,可以结合用户的交互进行程序的运行,大量用户的交互,都是从选择对象开始,用户选择了单元格区域.图形.图表等对象,之后再进行程序代码的加工处理,生成用户所需的最终结 ...
- 个人永久性免费-Excel催化剂功能第98波-零代码零距离轻松接触并拥有金融大数据
数据产生价值的一个最突出的领域-金融领域,股票.证券.上市公司财务报表等,多少人在其中发掘出宝贵的数据价值.今天Excel催化剂联合Tushare金融大数据平台,让这一切的数据都能成为你我普通人零代码 ...
- echarts在react项目中的使用
数据可视化在前端开发中经常会遇到,万恶的图表,有时候总是就差一点,可是怎么也搞不定. 别慌,咱们一起来研究. 引入我就不多说了 npm install echarts 对于基础的可视化组件,我一般采用 ...
- 如何阅读zstack源码
个人的gitbook将会持续更新 https://www.gitbook.com/book/jingtyu/how-to-learn-zstack-code