効果は次のとおりです:
選択:
ドラッグ:
jquery.simple.tree 公式 Web サイトのアドレス: http://news。 kg/wp -content/uploads/tree/ (開けなくなったようです) ですが、操作は比較的簡単なので、今回はこれを使用します。
前に述べたように、jquery EasyUI Tree プラグインはシンプルで使いやすいですが、テストした結果、まだ多くの欠点があります。
例:
1. IE8 と互換性のある AJAX に問題があります。 。
2. 非同期返信データが遅い場合、読み込み失敗が発生する可能性があります。
3. Tree 関数のみを使用しますが、そのサイズは非常に巨大です。 ...
必要なのは、優れた互換性、非同期、サイズの小ささです (Tree が使用されるシナリオは実際にはほとんどないため、専用のコード ファイルの方が適しています。)
さて、jquery.simple .tree の旅を始めましょう:
まず、CSS、Jquery メイン ファイル、および独自の js ファイルの合計 3 つのファイルを読み込みます。
次に、Tree を定義するコードを読み込みます。
最後に、このルート ノードの HTML コードを記述します。ツリー;
フロントエンド コードは次のとおりです:
;
title>
= "simpleTree">
地域の選択
中国
- {url:/common/GetGroupHtmlByPid.ashx? pid =0}
>
バックエンド応答コード:
GetGroupHtmlByPid.ashx.cs
コードをコピーします
コードは次のとおりです:
パブリック クラス GetGroupHtmlByPid : IHttpHandler
{
GroupManager グループ;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int 親 ID = -1;
int 型 = 0;
文字列結果Str = string.Empty;
if (!context.Request.QueryString["pid"].IsNullOrEmpty())
{
Int32.TryParse(context.Request.QueryString["pid"], outparentId);
}
if (!context.Request.QueryString["type"].IsNullOrEmpty())
{
Int32.TryParse(context.Request.QueryString["type"], out type) ;
}
if (parentId >= 0)
{
try
{
group = new GroupManager((GroupType)type);
var subAg = group.AllGroups.Where(c => c.ParentId ==parentId);
resultStr = "
";
foreach (subAg の Base_group アイテム)
{
resultStr = "- " item.GroupName "";//ここでは解読可能です前台番号は何要.substr(2);
resultStr = "- {url:/common/GetGroupHtmlByPid.ashx?pid=" item.GroupId "}
";
resultStr = " ";
}
resultStr = "
";
}
catch (例外例)
{
}
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
后台看起来有点别扭,因為此插件本身只HTML支持节点加下,不过网上有人进行扩展了,用了JSON,不过
のすべての jquery.simple.tree アプリケーションの利点:
の利点: サイズが小さく、互換性が高く、実行可能で、実行がサポートされています。
欠点: 初期化の際に大幅な追加が必要な場合は、手動で変更された実行コードが必要になります。後台维护無制限分类,非常方便,有待读者自己去出版,希望本文能够抛砖引玉,对你有所帮助!変更後のダウンロード アドレス:
simpletree.rar
最初の初期化時にコンテンツを追加できるように、2 行コードのみを変更しました。