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记录的自定义命令。要包含一个命令列，该列将在列单元格中呈现一个用于触发命令的按钮：

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

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

<code> >
<
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
>/<code>

列虚拟化

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

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

要启用虚拟列：

<code>$(
"#grid"
).kendoGrid({
scrollable: {
virtual
: 
"columns"
}
});/<code>

要同时启用虚拟列和行：

<code>$(
"#grid"
).kendoGrid({
scrollable: {
virtual
: 
"rows, columns" 

}
});

/<code>

關鍵字: details kendo title