高手请指教，我要用javascript动态生成树型结构，怎么实现呢？？？？？

sandsworlf 2002-08-21 09:46:58
我要用javascript动态生成树型结构，静态的我会做，动态生成我不会，那位高手救我。。。。。。。。。
...全文
204 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
hao_ljp 2010-06-24
  • 打赏
  • 举报
 回复
ding.............
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
to sandsworlf(安):javascript不能和数据库直接打交道，如果要把数据库中的记录直接反映到显示的树中你必须要有一张节点表包含相应的节点信息。然后用jsp或asp等服务器脚本语言把相应的信息放到html中，你可以写一个相应的方法和我的程序相连。
to Fengxiubing2000(FXB):可以改，不过你要把其中的方法xg_GetChildren改一下还有把相应节点对象xg_TreeNode中的nodeIsView改为1，看一下注解吧！
你可以展开任意层次的东西。
Fengxiubing2000 2002-08-21
  • 打赏
  • 举报
 回复
请问up的树能定义展开层次吗?例如,我要一开始页面就能展开二级目录
sandsworlf 2002-08-21
  • 打赏
  • 举报
 回复
我的动态指的是，往数据库中增加一条记录时，结点自动增加一，并且在相应的父结点下显示出来，并不是事先设好的链接。
谢谢你的回复，请多指教我对javascript不熟悉
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
开始你可以点击根节点前面的图片，其中接点一也可以点,可能没有图片看起来不清楚，其中要有三个图片他们是OUTMINUS.BMP，OUTOPEN.BMP，OUTPLUS.BMP你就会看的比较清楚了。
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
当然是动态生成的啊！
对象xg_Tree存储所有的树的信息，xg_TreeNode对象存储相应的接点信息。
其中xg_Tree中的xg_TreeArray数组中的xg_TreeArray[0]存储根节点。
其中我只是给你一个例子罢了，你可以随便组合树中的节点信息
在xg_TreeNode(ANodeID,ANodeInnerHtml,ANodeParentID,ANodeDivID)
中ANodeID指唯一号，ANodeInnerHtml是指每个显示节点中的html代码，
ANodeParentID指父节点的ID号，ANodeDivID指节点显示曾的ID值。
不清楚你的动态是什么意思。
sandsworlf 2002-08-21
  • 打赏
  • 举报
 回复
你生成的是静态的吧，我要动态生成的
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
//***********************************************************************************************************************
//--- Function: control the view of the tree
//--- Return:
//--- Parameters:
//--- ANodeID: the node to be clicked
//--- AImg: the AImg object stand by with the node
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function div_viewOnclick(ANodeID,AImg){
with(xgTree){
if (0==xg_GetNodeCount(xgTree,ANodeID)) return;

var tmpNode=xg_TreeSearch(xgTree,ANodeID);
for (var i=0;i<xg_TreeArray.length;i++){
if (ANodeID==xg_TreeArray[i].nodeParentID){
if (0==tmpNode.nodeIsView)
eval(xg_TreeArray[i].nodeDivID+".style.display='inline';");
else
eval(xg_TreeArray[i].nodeDivID+".style.display='none';");
}
}
if (0==tmpNode.nodeIsView){
tmpNode.nodeIsView=1;
AImg.src='OUTMINUS.BMP';
} else{
tmpNode.nodeIsView=0;
AImg.src='OUTPLUS.BMP';
}
}
}
//***********************************************************************************************************************
function img_onmouseover(AImg){
AImg.style.filter='alpha(opacity=40)';
}
//***********************************************************************************************************************
function img_onmouseout(AImg){
AImg.style.filter='alpha(opacity=100)';
}
//***********************************************************************************************************************
</script>
</HEAD>
<BODY>
<form name="fmTree" method="post">
<script language=javascript>
var xgTree=new xg_Tree();
for (var i=0;i<10;i++){
var xgTreeNode=new xg_TreeNode(i+1,"<a href='temp1.html' target='_blank'>"+"接点"+(i+1)+"</a>",0,"xgDiv"+(i+1));
xgTree.xg_TreeInsert(xgTreeNode);
}

