Kendo UI：Grid 表格组件_综合

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