jsTree を使用して、ASP.NET でファイル構造ビジュアライザーを作成しています。すべてのノードがルート レベルにある限り、ツリー構造を問題なくレンダリングできることがわかりました。子ノードを組み込むと、レンダリングされません。stackoverflow や他のヘルプ サイトから (おそらく) 既知の適切な JSON を使用してみましたが、提供されたコードを変更せずにコピー アンド ペーストしただけでも、どれも機能しません。
既存の .NET 4.5 Web プロジェクトで、Visual Studio 2012 で jQuery 1.8.0 と jsTree 1.0-rc3 を使用しています。スクリプトと UL は Web ユーザー コントロールにあります。これを IE 8、Firefox 21.0、および Chrome 28.0 でテストしましたが、すべて同じ結果でした。
最初のツリーは、.NET に移植する PHP アプリケーションの既存のメニューに基づくテストです。
そのための HTML は簡単です。
<div class="span-24" id="treeheader">
<ul>
<li class="active"><a href="#" id="header-tab">Header/Trailer</a></li>
<li><a href="#" id="employee-tab">Employee</a></li>
<li><a href="#" id="dependent-tab">Dependent</a></li>
<li><a href="#">Toggle Advanced</a></li>
</ul>
その ul をツリー化するスクリプト:
jQuery("#treeheader").jstree({
"plugins": ["themes", "html_data", "ui", "crrm"], // "hotkeys"],
"core": { "initially_open": ["hhtml_1"] }
});
ここまでは順調ですね。ただし、実際のファイル構造については、ul; をハードコードすることはできません。代わりに、サービスから json を受け取り、それを使用して ul を構築しています。
$('#treeviewer').jstree({
"json_data": {
"data": "834 - v5010 File",
"attr": "phtml_1",
"state": "open",
"children":
[
{
"data": "BGN - Beginning Segment",
"attr": "phtml_2"
},
{
"data": "REF - Transaction Set Policy Number",
"attr": "phtml_3"
},
{
"data": "DTP LOOP - File Effective Date",
"attr": "phtml_4"
},
{
"data": "N1 - Sponsor Name",
"attr": "phtml_5"
},
{
"data": "N1 - Payer",
"attr": "phtml_6"
}
]
},
"themes": {
"theme": "default",
"url": "../../scripts/Default/style.css",
"dots": false
},
"plugins": ["themes", "json_data", "ui", "crrm"]
});
});
...空のdivで：
<div class="span-24" id="treeviewer">
残念ながら、結果を示す画像をアップロードするのに十分な評判ポイントがありませんが、トップ メニューには 4 つの異なる要素がすべて互いに整列して表示されていますが、2 番目のツリーにはルート要素のみが表示されています。json でさまざまなバリエーションを試しました。これは最も単純なものです (テスト データの分岐構造を持つのではなく、すべての子が 1 つのルート ノードの子であるという点で)。
json に問題はなく、エラーも報告されていません。これを機能させるために必要な処理やフォーマットはありますか? それとも、このバージョンの jsTree の問題である可能性がありますか? 前もって感謝します。