xgTreeNode=new xg_TreeNode(12,"<a href='temp2.html' target='_blank'>"+"接点"+12+"</a>",1,"xgDiv"+12);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(13,"<a href='temp2.html' target='_blank'>"+"接点"+13+"</a>",12,"xgDiv"+13);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(14,"<a href='temp2.html' target='_blank'>"+"接点"+14+"</a>",12,"xgDiv"+14);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(15,"<a href='temp2.html' target='_blank'>"+"接点"+15+"</a>",4,"xgDiv"+15);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(16,"<a href='temp2.html' target='_blank'>"+"接点"+16+"</a>",4,"xgDiv"+16);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(17,"<a href='temp2.html' target='_blank'>"+"接点"+17+"</a>",12,"xgDiv"+17);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(18,"<a href='temp2.html' target='_blank'>"+"接点"+18+"</a>",17,"xgDiv"+18);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(19,"<a href='temp2.html' target='_blank'>"+"接点"+19+"</a>",17,"xgDiv"+19);
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode=new xg_TreeNode(20,"<a href='temp2.html' target='_blank'>"+"接点"+20+"</a>",18,"xgDiv"+20);
xgTree.xg_TreeInsert(xgTreeNode);

// xgTree.xg_TreeDelete(xgTree,1);
</script>
<div id=divID></div>
</form>
</BODY>
</HTML>
<script language=javascript>
divID.innerHTML=xg_ShowTree(xgTree);
eval(xgTree.xg_TreeArray[0].nodeDivID+".style.display='inline';");
</script>
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
刚刚自己写了一个，没有层次限制的树，给你看看有什么建议尽管提，不过你最好找几个图片代替我的图片谢谢
<HTML>
<HEAD>
<TITLE> xg_delayth's Tree </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
//***********************************************************************************************************************
//--- Function: the define of tree's node object
//--- Return:
//--- Parameters:
//--- ANodeID: the nodeID of the treeNode
//--- ANodeInnerHtml: view in the node_div
//--- ANodeParentID: the nodeID of the parentNode,if it is the root node the ANodeParentID is "-1"
//--- ANodeDivID: the id of the node_div
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_TreeNode(ANodeID,ANodeInnerHtml,ANodeParentID,ANodeDivID){
this.nodeID=ANodeID;
this.nodeInnerHtml=ANodeInnerHtml;
this.nodeParentID=ANodeParentID;
this.nodeDivID=ANodeDivID;
//-- if 0 not view the children else if 1 view the children
this.nodeIsView=0;
}
//***********************************************************************************************************************
//--- Function: the define of xg_Tree
//--- Return:
//--- Parameters:
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_Tree(){
//-- store the information about the tree
this.xg_TreeArray=new Array();
//-- create the root node
this.xg_TreeArray[0]=new xg_TreeNode(0,"根节点",-1,"xgDiv0");
//-- store the tree_node number
this.xg_ArrayCount=1;

this.xg_TreeInsert=xg_TreeInsert;
this.xg_TreeSearch=xg_TreeSearch;
this.xg_TreeDelete=xg_TreeDelete;
this.xg_GetNodeCount=xg_GetNodeCount;
}
//***********************************************************************************************************************
//--- Function: insert a node into the tree
//--- Return:
//--- Parameters:
//--- ATreeNode: the new node to insert into the tree
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_TreeInsert(ATreeNode){
with(this){
//-- if ATreeNode is null or it's parentid is null or it's id had been in tree return -1;
if (!ATreeNode || ""==xg_TreeSearch(this,ATreeNode.nodeParentID) || ""!=xg_TreeSearch(this,ATreeNode.nodeID)){
return -1;
}
xg_TreeArray[xg_ArrayCount]=ATreeNode;
xg_ArrayCount++;
}
}
//***********************************************************************************************************************
//--- Function: search the node by the nodeID inputed
//--- Return:
//--- Parameters:
//--- AXGTree: the object of xg_Tree insert
//--- ANodeID: the nodeID about the searching node
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_TreeSearch(AXGTree,ANodeID){
with(AXGTree){
for (var i=0;i<xg_TreeArray.length;i++){
if (xg_TreeArray[i].nodeID==ANodeID){
return xg_TreeArray[i];
}
}
return "";
}
}
//***********************************************************************************************************************
//--- Function: Get children's count
//--- Return: the count of the number of children
//--- Parameters:
//--- AXGTree: the object of xg_Tree
//--- ANodeID: the parentnode's nodeID
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_GetNodeCount(AXGTree,ANodeID){
with(AXGTree){
var childCount=0;
for (var i=0;i<xg_ArrayCount;i++){
if (xg_TreeArray[i].nodeParentID==ANodeID){
childCount++;
}
}
return childCount;
}
}
//***********************************************************************************************************************
//--- Function: delete the node of the tree and it's children by recursion
//--- Return:
//--- Parameters:
//--- AXGTree: the object of xg_Tree
//--- ANodeID: the node to be deleted
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_TreeDelete(AXGTree,ANodeID){
with(AXGTree){
while(1==1){
if (0==xg_GetNodeCount(AXGTree,ANodeID)){ //-- if no children be found
for (var i=0;i<xg_TreeArray.length;i++){
//-- wipe off the delete_node
if (xg_TreeArray[i].nodeID==ANodeID){
for (var j=i+1;j<xg_TreeArray.length;j++){
xg_TreeArray[j-1]=xg_TreeArray[j];
}
//-- reduce the length of the array
xg_TreeArray.pop();
AXGTree.xg_ArrayCount--;
}
}
return ;
} else{ //-- if children be found,delete the children by recursion
for (var i=0;i<xg_ArrayCount;i++){
if (xg_TreeArray[i].nodeParentID==ANodeID){
xg_TreeDelete(AXGTree,xg_TreeArray[i].nodeID);
}
}
}
}
}
}
//***********************************************************************************************************************
//--- Function: make the show table
//--- Return:
//--- Parameters:
//--- AXGTree: the object of xg_Tree
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_ShowTree(AXGTree){
var tmpOut="";
tmpOut+="<table align=left>";
tmpOut+="<tr><td>";
tmpOut+=xg_GetChildren(AXGTree,0,0);
tmpOut+="</td></tr>";
tmpOut+="</table>";
return tmpOut;
}
//***********************************************************************************************************************
//--- Function: make the show div by recursion
//--- Return:
//--- Parameters:
//--- AXGTree: the object of xg_Tree
//--- ANodeID: the root nodeID
//--- ALevel: the level the div
//--- Create time: 2002-08-12 Change time: 2002-08-12
//--- Create Programer: xg_delayth Change Programer: xg_delayth
function xg_GetChildren(AXGTree,ANodeID,ALevel){
var tmpNode=xg_TreeSearch(AXGTree,ANodeID);
var tmpOut="";
with(tmpNode){
tmpOut+="<div id='"+nodeDivID+"' nodeID='"+nodeID+"' style='display:none;'>";
tmpOut+="<br>";
for (var i=0;i<ALevel;i++){
tmpOut+="   ";
}
tmpOut+="<img id='img"+tmpNode.nodeID+"' onmouseover='img_onmouseover(this);' onmouseout='img_onmouseout(this);' ";
if (0==xg_GetNodeCount(AXGTree,ANodeID)){
tmpOut+="src='OUTOPEN.BMP' ";
} else{
tmpOut+="src='OUTPLUS.BMP' ";
}
tmpOut+="width='16' height='16' onclick='div_viewOnclick("+nodeID+",this)' style='color:blue;cursor:hand;'> ";

tmpOut+=nodeInnerHtml;
for (var i=0;i<AXGTree.xg_TreeArray.length;i++){
if (ANodeID==AXGTree.xg_TreeArray[i].nodeParentID){
tmpOut+=xg_GetChildren(AXGTree,AXGTree.xg_TreeArray[i].nodeID,ALevel+1);
}
}
tmpOut+="</div>";
}
return tmpOut;
}
sandsworlf 2002-08-21
  • 打赏
  • 举报
 回复
