Kendo UI for jQuery数据管理使用教程:自定义列命令 & 列虚拟化

原创|使用教程|编辑:龚雪|2020-04-24 09:15:31.360|阅读 25 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文主要为大家介绍如何实现自定义列命令,以及列的虚拟化。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

Kendo UI for jQuery R1 2020 SP2试用版下载

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

自定义列命令

您可以实现用于处理Grid记录的自定义命令。要包含一个命令列,该列将在列单元格中呈现一个用于触发命令的按钮:

  1. 通过列定义指定按钮的文本。
  2. 将按钮的click事件连接到JavaScript函数,该函数将接收相应的Grid数据项作为参数。
  3. 在函数定义中,处理命令。

有关可运行的示例,请参阅有关在Grid中实现自定义命令的演示:

<!DOCTYPE html>
<html>
<head>
<title></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>
<script src=”../content/shared/js/people.js”></script>

<div id=”example”>
<div id=”grid”></div>

<div id=”details”></div>

<script>
var wnd,
detailsTemplate;

$(document).ready(function () {
var grid = $(“#grid”).kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: “FirstName”, title: “First Name”, width: “140px” },
{ field: “LastName”, title: “Last Name”, width: “140px” },
{ field: “Title” },
{ command: { text: “View Details”, click: showDetails }, title: ” “, width: “180px” }]
}).data(“kendoGrid”);

wnd = $(“#details”)
.kendoWindow({
title: “Customer Details”,
modal: true,
visible: false,
resizable: false,
width: 300
}).data(“kendoWindow”);

detailsTemplate = kendo.template($(“#template”).html());
});

function showDetails(e) {
e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest(“tr”));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>

<script type=”text/x-kendo-template” id=”template”>
<div id=”details-container”>
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, “MM/dd/yyyy”) #</dt>
</dl>
</div>
</script>

<style type=”text/css”>
#details-container
{
padding: 10px;
}

#details-container h2
{
margin: 0;
}

#details-container em
{
color: #8c8c8c;
}

#details-container dt
{
margin:0;
display: inline;
}
</style>
</div>
</body>
</html>

列虚拟化

网格提供用于虚拟化其列的内置选项。 要启用它,请将scollable.virtual属性设置为“ columns”。结果,将不会呈现网格当前可见的aria之外的列,这将改善呈现性能。 当执行滚动时,列的可视子集会相应更改。

注意:为了正常工作,列虚拟化要求您设置columns.width。

要启用虚拟列:


$("#grid").kendoGrid({
scrollable: {
virtual: "columns"
}
});


要同时启用虚拟列和行:


$("#grid").kendoGrid({
scrollable: {
virtual: "rows, columns"
}
});



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

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

Kendo UI for jQuery

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

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat