-2

在剑道 UI 中，是否可以使用 Vue.js 中的变量中的数据加载网格？

4

2 回答 2

1

是的，您可以绑定到数据源属性，而不是使用数据源引用。这可以是一个 kendo 数据源的实例或一个简单的数组。

例如，这是默认的 demo，更改为绑定到对象数组。

var products = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18,
    "UnitsInStock": 39,
    "Discontinued": false
  },
  {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19,
    "UnitsInStock": 17,
    "Discontinued": false
  }, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "Discontinued": false
  }
];
new Vue({
  el: '#app',
  data: {
    products: products
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

  <script src="https://kendo.cdn.telerik.com/2017.3.1026/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">
      <kendo-grid :height="550" :data-source="products">
        <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 field="Discontinued" :width="120"></kendo-grid-column>
      </kendo-grid>
    </div>
  </div>
</body>

</html>

于 2017-11-22T23:51:45.913 回答
0

是的，有可能。在网格动作中，尝试 @Select实现一个函数OnSelect (e)。这就是您可以从 object 获取数据的方式e。

于 2018-08-31T22:54:41.987 回答