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

kendoui

浏览: 27713 次
性别:
来自: 上海

最近访客更多访客>>

xjsimon

guyu152

zlwei666

荒古小幽

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Grid

kendoui jquery extjs kendo

效果展示（效果截图采用最新 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

分享到：