製品版のみの機能
ツリー グリッド - ページング
このサンプルは、igTreeGrid の contextRowMode オプションと利用可能な 3 つのオプションのうち 2 つのオプションを使用します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
contextRowMode: parent のページング機能
contextRowMode: breadcrumb のページング機能
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igTreeGrid contextRowMode の 3 つのモードは、none、parent、breadcrumb です。これらのモードは、グリッド ヘッダーの下にページの最初の行の親についての情報を含むコンテキスト行の描画を許可します。
一番上のグリッドは contextRowMode オプションが parent に設定されています。直接上の親行を描画します。一番下のグリッドは contextRowMode オプションが breadcrumb に設定されています。最初の行のすべての先祖のフル パスを表すブレッドクラム トレイルを描画します。デフォルトで、このオプションは「none」に設定されています。この場合、コンテキスト行は描画されません。
コード ビュー
クリップボードへコピー
<!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>
</head>
<body>
<h3>contextRowMode: parent のページング機能</h3>
<table id="treegrid1"></table>
<br />
<br />
<h3>contextRowMode: breadcrumb のページング機能</h3>
<table id="treegrid2"></table>
<script>
$(function () {
var flatDS = [
{ "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller", "Title": "Vice President, Sales" },
{ "employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith", "Title": "Human resources" },
{ "employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio", "Title": "CFO" },
{ "employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan", "Title": "CTO" },
// sub of ID 1
{ "employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling", "Title": "Sales Manager" },
{ "employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan", "Title": "Inside Sales Coordinator" },
{ "employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock", "Title": "Sales Representative" },
{ "employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama", "Title": "Sales Representative" },
// sub of ID 4
{ "employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth", "Title": "Sales Representative" },
{ "employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis", "Title": "Sales Representative" },
{ "employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King", "Title": "Sales Representative" },
// sub of ID 2
{ "employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis", "Title": "Chief Accountant" },
{ "employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida", "Title": "Accountant" },
{ "employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes", "Title": "Accountant" },
// sub of ID 3
{ "employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia", "Title": "Software Architect" },
{ "employeeID": 15, "PID": 3, "firstName": "Lacota", "lastName": "Mufutau", "Title": "Product Manager" },
// sub of ID 16
{ "employeeID": 16, "PID": 15, "firstName": "Jin", "lastName": "Elliott", "Title": "Product Owner" },
{ "employeeID": 17, "PID": 15, "firstName": "Armand", "lastName": "Ross", "Title": "Product Owner" },
{ "employeeID": 18, "PID": 15, "firstName": "Dane", "lastName": "Rodriquez", "Title": "Team Leader" },
// sub of ID 19
{ "employeeID": 19, "PID": 18, "firstName": "Declan", "lastName": "Lester", "Title": "Senior Software Developer" },
{ "employeeID": 20, "PID": 18, "firstName": "Bernard", "lastName": "Jarvis", "Title": "Senior Software Developer" },
{ "employeeID": 21, "PID": 18, "firstName": "Jason", "lastName": "Clark", "Title": "QA" },
{ "employeeID": 22, "PID": 18, "firstName": "Mark", "lastName": "Young", "Title": "QA" },
// sub of ID 20
{ "employeeID": 23, "PID": 20, "firstName": "Jeremy", "lastName": "Donaldson", "Title": "Software Developer" }
];
$("#treegrid1").igTreeGrid({
width: "100%",
dataSource: flatDS, //bound to flat data source,
autoGenerateColumns: false,
primaryKey: "employeeID",
foreignKey: "PID",
initialExpandDepth: -1,
columns: [
{ headerText: "従業員 ID", key: "employeeID", dataType: "number", hidden: true },
{ headerText: "名前", key: "firstName", dataType: "string" },
{ headerText: "名字", key: "lastName", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" }
],
features: [
{
name: "Paging",
mode: "allLevels",
pageSize: 10,
currentPageIndex: 2,
contextRowMode: "parent"
}
]
});
$("#treegrid2").igTreeGrid({
width: "100%",
dataSource: flatDS, //bound to flat data source,
autoGenerateColumns: false,
primaryKey: "employeeID",
foreignKey: "PID",
initialExpandDepth: -1,
columns: [
{ headerText: "従業員 ID", key: "employeeID", dataType: "number", hidden: true },
{ headerText: "名前", key: "firstName", dataType: "string" },
{ headerText: "名字", key: "lastName", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" }
],
features: [
{
name: "Paging",
mode: "allLevels",
pageSize: 10,
currentPageIndex: 2,
contextRowMode: "breadcrumb",
breadcrumbKey: "firstName"
}
]
});
});
</script>
</body>
</html>