打包一个树形菜单二——JS渲染树
日期：2014-05-16 浏览次数：20511 次
Part1:Get a tree widget
Here are many useful tree widgets :http://www.ajaxline.com/best-javascript-tree-widgets
?
I chose the one which is easiest to use ---- dtree, through which I can create a powful tree by just importing the given dtree.js file.
?
Here is the official website of dtree and you can find api and examples:
http://destroydrop.com/javascripts/tree/
?
?添加一个节点，可以指定该节点跳转的URL，例子中没有写点击后，怎么执行一个js事件，补充一下：
?
//跳转到example01.html页面 d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir'); //执行alert d.add(11,9,'Mom\'s birthday','javascript:alert(\'bb\')');
?
这里javascript里面只能写单引号，再转意，因为dtree.js文件中用了双引号，如果写成javascript:alert(" bb" )，是搞不定的。
?
?
Part2:Write an ASP widget to get the data from webserver and pass them to dtree.
see the workout ~
?
First,write an asp page to allow the tree to be showed when certain button is clicked.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button Text="click" OnClick="AddBtn_Click" runat="server" />
</div>
</form>
</body>
</html>
?Second, the cs file to fulfill the AddBtn_Click event, which would fetch the data from the web server and draw the proper tree with the help of dtree js.
?
?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using com.Origin.Base.test.mywork.Tree;
public partial class tree_Default : System.Web.UI.Page
{
private ITreeReaderFactory factory = new XMLTreeRreaderFactory(@"D:\\menu.xml");
protected void Page_Load(object sender, EventArgs e)
{
}
public ITreeNode fetchRoot()
{
ITreeNode root = null;
ITreeReader reader = factory.createTreeReader();
root = reader.createTree();
return root;
}
public void AddBtn_Click(object sender, EventArgs e)
{
string rootName = (string)fetchRoot().getAttribute("name");
string str = "";
str += "<script type='text/javascript' src='dtree.js'></script>";
str += "<script type='text/javascript'>";
str += " d = new dTree('d');";
ITreeNode root = fetchRoot();
//把树转换为dtree的格式
str += convertToDTree(root, null);
//str += "d.add('用户管理',-1,'My example tree');";
//str += "d.add('创建用户','用户管理','My example tree');";
////str += "d.add('创建员工','创建用户','创建员工');";
////str += "d.add('创建客户','创建用户,'创建客户');";
str += "document.write(d);";
str += "</script>";
Response.Write(str);
}
public static string convertToDTree(ITreeNode root, string parent)
{
string name = (string)root.getAttribute("name");
string url = (string)root.getAttribute("url");
string add = "";
if (parent == null)
{
add = "d.add('" + name + "',-1,'" + name + "');";
}
else
{
add = "d.add('" + name + "','" + parent + "','" + name + "');";
}
IList<ITreeNode> subNodes = root.getSubNodes();
if (subNodes == null)
