jQuery UI组件库Kendo UI for jQuery数据管理使用教程:ListView模板

翻译|使用教程|编辑:龚雪|2020-11-17 09:42:23.500|阅读 51 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Kendo UI ListView模板功能,欢迎下载最新版体验!

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

Kendo UI for jQuery R3 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

ListView使您可以使用模板来呈现其项目。

引用的模板显示服务设置的结果。

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
}
});

$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html())
});

下面的示例演示了建议方法的完整实现。

<div id="listView" style="max-height:400px;overflow:auto;"></div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>

<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
}
});

$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
</script>


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

Kendo UI for Angular

完整的Angular UI组件库,助力构建高性能的现代Angular应用。

Kendo UI Support for React

支持React Javascript框架,更快地构建更好的应用程序。

Kendo UI for Vue

创建响应式Web应用的完整UI组件库。

title
在线咨询
联系我们
TOP
在线客服系统
live chat