写此博客的原因：在做项目时前端用的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. sql server编写通用脚本实现获取一年前日期的方法

    问题: 在数据库编程开发中,有时需要获取一年前的日期,以便以此为时间的分界点,查询其前后对应的数据量.例如:1. 想查询截止到一年前当天0点之前的数据量,以及一年前当天0点开始到现在的数据量.2. 想 ...

  2. infiniband install driver

    硬件:Mellanox InfiniBand,主要包括 HCA(主机通道适配器)和交换机两部分 软件:CentOS 6.4 MLNX_OFED_LINUX-2.1-1.0.0-rhel6.4-x86_ ...

  3. JQuery学习笔记（3）——节点操作 节点查找

    插入节点 内部插入 所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入. append() prepend() appendTo() prependTo() append和prep ...

  4. UVA12657 Boxes in a Line:题解

    题目链接:https://www.luogu.org/problemnew/show/UVA12657 分析: 此题使用手写链表+模拟即可.(其实可以用list,而且更简便,但是会大大的超时) 肯定是 ...

  5. 实现一个代码自动生成（一）：模板引擎Freemarker

    目录 前言 模板引擎FreeMarker 前言 在现在的开发当中,代码生成已经是必不可少的一个功能,每个公司都会有自己的一套定制的项目骨架,而实现代码自动生成,模板引擎是必不可少的,所以在这篇博客中, ...

  6. Excel催化剂开源第41波-网抓网络采集类库及工具分享

    在VBA开发网抓程序中,会用到xmlhttp/winHttp.winHttprequest.5.1等组件,当时笔者也是这样进入了网抓领域的,这些都是非常过时的东西,在.Net的开发中,有大量的更好用的 ...

  7. Tiny Counting

    也许更好的阅读体验 样例一 输入 4 1 4 3 2 输出 3 样例二 输入 5 9 1 0 0 5 输出 8 题解 这是本人自己想了2个半小时才想出来的方法,稍稍有点复杂但是很好理解 题目的意思就是 ...

  8. 你真的了解 Cookie 和 Session 吗

    我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...

  9. 【Arduino】66种传感器模块系列实验（2）---光敏电阻模块

    实验二:光敏电阻传感器模块我手里这块是三针版的,挺秀气吧 光敏电阻是用硫化隔或硒化隔等半导体材料制成的特殊电阻器,其工作原理是基于内光电效应.光照愈强,阻值就愈低,随着光照强度的升高,电阻值迅速降低, ...

  10. 最短代码实现包含100个key的字典，且每个value值不同

    最短代码实现包含100个key的字典,且每个value值不同 {x:x*2 for x in range(100)}