製品版のみの機能
ツリー グリッド - TypeScript
このサンプルでは、行選択およびローカル並べ替え機能を持つ igTreeGrid を TypeScript で作成して構成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
使用されているデータは階層で、HierarchicalTasks を含む HierarchicalTask のカスタム型の配列として渡されます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div id="treegrid"></div>
<script src="/TypeScriptSamples/tree-grid/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 HierarchialTask {
id: number;
taskName: string;
start: string;
finish: string;
duration: string;
progress: string;
products: HierarchialTask[];
constructor(public _id, public _taskName, public _start, public _finish, public _duration, public _progress, public _products) {
this.id = _id;
this.taskName = _taskName;
this.start = _start;
this.finish = _finish;
this.duration = _duration;
this.progress = _progress;
this.products = _products;
}
}
var designTasks: HierarchialTask[] = [];
designTasks.push(new HierarchialTask(8, "Conceptual Design", "6/13/2014", "6/16/2014", "2d", "100%", []));
designTasks.push(new HierarchialTask(9, "Preliminary Design", "6/17/2014", "6/18/2014", "2d", "65%", []));
designTasks.push(new HierarchialTask(10, "Final Design", "6/19/2014", "6/19/2014", "1d", "15%", []));
var devTasks: HierarchialTask[] = [];
devTasks.push(new HierarchialTask(11, "Implementation", "6/20/2014", "7/17/2014", "20d", "5%", []));
devTasks.push(new HierarchialTask(12, "Testing", "7/18/2014", "7/31/2014", "10d", "0%", []));
devTasks.push(new HierarchialTask(13, "Bug fixing", "8/1/2014", "8/14/2014", "10d", "0%", []));
devTasks.push(new HierarchialTask(14, "Documenting", "8/15/2014", "8/20/2014", "4d", "0%", []));
var designMainTask = new HierarchialTask(5, "Design", "6/13/2014", "6/19/2014", "5d", "60%", designTasks);
var devMainTask = new HierarchialTask(6, "Development", "6/20/2014", "8/20/2014", "44d", "5%", devTasks);
var projectTask: HierarchialTask[] = [];
projectTask.push(new HierarchialTask(0, "Project Plan", "6/2/2014", "8/22/2014", "60d", "32%", []));
projectTask.push(new HierarchialTask(1, "Planning", "6/2/2014", "6/4/2014", "3d", "100%", []));
projectTask.push(new HierarchialTask(2, "Write a specification", "6/5/2014", "6/6/2014", "2d", "100%", []));
projectTask.push(new HierarchialTask(3, "Create a demo application", "6/9/2014", "6/11/2014", "3d", "100%", []));
projectTask.push(new HierarchialTask(4, "Collect a feedback", "6/12/2014", "6/12/2014", "1d","100%", []));
projectTask.push(designMainTask);
projectTask.push(devMainTask);
projectTask.push(new HierarchialTask(7, "Project Complete", "8/21/2014", "8/22/2014", "2d", "0%", []));
$(function () {
$("#treegrid").igTreeGrid({
width: "100%",
dataSource: projectTask, //Project Plan data,
autoGenerateColumns: false,
primaryKey: "id",
columns: [
{ headerText: "ID", key: "id", width: "15%", dataType: "number" },
{ headerText: "タスク", key: "taskName", width: "25%", dataType: "string" },
{ headerText: "開始日付", key: "start", width: "15%", dataType: "string" },
{ headerText: "終了日付", key: "finish", width: "15%", dataType: "string" },
{ headerText: "期間", key: "duration", width: "15%", dataType: "string" },
{ headerText: "進行状況", key: "progress", width: "15%", dataType: "string" }
],
childDataKey: "products",
initialExpandDepth: 1,
features: [
{
name: "Selection",
},
{
name: "Sorting",
type: "local"
},
{
name: "RowSelectors",
rowSelectorColumnWidth: 80,
enableCheckBoxes: true,
checkBoxMode: "triState"
}
]
});
})