KendoUI —— 关于 KendoUI

女爷i 2022-06-12 06:36 194阅读 0赞

官网：[http://www.telerik.com/kendo-ui][http_www.telerik.com_kendo-ui]

简介：KendoUI 是用jQuery 开发的UI 框架，主要用于各种数据展示。

经典示例：Grid 表格组件

代码：

<!DOCTYPE html>
    <html>
    <head>
        <title>Grid组件</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>
    <style type="text/css">
    #example{
        width: 500px; 
        margin: 0 auto;
    }
    </style>
    
    <div id="example">
        <div id="grid"></div>
        <script>
            var people = [ { firstName: "John",
                     lastName: "Smith",
                     email: "john.smith@telerik.com" },
                   { firstName: "Jane",
                     lastName: "Smith",
                     email: "jane.smith@telerik.com" },
                   { firstName: "Josh",
                     lastName: "Davis",
                     email: "josh.davis@telerik.com" },
                   { firstName: "Cindy",
                     lastName: "Jones",
                     email: "cindy.jones@telerik.com" }];
            $(document).ready(function () {
                $("#grid").kendoGrid({ 
                    /*传入的JSON对象设置Grid属性！*/
                    page:1,
                    pageSize : 10,              //每页显示个数
                    dataSource:people,
                    selectable:"multiple cell", //设置多列可选
                    filterable:true,            //设置过滤可用
                    sortable:true,              //设置排序可用
                    pageable:true,              //设置分页可用
                    
                });  
            });
        </script>
    </div>
    
    </body>
    </html>

效果：

![Center][]  
注：点击表头以firstName排序，并选中第二行。

[http_www.telerik.com_kendo-ui]: http://www.telerik.com/kendo-ui
[Center]: /images/20220612/a74d572839c746669456a7952b809618.png