OSS で利用できる機能
ツリー - TypeScript との連携
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、TypeScript でドラッグ アンド ドロップ ノードを持つツリー コントロールを構成する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>
<div id="tree"></div>
<script src="/TypeScriptSamples/tree/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class FileType {
name: string;
type: string;
imageUrl: string;
folder: FileType[];
constructor(inName: string, inType: string, inImageUrl: string, inFolder: FileType[]) {
this.name = inName;
this.type = inType;
this.imageUrl = inImageUrl;
this.folder = inFolder;
}
}
function createSubfolderFiles(parentFolder: FileType, subFolders: string[], files: string[][],
folderPicture: string, filePicture: string) {
var fileIndex, subFolderIndex;
for (subFolderIndex = 0; subFolderIndex < subFolders.length; subFolderIndex++) {
parentFolder.folder.push(new FileType(subFolders[subFolderIndex], "Folder", folderPicture, []));
for (fileIndex = 0; fileIndex < files[subFolderIndex].length; fileIndex++) {
parentFolder.folder[subFolderIndex].folder.push(new FileType(files[subFolderIndex][fileIndex], "File", filePicture, []));
}
}
}
var folderMusic = new FileType("ミュージック", "Folder", "/images/samples/tree/book.png", []);
var musicSubFolders = ["Y.Malmsteen", "WhiteSnake", "AC/DC", "Rock"];
var musicFiles = [["Making Love", "Rising Force", "Fire and Ice"], ["Trouble", "Bad Boys", "Is This Love"],
["ThunderStruck", "T.N.T.", "The Jack"], ["Bon Jovi - Always"]];
createSubfolderFiles(folderMusic, musicSubFolders, musicFiles, "/images/samples/tree/book.png", "/images/samples/tree/music.png");
var folderDocuments = new FileType("マイ ドキュメント", "Folder", "/images/samples/tree/documents-folder.png", []);
var documentsSubFolders = ["2009", "2010"];
var documentFiles = [["Month Report", "Year Report"], ["Month Report", "Year Report"]];
createSubfolderFiles(folderDocuments, documentsSubFolders, documentFiles, "/images/samples/tree/documents-folder.png", "/images/samples/tree/documents.png");
var folderPictures = new FileType("ピクチャ", "Folder", "/images/samples/tree/coins.png", []);
var picturesSubFolders = ["誕生日2009", "誕生日2010"];
var picturesFiles = [["Picture1", "Picture2", "Picture3", "Picture4"], ["Picture1", "Picture2", "Picture3"]];
createSubfolderFiles(folderPictures, picturesSubFolders, picturesFiles, "/images/samples/tree/coins.png", "/images/samples/tree/coins_add.png");
var folderNetwork = new FileType("ネットワーク", "Folder", "/images/samples/tree/door.png", []);
var networkSubFolders = ["アーカイブ", "バックアップ", "FTP"];
var networkFiles = [[],[],[]];
createSubfolderFiles(folderNetwork, networkSubFolders, networkFiles, "/images/samples/tree/door_in.png", "");
var folderDeleted = new FileType("削除済み", "Folder", "/images/samples/tree/bin_empty.png", []);
var folderComputer = new FileType("コンピューター", "Folder", "/images/samples/tree/computer.png", []);
folderComputer.folder.push(folderMusic);
folderComputer.folder.push(folderDocuments);
folderComputer.folder.push(folderPictures);
folderComputer.folder.push(folderNetwork);
folderComputer.folder.push(folderDeleted);
var files = [folderComputer];
$(function () {
var options: IgTree = {
checkboxMode: 'triState',
singleBranchExpand: true,
dataSource: $.extend(true, [], files),
initialExpandDepth: 0,
pathSeparator: '.',
bindings: {
textKey: 'name',
valueKey: 'type',
imageUrlKey: 'imageUrl',
childDataProperty: 'folder'
},
dragAndDrop: true,
dragAndDropSettings: {
allowDrop: true,
customDropValidation: function (element) {
// Validates the drop target
var valid = true,
droppableNode = $(this);
if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
valid = false;
}
return valid;
}
}
}
$("#tree").igTree(options);
});