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去找吧
