封装一个树形菜单二——JS渲染树

dtree.js教程

最新推荐文章于 2024-04-10 09:00:00 发布

最新推荐文章于 2024-04-10 09:00:00 发布 · 330 阅读

文章标签：

#javascript #tree #asp #ViewUI

我也写界面专栏收录该内容

7 篇文章

订阅专栏

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)
        {
            return add;
        }
        else
        {
            for (int i = 0; i < subNodes.Count; i++)
            {
                ITreeNode node = subNodes[i];
                add += convertToDTree(node, name);
            }
        }
        return add;
    }

}

OK~ the function is ...potboiled . Because there are many flaws and hard to be used. Next time I will make it widget and the path of the XML will not be hard coded any more. Also allow users to decide the words to math the key of name , url and so on. In conclusion , I will try to make the hard codes not be hard in the next version.