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


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

 

你可能感兴趣的:(jquery,ExtJs,kendoui,Kendo)