写此博客的原因：在做项目时前端用的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. [Spring-Cloud-Alibaba] Sentinel 整合RestTemplate & Feign

    Sentinel API Github : WIKI Sphu (指明要保护的资源名称) Tracer (指明调用来源,异常统计接口) ContextUtil(标示进入调用链入口) 流控规则(针对来源 ...

  2. JavaScript作用域及预编译

    几乎所有的编程语言都可以存储,访问,修改变量,那在JavaScript中这些变量放在那里?程序如何找到他们? js被归类于解释执行语言,但事实上他也是一门编译语言,因为他也要编译,但于传统的编译语言不 ...

  3. mysql数据库建表分类字段--尽量少用字符串--原因探索

    虽然一直都知道,类型 之类的字段 直接用字符窜会很方便,不过最好还是不要用字符串:但是也不是特别清楚为什么不要用,时间久了 就忍不住用一下字符窜试试,这一试 还挺好用的,吓得我 感觉探究了一下 为什么 ...

  4. Excel催化剂开源第21波-使用Advanced Installer打包VSTO几个注意问题

    STO项目开发完毕完,最终需要分发给用户,需要Excel催化剂用的是Clickonce发布方式,但也面临到部分用户环境要求太高,设置过程太繁锁,而要求有一些简单的安装方式,用打包工具将其打包为一个EX ...

  5. David与Vincent的博弈游戏[树型DP]

    \(\mathcal{Description}\) \(\mathcal{Solution}\) 根据题意,我们知道 根节点深度为1,深度为 奇数 的节点由\(David\)移动,我们称为\(D\)点 ...

  6. java：选择排序法对数组排序

    最近想练一练Java的算法,然后碰到LeetCode上一道从排序数组删除重复项的小题,刚开始没看到是从排序数组中,就乱写,其实要是排序树组,就比乱序的感觉上好写多了.然后就想回顾下冒泡法对数组排序,凭 ...

  7. 问题解决：Maven execution terminated abnormally (exit code 1)

    Maven execution terminated abnormally (exit code 1) 修改setting.xml中的镜像位置 如下就可以了 <mirror> <id ...

  8. Adaboost原理推导

    Adaptive Boosting是一种迭代算法.每轮迭代中会在训练集上产生一个新的学习器,然后使用该学习器对所有样本进行预测,以评估每个样本的重要性(Informative).换句话来讲就是,算法会 ...

  9. TensorFlow（1）-基础知识点总结

    1. tensorflow简介 Tensorflow 是 google 开源的机器学习工具,在2015年11月其实现正式开源,开源协议Apache 2.0. Tensorflow采用数据流图(data ...

  10. JavaSE总结（一）

    一.Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年 ...