to:xg_delayth(铁鹰)
你好，我把结果集查出来了，但是树型结构没有显示出来
我知识在你的程序里加上我的数据库连接和查询，别的没有变
我加入程序如下：
<<body bgcolor="#E8F4FF">

<%
Class.forName("oracle.jdbc.driver.OracleDriver");
String sConnStr="jdbc:oracle:thin:@billing:1521:myoracle";
Connection conn=DriverManager.getConnection(sConnStr,"newjqt","newjqt");
Statement stmt=conn.createStatement();
ResultSet rs;

rs=stmt.executeQuery("select * from xg_tree");

while(rs.next())
{ String id=rs.getString("id");
String parentid=rs.getString("parentid");
String recordvalue=rs.getString("recordvalue");
out.println(id);
out.println(parentid);
out.println(recordvalue);
}

%>

结果集显示了，但是别的都没有显示


对了，你说
<%
out.print("var xgTree=new xg_Tree();")
ResultSet rs=(取得结果集);
while (null!=rs && rs.next()){
out.print("xgTreeNode=new xg_TreeNode(从数据库中得到的相应信可以用rs.getString("字段名")要自己组织一下);");
out.print("xgTree.xg_TreeInsert(xgTreeNode);");
}
%>
用上面的代码替换最后一个<script language=javascript>和</script>之间的东西
javascript 里面能不能执行数据库的语句？（你的里面包含的有）
Fengxiubing2000 2002-08-21
  • 打赏
  • 举报
 回复
