写此博客的原因：在做项目时前端用的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="&nbsp;" 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去找吧

Kendo-Grid for Vue API and Template的更多相关文章

  1. Kendo Grid控件中将枚举值转为枚举名显示

    我们在开发过程中经常会遇到需要将枚举值转换成名称进行显示的情况.如下我们有这样一个数据源对象: var users = [ {id: 1, name: "similar1", st ...

  2. .Net Mvc4 Kendo Grid Demo

    看见人家项目中用到了Kendo Grid组件,感觉不错,于是就没有压制住自己内心的好奇心!嘿嘿,咱们开始吧,步骤很简单,理解起来也很容易. 首先我们创建一个空的ASP.NET MVC 4 Web 应用 ...

  3. kendo grid应用经验总结

    学习网址 https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview https://demos.telerik. ...

  4. Kendo Grid：将Edit button 移到grid view 得顶部

    因为kendo grid 得toolbar 里不包括Edit button,所以我们要先用template 创建一个自定义得edit button,然后再对这个button实现edit 功能. < ...

  5. You are using the runtime-only build of Vue where the template compiler is not available.

    使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...

  6. DevExpress Blazor组件全新来袭！增强Data Grid、TreeView API

    点击获取DevExpress v19.1.7最新完整版试用下载 DevExpress UI for Blazor即将在最新的v19.1.8中可用,此次更新发布包括DevExpress Blazor组件 ...

  7. vue API 知识点（1）---全局 API 总结

    1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...

  8. vue API 知识点（2）---选项总结

    一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...

  9. vue error:The template root requires exactly one element.

    error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...

随机推荐

  1. kuangbin专题专题四 Heavy Transportation POJ - 1797

    题目链接:https://vjudge.net/problem/POJ-1797 思路:请参考我列出的另一个题目,和这个题目要求的值相反,另一个清楚后,这个写的解释就明白了. 另一个类似题目的博客:h ...

  2. Sending Operations to Multiple Threads_翻译

    The speed and efficiency of a long-running, data-intensive operation often improves when you split i ...

  3. 7月18日刷题记录 二分答案跳石头游戏Getting

    通过数:1 明天就要暑假编程集训啦~莫名开心 今天做出了一道 二分答案题(好艰辛鸭) 1049: B13-二分-跳石头游戏(二分答案) 时间限制: 5 Sec  内存限制: 256 MB提交: 30  ...

  4. [原创]lvs+ospf+nginx实现高可用大流量web架构

    lvs+ospf+nginx实现高可用大流量web架构配置总概述 架构图: 配置如下: .quagga之zebra配置: # cat /etc/quagga/zebra.conf ! ! Zebra ...

  5. 个人永久性免费-Excel催化剂功能第89波-批量多图片转PDF

    前一篇展示了从PDF中提取到有用信息如图片.文本.表格等功能,部分人可能对自己手中的转PDF格式的保护性有所顾虑,此篇从反向角度,提供数据保护作用,让PDF文件的数据保护更彻底,让文本型的PDF文件彻 ...

  6. 《VR入门系列教程》之17---发布第一个应用

    发布运行     Unity可以支持多种目标平台的发布,包括:桌面端.Web端.移动端.游戏主机端.     发布运行之前的Cubes场景至桌面端,我们先选择File->Build Settin ...

  7. 开源分布式事务中间件Seata使用指南

    介绍 Seata 是阿里巴巴开源的分布式事务中间件,一种分布式事务解决方案,具有高性能和易于使用的微服务架构. 初衷 对业务无侵入:即减少技术架构上的微服务化所带来的分布式事务问题对业务的侵入 高性能 ...

  8. 14. 流、文件和IO

    前言 InputStream/OutStream流用来处理设备之间的数据传输 Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持 ...

  9. springBoot数据校验与统一异常处理

    概念 异常,在程序中经常发生,如果发生异常怎样给用户一个良好的反馈体验就是我们需要处理的问题.以前处理异常信息,经常都是给前端一个统一的响应,如数据错误,程序崩溃等等.没办法指出哪里出错了,这是一种对 ...

  10. IDEA 控制台输出日志无法grep

    不知从何时开始,我的IDEA控制台无法直接使用Grep插件来过滤输出日志了,这个插件真的挺好用的,不知道是升级后造成的还是我自己设置错误,反正在控制台右键无法打开grep来过滤: 在我开发过程中需要这 ...