`

初见kendo-ui

 
阅读更多
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>



运行结果如下:



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



  • 大小: 38.8 KB
  • 大小: 137.8 KB
分享到:
评论

相关推荐

    前端项目-kendo-ui-core.zip

    前端项目-kendo-ui-core,kendo ui是用html5和javascript构建网站和应用程序所需的一切,kendoui core是kendoui的免费开源版本,它提供对web最佳ui小部件和关键框架功能的访问,对于开发web和移动设备的良好体验至关...

    Laravel开发-laravel-kendo-ui

    "Laravel开发-laravel-kendo-ui"这个项目旨在为Laravel开发者提供一个便捷的方式,将Kendo UI集成到他们的项目中。这使得开发者能够利用Laravel的强大力量来处理后端逻辑,同时利用Kendo UI的丰富组件来优化前端用户...

    ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI

    Kendo UI 是一款由Telerik公司开发的前端开发框架,主要针对jQuery库进行了深度集成,提供了丰富的用户界面组件,使得开发者能够快速构建交互性强、视觉效果优秀的Web应用程序。"剑道UI"是Kendo UI的一个通俗别称,...

    wicket-kendo-ui-6.8.0.zip

    【标题】"wicket-kendo-ui-6.8.0.zip" 暗示了这是一个与Web开发相关的开源项目,具体来说是Wicket框架与Kendo UI库的结合。Wicket是一个基于Java的服务器端Web应用程序框架,它以其组件模型和强健的可测试性而受到...

    wicket-kendo-ui-6.13.1.zip

    【标题】"Wicket-Kendo-UI-6.13.1.zip" 是一个与Web开发相关的开源项目,其中包含了Wicket框架与Kendo UI的一个特定版本(6.13.1)的集成。Wicket是Java编程语言中的一个轻量级、组件化的Web应用程序框架,而Kendo ...

    kendo-ui-for-vue:Kendo UI培训材料

    演示版先决条件下载依赖项并运行kendo-ui-for-vue演示项目时需要-用于运行vue.js演示的轻量级开发服务器安装NodeJS之后,您可以通过npm (节点程序包管理器)获取live-server工具。 在Command Prompt输入以下命令: ...

    标准kendo ui-grid控件用法

    Kendo UI Grid是一款强大的数据网格组件,由Telerik公司开发,广泛应用于Web应用程序中,用于展示和操作结构化的数据。这个控件提供了丰富的功能,包括数据分页、排序、过滤、编辑、分组、汇总等,同时支持触摸设备...

    kendo-ui-js-grid.zip_Kendo_grid js

    Kendo UI是一个强大的JavaScript库,专门用于构建交互式的Web用户界面。它的核心组件之一就是Kendo UI Grid,一个功能丰富的数据网格控件,能够轻松处理数据的显示、编辑、排序、分页等操作。在"Kendo_grid js"这个...

    kendo-grid-scroll:程序网格滚动选择 kendo-ui 库。 自动支持网格的虚拟模式

    kendo-ui 库的程序网格滚动。 支持本地和远程数据源,网格的虚拟模式。 一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , ...

    Laravel开发-laravel-kendo-helpers

    在本文中,我们将深入探讨如何在 Laravel 开发中利用 `laravel-kendo-helpers` 这一工具,它专门设计用于将 Kendo UI 的参数解析为 Eloquent ORM(对象关系映射)的查询构建器,使得在 Laravel 应用中集成 Kendo UI ...

    kendo-ui-core

    Kendo UI Core 是 Kendo UI 的免费开源版本,可提供对 Web 最佳 UI 小部件和关键框架功能的访问,这对于开发出色的 Web 和移动体验至关重要。 剑道UI核心的特点 Kendo UI Core 是 Kendo UI 的免费开源子集。 下表...

    kendo-ui-for-angular

    cd kendo-ui-for-angular 查看幻灯片 在浏览器中打开slides / index.html或点击此 运行演示 打字稿 导航到项目并安装依赖项。 cd demos/complete/typescript npm install 编译.ts文件 tsc 运行编译的文件 node ...

    kendo-ui-for-jquery:Kendo UI培训材料

    如果您已克隆存储库,请打开slides / kendo-ui jquery.pptx或直接签出幻灯片。 运行演示 操场 包含现场演示的样板代码。 如果要与演示者一起编码,请在首选的编辑器中准备好该文件夹。 培训过程中将对设置进行说明。...

    kendoui | 剑道UI(最新版、完整实例、安装包)

    Kendo UI framework is developed by Telerik - a leading provider of UI components for web, desktop and mobile applications. Trusted by over 100,000 customers worldwide for our devotion to quality and ...

    unigui调用kendo-switch触发事件.rar

    这个压缩包"unigui调用kendo-switch触发事件.rar"显然涉及到了如何在Unigui应用中集成Kendo UI的Switch控件,并且处理其触发的事件。 Unigui是一个用于构建Web应用程序的框架,它允许开发者使用Delphi的VCL组件模型...

    kendo-bootstrap-demo-master.zip

    【kendo-bootstrap-demo-master.zip】是一个包含Kendo UI与Bootstrap集成示例的压缩包,主要用于展示如何在项目中结合这两个强大的前端开发框架。Kendo UI是Telerik公司提供的一个全面的JavaScript库,提供了丰富的...

    KendoUI速查手册--中文

    Kendo UI 是一款由 Telerik 公司开发的前端 JavaScript 框架,专门用于构建交互式的 Web 应用程序。这个“Kendo UI 速查手册”提供了全面且详细的中文指南,帮助开发者快速掌握和应用 Kendo UI 的各种组件、功能和...

    kendo-ui-npm-example:Kendo UI Core NPM软件包使用情况预览

    Kendo UI Core NPM软件包使用示例该存储库包含Kendo UI Core和Kendo UI Professional NPM软件包用法的预览。这些软件包包含commonjs模块格式的Kendo UI脚本。 javascript-browserify目录显示了如何将NPM软件包与...

    kendo-ui-dashboard:Kendo UI仪表板,具有Kendo UI小部件,Bootstrap和Angular JS

    kendo-ui-dashboard Kendo UI仪表板,具有Kendo UI小部件,Bootstrap和Angular JS。设置安装节点-https: 在控制台中运行“ npm install” 运行服务器“节点服务器” 在上打开应用

    Laravel开发-laravel-kendo-server-filters

    标题"**Laravel开发-laravel-kendo-server-filters**"所涉及的核心概念是将Kendo UI的数据过滤功能与Laravel后端进行集成,以便在服务器端处理数据筛选。这意味着前端用户通过Kendo UI组件进行的筛选操作将被发送到...

Global site tag (gtag.js) - Google Analytics