to:xg_delayth:我加了个函数
function xg_ShowTree2(AXGTree,ANodeID,vLevel){
var tmpOut="";
tmpOut+="<table align=left>";
tmpOut+="<tr><td>";
tmpOut+=xg_GetChildren(AXGTree,ANodeID,vLevel);
tmpOut+="</td></tr>";
tmpOut+="</table>";
return tmpOut;
}
然后,
var sOpen;
var xgTree=new xg_Tree();
for (var i=0;i<10;i++){
var xgTreeNode=new xg_TreeNode(i+1,"<a href='temp1.html' target='_blank'>"+"接点"+(i+1)+"</a>",0,"xgDiv"+(i+1));
xgTree.xg_TreeInsert(xgTreeNode);
xgTreeNode.nodeIsView=1;
sOpen+=xg_ShowTree2(xgTree,i+1,i+1);
}
divID.innerHTML=sOpen;
eval(xgTree.xg_TreeArray[0].nodeDivID+".style.display='inline';");
结果报错,请问错在哪,要怎样改才能展开指定的层次?
xg_delayth 2002-08-21
  • 打赏
  • 举报
 回复
老兄，你的问题好大，这涉及到数据库、jsp和javascript三个方面的东西。一般你先取得相应的数据库表的结果集得到一个ResultSet类的实例然后用类似下面的做法在jsp文件中
<%
out.print("var xgTree=new xg_Tree();")
ResultSet rs=(取得结果集);
while (null!=rs && rs.next()){
out.print("xgTreeNode=new xg_TreeNode(从数据库中得到的相应信可以用rs.getString("字段名")要自己组织一下);");
out.print("xgTree.xg_TreeInsert(xgTreeNode);");
}
%>
用上面的代码替换最后一个<script language=javascript>和</script>之间的东西，不过我认为以你现在的情况要完全理解有些问题。
我觉得你要的其实是对数据库的设计而不是动态的javascript脚本代码，你需要定义一种自己的树的相应的数据库结构如（Oracle语法）
create table xg_Tree(
RecordID number(9) not null primary key, --唯一号
ParentID number(9), --指向父节点RecordID
RecordValue varchar2(100) --本节点的信息
)
然后再编写相应的对这种结构的操作的函数，然后才能考虑和javascript的相连
sandsworlf 2002-08-21
  • 打赏
  • 举报
 回复
我是要用jsp 和javascript做树型结构，但是我不知道怎么联合起来用，你能告诉我吗？还有我不知道怎么给分，我今天才知道这个网站的，从这里我学了很多知识，谢谢你了。
使用jquery treetable生成数表，并且支持多选择列
## 目的 使用jquery treetable生成树表，并且支持多选择列。 ## 说明 - 简单测试了一下，应该没bug，可以多测测。 - 使用**mock.js**生成的数据 - 使用了**vue的响应原理**，这里纯属实验性的用用 - **树的中序列表**以及**先根表示**的相关遍历方法是自己写的，不知道有没有问题，如果有大神愿意指教，还请不要客气。
go语言｜数据结构：二叉树可视化（制作svg格式树形图）
SVG是可伸缩矢量图形 (Scalable Vector Graphics)，于2003年1月14日成为 W3C 推荐标准。SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体矩形 ......
前端学习-构造树形数组
如果有数据类型，需要前端对数组层级进行二次构造， 通过标志将单数组构造为树形结构数组 这里有两种方式 var arr = [{ id: "1", name: "部门A", parentId: "0" }, { id: "2", name: "部门B", parent
Pyecharts一文速学-绘制树形图实例+Python代码
之前写pandas和matplotlib的时候说到了想要出一期Pyechart系列数据可视化的文章。比起matplotlib，pyeacharts的图表要丰富而且好看，这取决于它是基于百度团队使用Javascript开发的商业级数据图表。而且pyechart文档全，便于开发和阅读文档，熟练掌握后是一种非常好用的数据可视化的工具之一。当然相比pandas的plot代码会繁琐一些，其中一些操作类方法也是比较复杂的，需要对其有个大概的掌握才能作出满意的图表。
前端学习之JavaScript活性器终见
今天笔者继续来学习前端的JS内容，内容大致有事件、Bom对象、Dom对象和表单。若有错误，请大家多多评论、指教~ 事件 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面 进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成， 或者是用户滚动窗口或改变窗口大小。 通过使用JavaScript ，你.
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章