Kendo UI：Grid 表格元件

菜鳥界的菜鳥發表於2020-10-27
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>

效果：


注：點選表頭以firstName排序，並選中第二行。

相關文章