JQuery 的Treeview 后台生成树结构,使用记录:
jquery.treeview.js
1.页面添加对应JQuery的.Js文件和Treeview的.js 文件。
$("#tree").treeview({
collapsed: true,
animated: "medium",
unique: true,
control:"#sidetreecontrol",
persist: "location",
click: function() {
alert(this);
}
});
2.页面加上一个PlaceHolder控件。后台在Page_load的时候,组页面元素。
例如:
plTreeHolder.Controls.Add(new LiteralControl(oBuilder.ToString()));
Tree的结构如下:
<ul id="red" class="treeview-red">
<li><span>第1層</span>
<ul>
<li><span>第2層</span>
<ul>
<li><span>第3層</span>
<ul>
<li><span><a href="?Tel">Item 1.2.0.0</a></span></li>
…
sample code:
System.Text.StringBuilder oBuilder = new System.Text.StringBuilder();
oBuilder.AppendLine("<ul id=\"tree\" class=\"treeview-gray\">");
AppendFirst(oBuilder);
oBuilder.AppendLine("</ul>");
plTreeHolder.Controls.Add(new LiteralControl(oBuilder.ToString()));
public void AppendFirst(System.Text.StringBuilder oBuilder)
{
try
{
WebService service = new WebService();
DepClass[] list = service.GetFirstDep();
if (list == null)
{
return;
}
foreach (DepClass dep in list)
{
oBuilder.AppendLine("<li><div class=\"treeview-gray-h1\"> " + dep.ToString() + "</div>");
oBuilder.AppendLine("<ul>");
AppendSecond(oBuilder, dep.Pkey);
//AppendPhone(oBuilder, dep.Pkey,1);
oBuilder.AppendLine("</ul>");
oBuilder.AppendLine("</li>");
}
}
catch
{
}
}
通过上面的方式,可以在页面加载的时候,自动通过后台程式组出tree的格式并在页面上显示。
缺点:当资料少的时候,还可以,但是当资料很大的时候,页面一次性加载好多资料,会使页面速度下降。性能不好,不知道jquery.treeview.js是否可以点一个节点再去获取的功能?我是没找到对应的方法。
FileTree使用记录:
这个Jquery插件可以使用ajax的方式,点击节点到后台读取资料,并返回显示Tree。需要调整一下他提供的Sample。如下:
1.页面加一个 <div id="tree" class="demo"></div> 元素
2.在加载页面时,定义该FileTree元素。
$('#tree').fileTree({ script: 'GetTree.aspx' , folderEvent: 'click', multiFolder: false}, function(file) {
alert(file);
});
script:定义获取的tree的页面。
multiFolder:false 表示同一层的treenode同时只展开一个。当展开一个另一个已经展开的node收起。
3.编辑GetTree.aspx文件。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetTree.aspx.cs" Inherits="GetTree" %>
<%
string dir;
if(Request.Form["dir"] == null || Request.Form["dir"].Length <= 0)
dir = "/";
else
dir = Server.UrlDecode(Request.Form["dir"]);
string dirstr = System.IO.Path.GetDirectoryName(dir);
System.IO.FileInfo fi = new System.IO.FileInfo(dir);
System.IO.DirectoryInfo di = fi.Directory;
if (di == null) //表示第一层的node的获取。
{
System.Text.StringBuilder oBuilder = new StringBuilder();
WebService serivce = new WebService();
serivce.AppendFirst(oBuilder); //生成第一层的节点
Response.Write(oBuilder.ToString());
}
else
{
if (di.Name.StartsWith("A_")) //目前使用一共最多3层,所以定义A,B,C的key分别标记要获取哪一层的节点。
{
System.Text.StringBuilder oBuilder = new StringBuilder();
WebService serivce = new WebService();
serivce.AppendSecond(oBuilder, di.Name.Substring(2));
Response.Write(oBuilder.ToString());
}
else if (di.Name.StartsWith("B_"))
{
System.Text.StringBuilder oBuilder = new StringBuilder();
WebService serivce = new WebService();
serivce.AppendThird(oBuilder, di.Name.Substring(2));
Response.Write(oBuilder.ToString());
}
else if (di.Name.StartsWith("C_"))
{
System.Text.StringBuilder oBuilder = new StringBuilder();
WebService serivce = new WebService();
serivce.AppendPhone(oBuilder, di.Name.Substring(2),3);
Response.Write(oBuilder.ToString());
}
}
//System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(dir);
//Response.Write("<ul class=\"jqueryFileTree\" style=\"display: none;\">\n");
//foreach (System.IO.DirectoryInfo di_child in di.GetDirectories())
// Response.Write("\t<li class=\"directory collapsed\"><a href=\"#\" rel=\"" + dir + di_child.Name + "/\">" + di_child.Name + "</a></li>\n");
//foreach (System.IO.FileInfo fi in di.GetFiles())
//{
// string ext = "";
// if(fi.Extension.Length > 1)
// ext = fi.Extension.Substring(1).ToLower();
// Response.Write("\t<li class=\"file ext_" + ext + "\"><a href=\"#\" rel=\"" + dir + fi.Name + "\">" + fi.Name + "</a></li>\n");
//}
//Response.Write("</ul>");
%>
function:
public void AppendFirst(System.Text.StringBuilder oBuilder)
{
try
{
DepClass[] list = GetFirstDep();
if (list == null)
{
return;
}
oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");
foreach (DepClass dep in list)
{
oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h1\" href=\"#\" rel=\"\\A_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
}
oBuilder.AppendLine("</ul>");
}
catch
{
}
}
public void AppendSecond(StringBuilder oBuilder, string upkey)
{
try
{
DepClass[] list = GetDep(upkey);
if (list == null)
{
return;
}
oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");
foreach (DepClass dep in list)
{
oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h2\" href=\"#\" rel=\"\\B_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
}
AppendPhone(oBuilder, upkey, 1);
oBuilder.AppendLine("</ul>");
}
catch (System.Exception exp)
{
}
}
public void AppendThird(StringBuilder oBuilder, string upkey)
{
try
{
DepClass[] list = GetDep(upkey);
if (list == null)
{
return;
}
oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");
foreach (DepClass dep in list)
{
oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h3\" href=\"#\" rel=\"\\C_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
}
AppendPhone(oBuilder, upkey, 2);
oBuilder.AppendLine("</ul>");
}
catch (System.Exception exp)
{
}
}
优点:当资料大的时候,可以每次只获取要显示的节点的数据。页面处理效能很好。