带有Auth Header的Kendo网格的Kendo Vue数据源
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有Auth Header的Kendo网格的Kendo Vue数据源相关的知识，希望对你有一定的参考价值。
我正在尝试在Vue.js中为Kendo Grid创建数据源。我需要放置auth标头，因此模板中的声明性语法不能解决我的问题。
下面的链接使得数组成为可能，但我需要一个带有AJAX调用或承诺的示例（Axios一个是完美的）。
好吧，所以文档有点不稳定，但我设法在Vue中获得一个自定义函数，就像在简单的Kendo UI数据源中一样。请看这个演示以供参考：http://dojo.telerik.com/uXELIh
这是声明式和自定义方法的混合，因此看起来有点奇怪。 （我之前从未使用过VUE包装器）
而不是transport-read-url="uri/to/somewhere"属性只是定义一个transport-read="readData"属性。
<kendo-datasource ref="datasource1"
:transport-read="readData"
:schema-model-id="'ProductID'"
:schema-model-fields="schemaModelFields"
:batch='true'
:page-size='20'>
</kendo-datasource>
然后创建readData方法：
new Vue({
el: '#app',
data: {
schemaModelFields: {
/*...*/
}
},
methods:
readData: function(e) {
//this simply returns one Product with a name Chai as a dummy
//set your Auth headers here, do the request and then pass
//the data in the e.success method as a parameter
e.success({ProductName: "Chai"})
}
}
/*...*/
});
这就是全部。
但是如果你有一个Auth标题，你需要预先添加所有的ajax请求，我建议你使用$.ajaxSetup()（How can I add a custom HTTP header to ajax request with js or jQuery?）。这样可以省去每次执行读取，更新，创建和删除操作的麻烦。
$.ajaxSetup({
headers: { 'x-my-custom-header': 'some value' }
});
今天Telerik的支持得到了更为清晰的答案。它让世界变得更美好:)
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-vue-ui/wrappers/dropdownlist/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-all-vue-wrapper/dist/cdn/kendo-all-vue-wrapper.min.js"></script>
</head>
<body>
<div id="example">
<div id="app" class="demo-section k-content">
<h4>Find a product</h4>
<kendo-datasource ref="datasource"
:type="'odata'"
:server-filtering="true"
:transport-read="{ url: 'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products', beforeSend: onBeforeSend }">
</kendo-datasource>
<kendo-dropdownlist ref="dropdownlist"
:data-text-field="'ProductName'"
:filter="'contains'"
:auto-bind="true"
:data-source-ref="'datasource'">
</kendo-dropdownlist>
</div>
</div>
<style>
.demo-section .k-dropdown {
width: 100%;
}
</style>
<script>
new Vue({
el: '#app',
methods: {
onBeforeSend: function(xhr) {
var token = "asd81237hdbsjkfh234uygr38fg73";
xhr.setRequestHeader('Authorization', 'Bearer ' + token)
}
}
})
</script>
</body>
</html>
有点痛苦，但我能够在Marco的帮助下做到这一点
这是代码
<template>
<div>
<kendo-datasource ref="datasource1"
:transport-read="readData"
:batch='true'
:page-size='20'>
</kendo-datasource>
<kendo-grid :height="550"
:data-source-ref="'datasource1'"
:pageable='true'>
</kendo-grid>
</div>
</template>
<script>
export default {
name: 'grid',
computed: {
token () {
return this.$store.state.access_token
}
},
methods: {
readData: function (e) {
console.log(this.token)
var tkn= this.token
$.ajax({
url: 'http://127.0.0.1/AssetExtranet.WebAPI2/api/Vw_Hmn_Branch',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + tkn)
},
dataType: 'json',
success: function (data) {
e.success(data)
},
type: 'GET'
})
}
}
}
</script>
感谢Marco和Vue是完美而超级快的。在Angular 2,3,4,5 ......混乱之后与Vue合作是一件令人高兴的事。
以上是关于带有Auth Header的Kendo网格的Kendo Vue数据源的主要内容，如果未能解决你的问题，请参考以下文章