Web界面开发工具！Kendo UI for jQuery数据管理:列虚拟化
Kendo UI for jQuery R1 2020 SP2试用版下载
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
自定义列命令
您可以实现用于处理Grid记录的自定义命令。要包含一个命令列，该列将在列单元格中呈现一个用于触发命令的按钮：
- 通过列定义指定按钮的文本。
- 将按钮的click事件连接到JavaScript函数，该函数将接收相应的Grid数据项作为参数。
- 在函数定义中，处理命令。
有关可运行的示例，请参阅有关在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微信公众号，及时获取最新动态及最新资讯
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
2019-04-26 DevExpress v18.2版本亮点——Reporting篇（三）