このトピックでは、igTree
™ コントロール ノード イメージを構成する方法を紹介します。
このトピックは、以下のセクションで構成されます。
「igTree を使用した作業の開始」というトピックを最初にお読みください。
以下の表は、igTree
コントロールの構成可能な画面要素とビヘイビアーを示しています。
構成可能な画面要素とビヘイビアー | 構成の詳細 | 構成オプション |
---|---|---|
ノード イメージを構成する |
画像は igTree コントロールの各ノードの次を表示するようバインディング、CSS、または URL で構成できます。
|
ノード イメージは igTree
コントロール上に構成し、ノードの詳細情報を表示できます。これらの画像は各項目のバインディングから構成でき、CSS クラスまたは画像 URL を igTree
コントロール オプションに設定することで親ノードと子ノード両方に表示できます。
以下の表は、オプション設定の推奨構成をマップしています。オプションは、igTree
のオプションからアクセスされます。
目的 | 使用するオプション | それを次に設定... |
---|---|---|
URL を使用して親ノードおよびリーフ ノードの画像を構成する | parentNodeImageUrl leafNodeImageUrl |
string URL string URL |
CSS を使用して親ノードおよびリーフ ノードの画像を構成する | parentNodeImageClass leafNodeImageClass |
string CSS クラス名 string CSS クラス名 |
バインディングにより個々のデータ項目のノード イメージを構成する | imageUrlKey (XML の場合) imageUrlXPath |
画像への URL がある string 型データ メンバー XML にバインドされた場合の画像 URL への string 型 XPath |
親ノードおよびリーフ ノードの画像を構成するには、URL を既存の画像の位置に指定する必要があります。以下の画像は、以下の設定を行った後のノード イメージを構成する方法を示しています。
オプション | 設定 | プレビュー |
---|---|---|
parentNodeImageUrl | "../../Content/images/DocumentsFolder.png" |
![]() |
leafNodeImageUrl | "../../Content/images/Documents.png" |
画像スプライトを使用して、CSS から画像を構成している場合、ツリー ノード イメージを含む CSS クラスを指定できます。以下のコードは、以下の設定を行った後のノード イメージを構成する方法を示しています。
オプション | 設定 |
---|---|
parentNodeImageClass | "sprite-DocumentsFolder" |
leafNodeImageClass | "sprite-Documents" |
注: ツリー画像を正しく描画するには、CSS クラスを「display:inline-block」として定義する必要があります。
HTML の場合:
<style type="text/css">
.sprite-DocumentsFolder
{
background: url("../../Content/images/leafimages.png") no-repeat top left;
display: inline-block;
background-position: 0 -52px;
width: 16px;
height: 16px;
}
.sprite-Documents
{
background: url("../../Content/images/leafimages.png") no-repeat top left;
display: inline-block;
background-position: 0 -26px;
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript">
$(function () {
$("#tree").igTree({
dataSource: data,
parentNodeImageClass: "sprite-DocumentsFolder",
leafNodeImageClass: "sprite-Documents",
bindings: {
textKey: 'Text',
childDataProperty: 'Nodes'
},
});
</script>
ASPX の場合:
<style type="text/css">
.sprite-DocumentsFolder
{
background: url("../../Content/images/leafimages.png") no-repeat top left;
display: inline-block;
background-position: 0 -52px;
width: 16px;
height: 16px;
}
.sprite-Documents
{
background: url("../../Content/images/leafimages.png") no-repeat top left;
display: inline-block;
background-position: 0 -26px;
width: 16px;
height: 16px;
}
</style>
<%= Html.
Infragistics().
Tree().
ID("tree").
DataSource(this.Model).
ParentNodeImageClass("sprite-DocumentsFolder").
LeafNodeImageClass("sprite-Documents").
Bindings( bindings => {
bindings.
TextKey("Text").
ChildDataProperty("Nodes");
}).
DataBind().
Render()
%>
この例は XML へのバインディングを示し、imageUrlXPath
に必要な設定を組み込んでいます。この設定は JSON データにバインディングしている場合は必要ありません。以下の例は、バインディングによるノード イメージの構成方法を示しています。
オプション | 設定 | プレビュー |
---|---|---|
imageUrlKey | ImageUrl | ![]() |
imageUrlXPath | @ImageUrl | - |
HTML の場合:
$("#tree").igTree({
checkboxMode: 'triState',
singleBranchExpand: true,
dataSource: data,
dataSourceType: 'xml',
initialExpandDepth: 0,
pathSeparator: '.',
bindings: {
textKey: 'Text',
textXPath: '@Text',
valueKey: 'Value',
valueXPath: '@Value',
imageUrlKey: 'ImageUrl',
imageUrlXPath: '@ImageUrl',
childDataProperty: 'Folder',
childDataXPath: 'Folder',
searchFieldXPath: 'Folder'
}
});
XML データ:
<?xml version="1.0" encoding="utf-8" ?>
<Folder Text="Computer" ImageUrl="../content/images/igTree/Common/computer.png" Value="Folder">
<Folder Text="Music" ImageUrl="../content/images/igTree/Common/book.png" Value="Folder">
<!-- data omitted for example -->
</Folder>
<Folder Text="My Documents" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">
<Folder Text="2009" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">
<!-- data omitted for example -->
</Folder>
<Folder Text="2010" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">
<Folder Text="Month Report" ImageUrl="../content/images/igTree/Common/Documents.png" Value="File"></Folder>
<Folder Text="Year Report" ImageUrl="../content/images/igTree/Common/Documents.png" Value="File"></Folder>
</Folder>
</Folder>
<Folder Text="Pictures" ImageUrl="../content/images/igTree/Common/coins.png" Value="Folder">
<!-- data omitted for example -->
</Folder>
<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="BackUp" 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>
<Folder Text="Deleted" ImageUrl="../content/images/igTree/Common/bin_empty.png" Value="Folder"></Folder>
注:
igTree
はクライアントで XML へのバインディングのみサポートします。ASP.NET MVC では、XML をIQueryable<T>
に変換する必要があります。ツリーはImageUrl
を表すフィールドにバインドでき、imageUrlXPath
は必要ありません。
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
以下は、その他の役立つトピックです。
オンラインで表示: GitHub