KendoUI —— 关于 KendoUI

最新推荐文章于 2024-10-13 11:59:45 发布

Liekkas_BX

最新推荐文章于 2024-10-13 11:59:45 发布

阅读量9k

点赞数 1

分类专栏：前端框架文章标签： kendoUI

本文链接：https://blog.csdn.net/qq_19865749/article/details/75271310

版权

前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

官网：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>

效果：

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