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.
分享到:
相关推荐
NULL 博文链接:https://zhuoyaopingzi.iteye.com/blog/1255150
基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件、复选事件,异步加载等功能,简单好用,欢迎下载demo。 基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件、...
JavaScript树形菜单,已封装 , 简单易用!做项目,OA,系统什么都用得上。
利用封装的dTree.js文件动态创建树形菜单 使用el表达式
封装、继承(csdn)————程序
python面向对象中对封装的理解(csdn)————程序
Android任意层级树形菜单 免费视频课程传送门 【点击传送】 作者微博: @安卓攻城师sloop 实现过程: 1.将用户数据转化为node节点 2.设置节点之间的关联关系 3.排序 4.过滤需要显示的数据 涉及到的知识: 1.树形...
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件,数据封装在data.js里面,直接修改调用即可。
【Android】Android 封装 Http 请求工具(csdn)————程序
详解二次封装VLAN技术——QINQ 实例讲解
我国半导体封装产业面临的机遇和挑战——第八届中国半导体封装测试技术与市场研讨会开幕辞.pdf
基于ztree封装的Vue树形组件,轻松实现海量数据的高性能渲染.zip
jQuery折叠展开树形菜单代码是一款多级子菜单折叠展开效果,列表菜单数据封装在data.js里面,直接修改调用即可。
测试文件 博文链接:https://hegz.iteye.com/blog/628561
vue之封装自己的树组件视频 手把手教你封装自己的组件
socket编程——c语言封装——c++封装(一对一对话).zip
1、在一些web开发中,有时需要树形的菜单来对数据进行展现,本源码就是这个功能的封装实现,可以直接集成于项目中进行使用。 二、注意事项 1、开发环境为Visual Studio 2015,使用.net 4.0开发。
象WIN7,自SP1以来有150个左右大大小小的补丁,如果安装原版,网速慢的,一个上午也打不完。而WIN8与8.1的补丁就更加不象话了,一个个大得惊人,更是费时费力。 补丁整合有两种方法,一是如教程所示,二是用DISM...
Android——okhttp的封装,Android——okhttp的封装,Android——okhttp的封装,Android——okhttp的封装,Android——okhttp的封装