写此博客的原因：在做项目时前端用的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. WinForm控件之【CheckedListBox】

    基本介绍 复选框列表控件,以复选框的形式将一个或多个项列表展示,从目前的情况来看应用非常有限并不广泛. 常设置属性.事件 CheckOnClick:值为true时单击项即可更改项的勾选状态,值为fal ...

  2. Pygame安装问题

    1.首先使用如下命令: conda install -c https://conda.anaconda.org/quasiben pygame 测试报错: >>> import py ...

  3. python爬虫笔记之爬取足球比赛赛程

    目标:爬取某网站比赛赛程,动态网页,则需找到对应ajax请求(具体可参考:https://blog.csdn.net/you_are_my_dream/article/details/53399949 ...

  4. ehcache的使用 Shiro与Ehcache的结合（附：EhcacheUtils）

    ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...

  5. Supalle-Admin-Layout，一个PC端和手机端都合适用的后台页面模板

    Supalle-Admin-Layout主要使用有Vue.Element-UI.layui-icon,Ajax实现采用Fetch(是有这个打算,不过目前是jQuery.). 源码地址:https:// ...

  6. MVC WebApi 实现Token验证

    基于令牌的认证 我们知道WEB网站的身份验证一般通过session或者cookie完成的,登录成功后客户端发送的任何请求都带上cookie,服务端根据客户端发送来的cookie来识别用户. WEB A ...

  7. IO流总结1

    一.什么是流? 流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接收端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由地控制文件.内存.IO设备等数据的流向. ...

  8. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

  9. Eclipse 设置黑色主题

    Eclipse 设置为黑色主题,不仅看起来炫酷,更重要的是对于长期盯着电脑的程序猿来说对眼睛更好些. 先看下效果: 下面以Eclipse Luna 为例,说说 Eclipse 设置为黑色主题的方法(P ...

  10. Vue中动态（import 、require）显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...