JS無限ツリーリスト実装コード_javascriptスキル

tree.js

コードをコピー コードは次のとおりです:

/*******************************
ツリー組織フレームワークリスト
v1.0
2011 1 月 6
作成者: flycrosscloud
************************************ */
//初期化フレームワーク
var allImages = {
HasNodeClose: "", //子ノードが含まれており、閉じられた状態 (最後の 1 つ)
HasNodeOpen: "", //子ノード、オープン ステータスが含まれます (最後のノードではありません)
LastHasNodeClose: "", //子ノードが含まれており、閉じた状態 (最後のノード)
LastHasNodeOpen: "", / /子ノードを含み、ステータスを開きます (最後のノード)
CommonNode: "", //子ノードを含まず、通常のノード (最後のノードではありません)
LastCommonNode: "< img src='image/ftv2lastnode.gif'/>", //子ノードは含まず、通常のノード (最後のノード)
NodeLine: "" , //ノード間の接続
NodeClose: "", //ノードのクローズ状態
NodeOpen: "< ;img src='image/Departmentopen .gif'/>", //ノードオープンステータス
NodeBlank: ""//空の接続
};
$( function ()
{
$.post("http://localhost/system/asmx/wsTree.asmx/HelloWorld", function (data) { InitTree(data); } );
}) ;
関数 InitTree(org_data)
{
var org ("(" org_data ")"); #nodeTree");
$("#nodeTree img").bind("click", function (event)
{
$(this).parent().find("ul"). toggle();

});
}
関数drawtree(org, s, pPreLine, ulname)
{
var orgLength = org.length>var PreLine ;
var count = s;

for (var i = 0; i < orgLength; i )
{
var NodeImg = allImages.NodeClose; 🎜>var PreNodeLine; //アイコンの前のプロジェクト接続
//プロジェクトの前のアイコンを決定します
if (org[i].ChildUnits != null)//子ノードが含まれている場合
{
NodeImg = allImages.NodeOpen;
}
//グラフの前の接続線を決定します
if ((org[i].ChildUnits != null) && (i == orgLength - 1))
{
//子ノードが含まれており、このレイヤーの最後のノードです
PreNodeLine = allImages.LastHasNodeOpen;
}
if ((org[i].ChildUnits == null) && ( i == orgLength - 1))
{
//子ノードを含まず、このレイヤーの最後のノードです
PreNodeLine = allImages.LastCommonNode;
if ((org [i].ChildUnits != null) && (i != orgLength - 1))
{
//子ノードが含まれていますが、このレイヤーの最後のノードではありません
PreNodeLine = allImages.HasNodeOpen; 🎜>}
if ((org[i].ChildUnits == null) && (i != orgLength - 1))
{
//子ノードを含まず、最後のノードではありませんこのレイヤー
PreNodeLine = allImages.CommonNode;
}
if ( i == orgLength - 1)
{
PreLine = pPreLine allImages.NodeBlank
}
else
{
PreLine = pPreLine allImages.NodeLine;
}
var temp = $("

" pPreLine PreNodeLine NodeImg "" org[i] .unit_name "

");
$ (ulname).append(temp);
if (org[i].ChildUnits != null)
{
temp.append("

");
var content = temp.find("ul");
drawtree(org[i].ChildUnits, count 1, PreLine,コンテンツ );
}
}

}


tree.css

コードをコピーします

コードは次のとおりです。 li { vertical-align: middle; font-size: 16px;

display: block; ;line-height: 22px;list-style-type: none;height: 22px;padding: 0px;

}
ul a
{
height:22px;行の高さ:22px;
色:#123231;
ul
{
リストスタイルの種類:なし; :0px;
マージン:0px;
}
img
{
cursor:middle;
*
{
padding:0px;
margin:0px;
}


test.htm






コードは次のとおりです:

<スクリプト src="../js/jquery-1.4.4.min.js" type="text/javascript">

< ;/body>

テストデータ形式 (json)

コードをコピーします コードは次のとおりです: [{"unit_id":1,"unit_name":"First Level","father_unit_id":0,"ChildUnits":[{"unit_id" :2, "unit_name":"レベル 2","father_unit_id":1,"ChildUnits":[{"unit_id":3,"unit_name":"レベル 3 1","father_unit_id":2,"ChildUnits": [{"unit_id":6,"unit_name":"第 4 レベル 1","father_unit_id":3,"ChildUnits":null},{"unit_id":7,"unit_name":"第 4 レベル 2","father_unit_id ":3 ,"ChildUnits":null}]},{"unit_id":4,"unit_name":"レベル 3 2","father_unit_id":2,"ChildUnits":[{"unit_id":8,"unit_name ":" レベル 4 3","father_unit_id":4,"ChildUnits":null},{"unit_id":9,"unit_name":"Level 4 4","father_unit_id":4,"ChildUnits":null} ]}, {"unit_id":5,"unit_name":"レベル 3 3","father_unit_id":2,"ChildUnits":[{"unit_id":10,"unit_name":"レベル 4 5","father_unit_id ":5 ,"ChildUnits":null},{"unit_id":11,"unit_name":"レベル 4 6","father_unit_id":5,"ChildUnits":null}]}]},{"unit_id": 12,"unit_name":"Second Level 2","father_unit_id":1,"ChildUnits":null}]}]

私のレベルには限界があるので、これについて数日間考えました半完成品を思いつく前に まだ解決していない問題がいくつかあるので、専門家からアドバイスをいただければ幸いです。
アイデア:

ネストされた

タグを使用して、各レベルで 1 つの
を使用し、下位レベルのノードに
• を使用して、それを再帰的に実装します。最初はすべて
• を使ってやっていましたが、非表示にするのがめんどくさいことがわかりました。
  質問:
  1. IE での接続が断続的です。CSS に詳しくなく、まだ理解できていないので、もうやるのが面倒です。ははは。
  2. 正面画像を非表示時と表示時に変更する必要がありますが、これはまだ実装されていませんが、大きな問題ではないと感じています。
  バックグラウンドコードは投稿しません。必要な場合はメッセージを残してください。実際には非常に簡単ですが、ノードの再帰的なソートが面倒な部分です。
  表示効果: