Kendo-Grid for Vue API and Template

最新推荐文章于 2025-06-24 09:10:58 发布

转载最新推荐文章于 2025-06-24 09:10:58 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/c-lover/p/11139428.html

文章标签：

#javascript #前端 #ViewUI

本文对比分析了在Vue与JQuery环境下KendoGrid插件的使用方法，详细介绍了两种环境下模板的差异及注意事项，尤其针对Vue环境下如何解决回调函数和属性增加的问题进行了深入探讨。

写此博客的原因：在做项目时前端用的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" />

    
    
    

</head>
<body>

        <div id="example">
            <div id="grid"></div>
            
</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去找吧

转载于:https://www.cnblogs.com/c-lover/p/11139428.html