带有Auth Header的Kendo网格的Kendo Vue数据源

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有Auth Header的Kendo网格的Kendo Vue数据源相关的知识,希望对你有一定的参考价值。

我正在尝试在Vue.js中为Kendo Grid创建数据源。我需要放置auth标头,因此模板中的声明性语法不能解决我的问题。

下面的链接使得数组成为可能,但我需要一个带有AJAX调用或承诺的示例(Axios一个是完美的)。

Kendo UI Grid Data variable Vue.js

答案

好吧,所以文档有点不稳定,但我设法在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数据源的主要内容,如果未能解决你的问题,请参考以下文章

带有声明性编辑器模板的 Kendo 网格

如何使用列设置动态创建角剑道网格列?

带有复选框列的 Kendo Angular 2 网格

带有模板的 Kendo UI 网格编号列不会过滤

Kendo UI:Kendo 网格的惰性绑定

如何在kendo mvc中合并两个模板列?