このトピックでは、コード例を使用して、 Javascript および MVC の両方で igTree™ コントロールのドラッグ アンド ドロップ モードを構成にする方法を紹介します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
ドラッグ アンド ドロップの概要 (igTree): このトピックは igTree コントロールのドラッグ アンド ドロップ機能およびドラッグ アンド ドロップ モードを説明して概要を提供します。
ドラッグ アンド ドロップの有効化 (igTree): このトピックは、コード例を示して、igTree コントロールでドラッグ アンド ドロップ機能を有効にする方法を説明します。
このトピックは、以下のセクションで構成されます。
igTree コントロールのドラッグ アンド ドロップ モードは dragAndDropMode プロパティで管理されます。詳細設定について、ドラッグ アンド ドロップ モードの構成概要表を参照してください。表の後のコードで完全の構成プロシージャを提供します。
以下の表は、ドラッグ アンド ドロップ モードとそれらを構成するプロパティ設定の関係を示しています。
| 目的: | dragAndDropMode プロパティを以下に設定: |
|---|---|
| Ctrl キーを使用してコピーと移動の間に切り替えることができます。 | デフォルト これはドラッグ アンド ドロップ モードのデフォルト設定です。機能を有効にすることのみが必要です。 |
| ドラッグ アンド ドロップ操作をコピー操作に設定します。 | copy |
| ドラッグ アンド ドロップ操作を移動操作に設定します。 | move |
以下の表は、このトピックで使用したコード例をまとめたものです。
| 例 | 説明 |
|---|---|
| コード例: JavaScript でドラッグ アンド ドロップ モードの構成 | このプロシージャは igTree のインスタンスを初期化し、ドラッグ アンド ドロップ機能を有効にし、コピー モードに設定して、インスタンスを XML ファイルにバインドします。 |
| コード例: MVC でドラッグ アンド ドロップ モードの構成 | このプロシージャは igTree を初期化し、ドラッグ アンド ドロップ機能を有効にし、コピー モードに設定して、XML ファイルにバインドします。 |
このプロシージャは igTree のインスタンスを初期化し、ドラッグ アンド ドロップ機能を有効にし、コピー モードに設定して、インスタンスを JSON データ ソースバインドします。
他のモード (move または default) を設定するには、コードで手順 3.2 の下にコードを置き換えます。検索: dragAndDropMode: 'copy'
置き換え: dragAndDropMode: 'move' または dragAndDropMode: 'default'
以下の画像は、このコードを実行してノードのコピーを紹介します。
このトピックでは、ドラッグ アンド ドロップ機能とコピー モードを有効にして JavaScript で igTree を構成する方法について順を追って説明します。以下はプロセスの概念的概要です。
igTree のデータ ソースの定義
インフラジスティックス ローダーを使用してスクリプト参照を追加
ドラッグ アンド ドロップ モードをコピーに設定
以下の手順は、igTree コントロール インスタンスを JavaScript でドラッグ アンド ドロップのコピー モードに設定する方法を紹介します。
igTree のデータ ソースの定義このサンプルでは、JSON 形式のファイルとフォルダー構造があります。各オブジェクトには以下のプロパティがあります。
Text - ノードの名前Value - ノードのタイプ - ファイル または フォルダーImageUrl - 特定のノード画像への URL リンクFolder - 以上のデータを含むオブジェクトの配列JavaScript の場合:
[{
Text: "My Documents",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "2009",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "Month Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}, {
Text: "Year Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}]
}, {
Text: "2010",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "Month Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}, {
Text: "Year Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}]
}]
}]
Infragistics ローダーを使用してスクリプト参照を追加します。
この参照は igTree コントロールの初期化で必要です。
以下の参照を含む HTML ファイル (たとえば、tree.html) を作成します。
HTML の場合:
<script src="../scripts/jquery.min.js"></script>
<script src="../scripts/jquery-ui.min.js"></script>
<script src="../js/infragistics.loader.js"></script>
$.ig.loader({
scriptPath: "../js/",
cssPath: "../css/",
resources: "igTree"
});
ドラッグ アンド ドロップ モードをコピーに設定します。
tree.html ファイルで DOM (ドキュメント オブジェクト モデル) HTML 要素のプレースホルダーを定義します。
HTML の場合:
<!--igTree target element-->
<div id="tree">
</div>
JavaScript で igTree をインスタンス化し、ドラッグ アンド ドロップ機能を有効にして、コピー モードに設定します。
JavaScript の場合:
<script>
$.ig.loader(function () {
$("#tree").igTree({
checkboxMode: 'triState',
singleBranchExpand: true,
dataSource: data,
dataSourceType: 'json',
initialExpandDepth: 0,
pathSeparator: '.',
bindings: {
textKey: 'Text',
valueKey: 'Value',
imageUrlKey: 'ImageUrl',
childDataProperty: 'Folder'
},
dragAndDrop: true,
dragAndDropSettings: {
dragAndDropMode: 'copy'
}
});
});
</script>
このプロシージャは igTree を初期化し、ドラッグ アンド ドロップ機能を有効にし、コピー モードに設定して、XML ファイルにバインドします。
その他のモード (Move または Default) を設定するには、手順 2 のコードで、以下のコード (// Configuring Drag-and-drop copy mode コメントの後のコード) を置き換えます。
settings.DragAndDropMode(DragAndDropMode.Copy); を settings.DragAndDropMode(DragAndDropMode.Move); または settings.DragAndDropMode(DragAndDropMode.Default); と置き換えます。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
Infragistics.Web.Mvc.dll の追加このトピックでは、ドラッグ アンド ドロップ機能とコピー モードを有効にして MVC で igTree を構成する方法について順を追って説明します。以下はプロセスの概念的概要です。
XML データ ソース ファイルの作成
View の定義
コントローラーの定義
以下の手順は、igTree を構成する View、および Controller を定義する方法を示します。
XML データ ソース ファイルを作成します。
データの XML ファイルを作成します。 Text、ImageUrl、および Value 属性を設定します。
XML の場合:
…
<Folder Text="Network" ImageUrl="../content/images/igTree/Common/door.png" Value="Folder">
<Folder Text="Archive" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
<Folder Text="Back Up" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
<Folder Text="FTP" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
</Folder>
…
View を定義します。
Views フォルダーに新しい View を追加します。ファイル名を SampleDataXML.cshtml に設定します。
igTree を初期化するコードを追加して ビューで Copy モードを有効にします。
C# の場合:
<script src="http://localhost/ig_ui/js/infragistics.loader.js" type="text/javascript"></script>
@(Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
@(Html.
Infragistics().
Tree().
ID("XMLTree").
Bindings( bindings => {
bindings.
ValueKey("Value").
TextKey("Text").
ImageUrlKey("ImageUrl").
ChildDataProperty("Folder");
}).
InitialExpandDepth(0).
DataSource(Model).
CheckboxMode(CheckboxMode.TriState).
SingleBranchExpand(true).
DragAndDrop(true).
DragAndDropSettings(settings =>
{
// Configuring Drag-and-drop copy mode
settings.DragAndDropMode(DragAndDropMode.Copy);
}).
DataBind().
Render()
)
コントローラーを定義します。
C# の場合:
public class SampleDataXMLController : Controller
{
public ActionResult DataBindingUsingMVC()
{
return View("SampleDataXML", this.GetData());
}
private IEnumerable<Folders> GetData()
{
string phisicalFilePath = System.Web.HttpContext.Current.Server.MapPath("~/ThreeData.xml");
var ctx = XDocument.Load(phisicalFilePath);
IEnumerable<Folders> data = from item in ctx.Root.Elements("Folder")
select new Folders
{
Text = item.Attribute("Text").Value,
Value = item.Attribute("Value").Value,
ImageUrl = Url.Content(item.Attribute("ImageUrl").Value),
Folder = from i1 in item.Elements("Folder")
select new Folders
{
Text = i1.Attribute("Text").Value,
Value = i1.Attribute("Value").Value,
ImageUrl = Url.Content(i1.Attribute("ImageUrl").Value),
Folder = from i2 in i1.Elements("Folder")
select new Folders
{
Text = i2.Attribute("Text").Value,
Value = i2.Attribute("Value").Value,
ImageUrl = Url.Content(i2.Attribute("ImageUrl").Value),
Folder = from i3 in i2.Elements("Folder")
select new Folders
{
Text = i3.Attribute("Text").Value,
Value = i3.Attribute("Value").Value,
ImageUrl = Url.Content(i3.Attribute("ImageUrl").Value)
}
}
}
};
return data;
}
} public class Folders
{
public string Text { get; set; }
public string Value { get; set; }
public string ImageUrl { get; set; }
public IEnumerable<Folders> Folder { get; set; }
}
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
カスタム ドロップ検証の構成 (igTree): このトピックでは、コード例を使用して、 Javascript および MVC の両方で igTree コントロールのドラッグ アンド ドロップ機能のカスタム ドロップ検証を構成にする方法を紹介します。
ドラッグ ビジュアル トークンの外観の構成 (igTree): このトピックでは、コード例を使用して、 Javascript および MVC の両方で igTree コントロールのドラッグ ビジュアル トークンの外観を構成にする方法を紹介します。
ドラッグ アンド ドロップ API リファレンス (igTree): このグループのトピックは、igTree コントロールのドラッグ アンド ドロップ機能に関連するイベントとプロパティについての参照情報を提供します。
このトピックについては、以下のサンプルも参照してください。
ドラッグ アンド ドロップ - 単一のツリー: このサンプルでは、igTree コントロールのドラッグ アンド ドロップ機能を有効にして初期化する方法を紹介します。
ドラッグ アンド ドロップ - 複数のツリー: このサンプルでは、2 つの igTree の間にノードをドラッグ アンド ドロップする方法を紹介します。
API およびイベント: このサンプルは igTree API を使用する方法を紹介します。
オンラインで表示: GitHub