Kendo UI Grid 基础功能介绍之一【Basic usage】

最新推荐文章于 2019-06-18 12:33:13 发布

iteye_4931

最新推荐文章于 2019-06-18 12:33:13 发布

阅读量103

点赞数

分类专栏： Grid 文章标签： kendoui jquery extjs kendo ViewUI

本文链接：https://blog.csdn.net/iteye_4931/article/details/82615379

版权

Grid 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果展示（效果截图采用最新 Material 主题）

参考代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.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: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                });
            </script>
        </div>
</body>
</html>

kendoui.io 中文社区： http://www.kendoui.io

原文链接：http://kendoui.io/blog/detail_18.html

iteye_4931

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Kendo UI Grid 基础功能介绍之一【Basic usage】

效果展示（效果截图采用最新 Material 主题）参考代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="styles/kendo.common.min.css"
复制链接

扫一扫