初见kendo-ui

最新推荐文章于 2025-08-16 22:13:48 发布

yjz764297625

最新推荐文章于 2025-08-16 22:13:48 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

分类专栏： kendo-ui 文章标签： ui javascript ViewUI

本文链接：https://blog.youkuaiyun.com/yjz764297625/article/details/88347649

kendo-ui 专栏收录该内容

4 篇文章

订阅专栏

kendo-ui和Jquery easy-ui一样，是jquery的强大插件，可以实现很多漂亮可视化的界面。

下面是kendo-ui中grid的一个小例子。

index.html代码如下：


<!DOCTYPE html>
<html>
<head>
<title>Virtualization of local data</title>

<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">

<script src="javascript/jquery.min.js"></script>
<script src="javascript/kendo.web.min.js"></script>
<script src="javascript/console.js"></script>
<script src="javascript/people.js"></script>
</head>
<body>


	<div id="loading" class="demo-section" style="text-align: center">
		Generating test data...</div>
	<div id="example" class="k-content">

		<div id="grid"></div>
		<script>
                $("#loading").click(function() {
                    generatePeople(10, function(data) {
                        $("#loading").hide();

                        $("#grid").kendoGrid({
                            dataSource: {
                                data: data
                            },
                            height: 530,
                            scrollable: {
                                virtual: true
                            },
                            columns: [ { field: "Id", title: "ID", width: "70px" },
                                { field: "FirstName", title: "First Name", width: "130px" },
                                { field: "LastName", title: "Last Name", width: "130px" },
                                { field: "City", title: "City", width: "130px" },
                                { field: "Title", title: "Title", width: "130px" },
                                { field: "BirthDate", title: "BirthDate", width: "130px" },
                                { field: "Age", title: "age", width: "130px" },
                            ]
                        });
                    });
                });
            </script>
	</div>

</body>
</html>

运行结果如下：

[img]http://dl2.iteye.com/upload/attachment/0086/3404/17e180b5-5a2f-3389-b891-79e1d0db60b4.jpg[/img]

点击generate test data之后效果如下：

[img]http://dl2.iteye.com/upload/attachment/0086/3408/9d3e03cf-4fc8-357c-b622-264c69656988.jpg[/img]