jQueryのEasyUIデータグリッドとツリーウィジェット - ツリーツリー

頼ります

• ドラッグ可能
• ドロップ可能

使用法

木（ツリー）は、<UL>要素で定義されます。 タグは、リーフノードとサブノードを定義することができます。 ノードは、リスト内の<LI> ul要素です。 以下に示すが、UL要素ツリーのノード内にネストされた要素の製造に使用されます。

<ULのID = "TT"クラス= "easyuiツリー">
    <李>
		<スパン>フォルダ</ span>の
		<UL>
			<李>
				<スパン>サブフォルダ1 </ span>の
				<UL>
					<李>の<span> <a href="#"> 11 </a>を</ span>の</李>のファイル
					<李> <span>のファイル12 </ span>の</李>
					<李> <span>のファイル13 </ span>の</李>
				</ UL>
			</李>
			<李> <span>のファイル2 </ span>の</李>
			<李> <span>のファイル3 </ span>の</李>
		</ UL>
	</李>
    <李> <span>をFile21 </ span>の</李>
</ UL>

ツリー（木）は、空の<UL>要素で定義することができ、あなたは、データをロードするためにJavaScriptを使用することができます。

<ULのid = "TT"> </ ulの>

$（ '＃Ttの'）。ツリー（{
    URL： 'tree_data.json」
}）;

ASP.NET WebサービスからJSONデータを処理するためにloadFilterを使用してください。

$（ '＃Ttの'）。ツリー（{
    URL：...、
    loadFilter：機能（データ）{
		{（data.d）の場合
			data.dを返します。
		}エルス{
			データを返します。
		}
    }
}）;

ツリー・データ形式（ツリーデータフォーマット）

各ノードは、以下の属性を含めることができます。

• ID：ノードIDは、リモート・データをロードすることが重要です。
• テキスト：テキストは、ノードを表示します。
• 状態：ノードの状態、「オープン」または「クローズド」、デフォルトは「オープン」です。 「閉じた」に設定すると、ノードが子ノードを持っており、リモートサイトからそれらをロードします。
• チェックさ：ノードが選択されているかどうかを示します。
• 属性：ノードは、カスタム属性を追加します。
• 子どもたちは：ノードの子ノードの配列を定義します。

例：

[{
    「ID」：1、
    "テキスト"： "Folder1に」を、
    「IconCls "："アイコン保存」、
    「子供たち」：[{
		"テキスト"： "ファイル1」を、
		"チェック"：真
    }、{
		"テキスト"： "ブック"、
		「状態」：「オープン」、
		「属性」：{
			"URL"： "/デモ/書籍/ ABC」、
			"価格"：100
		}、
		「子供たち」：[{
			"テキスト"： "PhotoShopのを」、
			"チェック"：真
		}、{
			「ID」：8、
			"テキスト"： "サブBookds」、
			「状態」：「閉」
		}]
    }]
}、{
    "テキスト"： "言語"、
    「状態」：「閉」、
    「子供たち」：[{
		"テキスト"： "ジャワ"
    }、{
		"テキスト"： "C＃の"
    }]
}]

非同期ツリー

内蔵の非同期ロードのツリーモードのサポート、ユーザーが非同期に作成ツリーの需要に応じて、サーバー側の動的返すJSONデータを指定し、空のツリーを作成できるようにします。 次に例を示します。

<ULクラス= "easyuiツリー」データ・オプション=" URL： "get_data.php '"> </ ulの>

ロードされたURL「get_data.php」による木。 子ノードは、親ノードのステータスがロードされているに依存します。 あなたが閉じたノードを展開すると、ノードが子にロードされていない場合、それは子ノードを取得するために、上記で定義された「ID」リクエストURLパラメータ、名前付きとしてhttpサーバノードのid値に送信されます。

サーバから返されたデータを見てください：

[{
    「ID」：1、
    「テキスト」：「ノード1」、
    「状態」：「閉」、
    「子供たち」：[{
		"ID"：11、
		「テキスト」：「ノード11」
    }、{
		"ID"：12、
		「テキスト」：「ノード12」
    }]
}、{
    "ID"：2、
    「テキスト」：「ノード2」、
    「状態」：「閉」
}]

あなたがノードを展開すると、ノード1と2は、閉鎖され、直接その子ノードを展示します。 あなたはノード2を展開すると、サーバーは、子ノードを取得するために（2）の値を送信します。

このチュートリアルで非同期ツリーを作成するためには、ツリーデータを返すために、需要に応じてサーバーにコードを書き込む方法を示しています。

プロパティ

$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});

$('#tt').tree({
	formatter:function(node){
		return node.text;
	}
});

イベント

多くのイベントは、次のプロパティが含まれるコールバック関数「ノード」のパラメータを、必要とします：

• ID：ノードのID値にバインドされました。
• テキスト：テキストが表示されます。
• iconCls：アイコンcssクラスを表示します。
• チェックさ：ノードが選択されているかどうか。
• 状態：ノードの状態、「オープン」または「クローズド」。
• 属性：バインドカスタム属性ノードに。
• ターゲット：DOMは、ターゲットオブジェクト。

$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});

// right click node and then display the context menu
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// select the node
		$('#tt').tree('select', node.target);
		// display context menu
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
	<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

ウェイ

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);	// get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
	parent: selected.target,
	data: [{
		id: 23,
		text: 'node23'
	},{
		text: 'node24',
		state: 'closed',
		children: [{
			text: 'node241'
		},{
			text: 'node242'
		}]
	}]
});

var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('insert', {
		before: node.target,
		data: {
			id: 21,
			text: 'node text'
		}
	});
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}