Kendo Kendo 网格的 Vue 数据源与 Auth Header

Question

我正在尝试为 Vue.js 中的 Kendo 网格创建数据源。我需要放置 auth headers 以便模板中的声明性语法无法解决我的问题。

下面的 link 使数组成为可能，但我需要一个带有 AJAX 调用或承诺的示例（Axios 将是完美的）。

Answer 1

好的，所以文档有点不稳定，但我设法在 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 header，你需要在 all 前面添加你的 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' }
});

Answer 2

有点痛苦，但在 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 非常完美而且速度超快。在那之后使用 Vue 是一种乐趣 Angular 2,3,4,5... mess.

Answer 3

今天 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>

Kendo Kendo 网格的 Vue 数据源与 Auth Header

Kendo Vue datasource for Kendo grid with Auth Header

kendo-ui

vue.js

kendo-grid

kendo-datasource