Kendo-Grid for Vue API and Template

2023-01-28 16:53:29

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

码农公寓

相关文章