製品版のみの機能
グリッド - パフォーマンス
igGrid コントロールは、パフォーマンスを改善するための複数のオプションおよび機能を提供します。
- 仮想化機能は、グリッドに大きなレコードセットがある場合に描画時間が改善されます。
- リモート ページング機能は、グリッドが各ページごとの小さい塊でサーバーのデータを要求することを許可します。
- リモート フィルタリング機能は、検索操作をサーバーで実行し、結果をクライアントに返します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
5000
10
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
<style>
.s-clearfix {
content: "";
display: table;
clear: both;
}
.w100 {
width: 100%;
}
.w33 {
width: 33.3%;
}
.mb10 {
margin-bottom: 10px;
}
.ml5 {
margin-left: 5px;
}
.min-173 {
min-width: 173px;
}
.pr30 {
padding-right:30px;
}
.border-box {
box-sizing: border-box;
}
.igui-filter-f-left {
float: left;
}
.igui-filter-f-right {
float: right;
}
.igui-filter-modul {
margin: 0 0 15px 0;
border:1px solid #f1f1f1;
padding: 10px;
}
.igui-filter-section {
margin-bottom: 20px;
}
.d-block {
display: block;
}
.igui-filter-checkbox label {
cursor: pointer;
}
</style>
</head>
<body>
<div class="w100 igui-filter-section s-clearfix">
<div class="w33 min-173 pr30 border-box igui-filter-f-left">
<div class="igui-filter-modul">
<div class="mb10 w100 s-clearfix">
<label class="igui-filter-f-left">行数: </label>
<span class="igui-filter-f-right" id="rowsLbl">5000</span>
</div>
<div id="dataCount"></div>
</div>
<div class="igui-filter-modul">
<div class="mb10 w100 s-clearfix">
<label class="igui-filter-f-left">列数: </label>
<span class="igui-filter-f-right" id="colsLbl">10</span>
</div>
<div id="colCount"></div>
</div>
</div>
<div class="min-173 w33 pr30 border-box igui-filter-f-left igui-filter-checkbox">
<div class="mb10 s-clearfix">
<input class="mr5 igui-filter-f-left" id="pagingCheck" type="checkbox"/>
<label class="ml5 igui-filter-f-right" for="pagingCheck">ページングを有効にする </label>
</div>
<div class="mb10 s-clearfix">
<input class="igui-filter-f-left" id="filteringCheck" type="checkbox" />
<label class="ml5 igui-filter-f-right" for="filteringCheck">フィルタリングを有効にする </label>
</div>
<div class="mb10">
<label class="mb10 d-block" for="virt">仮想化タイプ: </label>
<input id="virt" type="text" />
</div>
</div>
<div class="w33 igui-filter-f-left">
<div>
<button id="btnRefresh" type="button">グリッドをリバインド</button>
</div>
</div>
</div>
<table id="grid"></table>
<div class="api-viewer"></div>
<script>
var apiViewer = new $.ig.apiViewer();
$(function () {
var dataBind = true,
startRender,
endRender,
rowsRendering,
rowsRendered,
dataFetching,
dataFetched,
filtering,
paging,
virt,
opts = {};
function setUpOptions(virt, paging, filtering, colCount) {
var opts = {}, columns = [], features = [], cols;
columns.push({ headerText: "ID", key: "ID", dataType: "number", width: "200px" });
columns.push({ headerText: "First Name", key: "FirstName", dataType: "string", width: "200px" });
columns.push({ headerText: "Last Name", key: "LastName", dataType: "string", width: "200px" });
columns.push({ headerText: "Company", key: "Company", dataType: "string", width: "200px" });
columns.push({ headerText: "Email", key: "Email", dataType: "string", width: "200px" });
columns.push({ headerText: "Position", key: "Position", dataType: "string", width: "200px" });
columns.push({ headerText: "Age", key: "Age", dataType: "number", width: "200px" });
columns.push({ headerText: "Address", key: "Address", dataType: "string", width: "200px" });
columns.push({ headerText: "Phone", key: "Phone", dataType: "string", width: "200px" });
columns.push({ headerText: "Picture", key: "Picture", dataType: "string", width: "200px" });
columns.push({ headerText: "Is Active", key: "IsActive", dataType: "bool", width: "200px" });
columns.push({ headerText: "Balance", key: "Balance", dataType: "string", width: "200px" });
columns.push({ headerText: "Eye Color", key: "EyeColor", dataType: "string", width: "200px" });
columns.push({ headerText: "Registered", key: "Registered", dataType: "bool", width: "200px" });
columns.push({ headerText: "Latitude", key: "Latitude", dataType: "number", width: "200px" });
columns.push({ headerText: "Longitude", key: "Longitude", dataType: "number", width: "200px" });
columns.push({ headerText: "Tags", key: "Tags", dataType: "string", width: "200px" });
columns.push({ headerText: "Greeting", key: "Greeting", dataType: "string", width: "200px" });
columns.push({ headerText: "GUID", key: "GUID", dataType: "string", width: "200px" });
columns.push({ headerText: "Index", key: "Index", dataType: "number", width: "200px" });
cols = columns.slice(0, colCount);
opts["columns"] = cols;
opts["responseDataKey"] = "d.results.Records";
opts["responseTotalRecCountKey"] = "d.results.TotalRecordsCount";
opts["autoGenerateColumns"] = false;
opts["dataSource"] = "https://www.igniteui.com/api/gridperformance?callback=?";
if (virt !== "none") {
opts["rowVirtualization"] = true;
opts["virtualizationMode"] = virt;
};
opts["width"] = "100%";
opts["height"] = "500px";
if (paging) {
features.push({ name: "Paging", type: "remote", pageIndexUrlKey: "page", pageSizeUrlKey: "pageSize", recordCountKey: "d.results.TotalRecordsCount" });
}
if (filtering) {
features.push({ name: "Filtering", type: "remote", filterExprUrlKey: "filter" });
}
opts["features"] = features;
opts["rendering"] = function (evt, ui) {
startRender = new Date().getTime();
};
opts["rendered"] = function (evt, ui) {
endRender = new Date().getTime();
apiViewer.log("グリッドの描画時間: : " + (endRender - startRender) / 1000 + " 秒.");
apiViewer.log("");
};
opts["rowsRendering"] = function (evt, ui) {
rowsRendering = new Date().getTime();
};
opts["rowsRendered"] = function (evt, ui) {
rowsRendered = new Date().getTime();
apiViewer.log("行の描画時間: : " + (rowsRendered - rowsRendering) / 1000 + " 秒.");
};
opts["dataBinding"] = function (evt, ui) {
dataFetching = new Date().getTime();
};
opts["dataBound"] = function (evt, ui) {
dataFetched = new Date().getTime();
apiViewer.log("データの取得時間: : " + (dataFetched - dataFetching) / 1000 + " 秒.");
};
return opts;
}
$.ajaxSetup({
beforeSend: function (jq, settings) {
var rowsCount = $("#dataCount").slider("value"),
colsCount = $("#colCount").slider("value"),
filtering = $("#filteringCheck").igCheckboxEditor("value"),
paging = $("#pagingCheck").igCheckboxEditor("value"),
virt = $("#virt").igCombo("value");
if (settings.url.indexOf("api/gridperformance") !== -1) {
settings.url += "&rowscount=" + rowsCount;
settings.url += "&databind=" + dataBind;
settings.url += "&colscount=" + colsCount;
if (settings.url.indexOf("pageIndex") !== -1 || settings.url.indexOf("filter") !== -1) {
dataBind = false;
}
}
},
});
$("#dataCount").slider({
min: 1000,
max: 20000,
step: 1000,
value: 5000,
slide: function (event, ui) {
$("#rowsLbl").html(ui.value);
}
});
$("#colCount").slider({
min: 1,
max: 20,
step: 1,
value: 10,
slide: function (event, ui) {
$("#colsLbl").html(ui.value);
}
});
$("#btnRefresh").igButton({
click: function (evt, args) {
dataBind = true;
filtering = $("#filteringCheck").igCheckboxEditor("value");
paging = $("#pagingCheck").igCheckboxEditor("value");
virt = $("#virt").igCombo("value");
colsCount = $("#colCount").slider("value");
opts = setUpOptions(virt, paging, filtering, colsCount);
$(evt.target).igButton("option", "disabled", true);
$("#grid").igGrid("destroy");
opts.dataBound = function () {
$(evt.target).igButton("option", "disabled", false);
};
$("#grid").igGrid(opts);
}
});
$("#virt").igCombo({
dataSource: [
"continuous",
"none",
"fixed"
],
mode: "dropdown"
});
$("#pagingCheck").igCheckboxEditor();
$("#filteringCheck").igCheckboxEditor();
filtering = $("#filteringCheck").igCheckboxEditor("value");
paging = $("#pagingCheck").igCheckboxEditor("value");
virt = $("#virt").igCombo("value");
colsCount = $("#colCount").slider("value");
opts = setUpOptions(virt, paging, filtering, colsCount);
$("#grid").igGrid(opts);
});
</script>
</body>
</html>