OSS で利用できる機能
ツリー - API およびイベント
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
var node = $("#tree").igTree("selectedNode");
$("#tree").igTree("removeAt", node.path);
var nodes = $("#tree").igTree("findNodesByText", "テクノロジー");
$("#tree").igTree("select", nodes[0].element);
$("#tree").igTree("addNode", { Text: "新しいノード" });
$("#tree").igTree("removeAt", node.path);
var nodes = $("#tree").igTree("findNodesByText", "テクノロジー");
$("#tree").igTree("select", nodes[0].element);
$("#tree").igTree("addNode", { Text: "新しいノード" });
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、ツリー コントロールのイベントを処理および API を使用する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body>
<div id="tree"></div>
<!-- Begin: API UI -->
<div class="api-explorer">
<button id="btnRemoveNode">選択したノードの削除</button><span>var node = $("#tree").igTree("selectedNode");<br />$("#tree").igTree("removeAt", node.path);</span><br />
<button id="btnSelectNode">「テクノロジー」ノードを選択</button><span>var nodes = $("#tree").igTree("findNodesByText", "テクノロジー"); <br />$("#tree").igTree("select", nodes[0].element);</span><br />
<button id="btnAddNode">ノードを追加</button><span>$("#tree").igTree("addNode", { Text: "新しいノード" });</span>
</div>
<div class="api-viewer" tabindex="0"></div>
<!-- End: API UI -->
<script src="/data-files/hierarchical-products.js"></script>
<script>
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------*/
// Remove Selected Node button click handler
$("#btnRemoveNode").click(function (e) {
var node = $("#tree").igTree("selectedNode");
if (node.path != null) {
if (node.data.Text === "テクノロジー") {
apiViewer.log("「テクノロジー」ノードを削除できません。");
}
else {
// Remove selected node using path
$("#tree").igTree("removeAt", node.path);
apiViewer.log("ノードが削除されました: " + node.data.Text);
$("#tree").igTree("clearSelection");
}
} else {
apiViewer.log("ノードを選択して、もう一度試しください。");
}
});
// Select "Tech" Node button click handler
$("#btnSelectNode").click(function (e) {
var nodes = $("#tree").igTree("findNodesByText", "テクノロジー");
if (nodes.length > 0) {
$("#tree").igTree("select", nodes[0].element);
}
});
// {Button Label} button click handler
$("#btnAddNode").click(function (e) {
var parentNode = $("#tree").igTree("selectedNode").element;
if (parentNode == null) {
$("#tree").igTree("addNode", { Text: "新しいノード" });
}
else {
$("#tree").igTree("addNode", { Text: "新しいノード" }, parentNode);
$("#tree").igTree("expand", parentNode);
}
});
/*----------------- Event Examples -------------------------*/
$("#tree").on("igtreeselectionchanged", function (e, ui) {
apiViewer.log("igtreeselectionchanged: [ " + "選択が変更されました: " + ui.newNodes[0].data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreenodeclick", function (evt, ui) {
apiViewer.log("igtreenodeclick: [ " + "ノードがクリックされました: " + ui.node.data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreedragstart", function (evt, ui) {
apiViewer.log("igtreedragstart: [ " + "ノードのドラッグ開始: " + ui.data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreedragstop", function (evt, ui) {
apiViewer.log("igtreedragstop"); focusOnMobile();
});
$("#tree").on("igtreenodedropped", function (evt, ui) {
apiViewer.log("igtreenodedropped"); focusOnMobile();
});
/*----------------- Instantiation -------------------------*/
$("#tree").igTree({
singleBranchExpand: true,
dataSourceType: "json",
dataSource: products, //defined in external script
dragAndDrop: true,
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Nodes"
}
});
function focusOnMobile() {
setTimeout(function () {
if ($(window).width() < 600) {
$(".api-viewer").focus();
}
}, 0);
}
});
</script>
</body>
</html>
var products = [
{
Text: "食品", Nodes: [
{
Text: "サンドイッチ", Nodes: [
{ Text: "ハム" },
{ Text: "シーチキン" },
{ Text: "七面鳥" }
]
},
{ Text: "魚" },
{ Text: "ハンバーガー" },
{ Text: "すし" },
{ Text: "ステーキ" }
]
}, {
Text: "飲料", Nodes: [
{ Text: "コカコーラ" },
{ Text: "茶" },
{ Text: "ラムネ" }
]
},
{
Text: "テクノロジー", Nodes: [
{ Text: "ラップトップ" },
{ Text: "デスクトップ" },
{ Text: "タブレット PC" },
{ Text: "スマートフォン" },
{ Text: "メインフレーム" }
]
},
{
Text: "文学", Nodes: [
{ Text: "夏目 漱石" },
{ Text: "芥川 龍之介" },
{ Text: "遠藤 周作" },
{ Text: "円地 文子" },
{ Text: "太宰 治"}]
}, {
Text: "技術", Nodes: [
{ Text: "マウス" },
{ Text: "キーボード" },
{ Text: "マイク" },
{ Text: "カメラ" },
{ Text: "マウスパッド"}]
}];