Kendo UI：Grid 表格组件

最新推荐文章于 2023-02-08 09:44:04 发布

菜鸟界的菜鸟

最新推荐文章于 2023-02-08 09:44:04 发布

阅读量566

点赞数

分类专栏： Kendo UI 文章标签： jquery

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

版权

Kendo UI 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

官网：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排序，并选中第二行。