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
分享到:
相关推荐
Laravel开发-laravel-kendo-ui 用于Laravel的Kendo UI包
前端项目-kendo-ui-core,kendo ui是用html5和javascript构建网站和应用程序所需的一切,kendoui core是kendoui的免费开源版本,它提供对web最佳ui小部件和关键框架功能的访问,对于开发web和移动设备的良好体验至关...
演示版先决条件下载依赖项并运行kendo-ui-for-vue演示项目时需要-用于运行vue.js演示的轻量级开发服务器安装NodeJS之后,您可以通过npm (节点程序包管理器)获取live-server工具。 在Command Prompt输入以下命令: ...
kendo-ui 库的程序网格滚动。 支持本地和远程数据源,网格的虚拟模式。 一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , ...
cd kendo-ui-for-angular 查看幻灯片 在浏览器中打开slides / index.html或点击此 运行演示 打字稿 导航到项目并安装依赖项。 cd demos/complete/typescript npm install 编译.ts文件 tsc 运行编译的文件 node ...
如果您已克隆存储库,请打开slides / kendo-ui jquery.pptx或直接签出幻灯片。 运行演示 操场 包含现场演示的样板代码。 如果要与演示者一起编码,请在首选的编辑器中准备好该文件夹。 培训过程中将对设置进行说明。...
标准kendo ui-grid控件用法,文档形式。
前台kendo ui js grid 的增删改查,js部分。包括分页查询,服务及异常和激活
towerdefense-scala.zip,鳞毛塔
linguistics.zip,一个语言操作库:术语的变化和变化。Java语言:多语言复合,变化,变化。
unigui调用kendo-switch触发事件.rar
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。设置安装节点-https: 在控制台中运行“ npm install” 运行服务器“节点服务器” 在上打开应用
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
Laravel开发-laravel-kendo-server-filters Laravel Kendo服务器筛选器
KendoUI速查手册--中文
kendo-bootstrap-demo-master.zip
Laravel开发-laravel-kendo-helpers 将kendo参数解析为雄辩的查询
kendo-ui 库的附加网格编辑器。 一个演示是可在Github上页网页的剑道并网编辑。 基本用法 // create grid var grid = $grid . kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field ...
kendo-jalali-date-inputs 这是基于kendo Angular 2应用程序的可配置jalali(波斯语,khorshidi,shamsi,jalali)日期选择器。 屏幕截图 安装: 从npm下载: npm install @tiampersian/kendo-jalali-date-inputs ...