树型列表的实现

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 树型列表的实现 </ title >
< style  type ="text/css" >
<!--
ul.tree, ul.tree ul 
{
     list-style-type
: none;
   
}

      ul.tree, ul.tree ul 
{
     list-style-type
: none;
     background
: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
     margin
: 0;
     padding
: 0;
   
}

   
   ul.tree ul 
{
     margin-left
: 10px;
   
}


   ul.tree li 
{
     margin
: 0;
     padding
: 0 12px;
   
}

      ul.tree, ul.tree ul 
{
     list-style-type
: none;
     background
: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
     margin
: 0;
     padding
: 0;
   
}

   
   ul.tree ul 
{
     margin-left
: 10px;
   
}


   ul.tree li 
{
     margin
: 0;
     padding
: 0 12px;
     line-height
: 20px;
     background
: url(http://www.ximicc.com/attachments/month_0803/n200832013377.jpg) no-repeat;
     color
: #369;
     font-weight
: bold;
   
}

      ul.tree li.last 
{
     background
: #fff url(http://www.ximicc.com/attachments/month_0803/0200832013458.jpg) no-repeat;
   
}

-->
</ style >
</ head >

< body >
   
< ul  class ="tree" >
    
< li > Animals
     
< ul >
      
< li > Birds </ li >
      
< li > Mammals
       
< ul >
        
< li > Elephant </ li >
        
< li  class ="last" > Mouse </ li >
       
</ ul >
      
</ li >
      
< li  class ="last" > Reptiles </ li >
     
</ ul >
    
</ li >
    
< li  class ="last" > Plants
     
< ul >
      
< li > Flowers
       
< ul >
        
< li > Rose </ li >
        
< li  class ="last" > Tulip </ li >
       
</ ul >
      
</ li >
      
< li  class ="last" > Trees </ li >
     
</ ul >
    
</ li >
   
</ ul >
</ body >
</ html >

原文来自:http://www.ximicc.com/article.asp?id=87
对象列表树型列表的过程可以通过递归实现。假设我们有一个对象列表,每个对象有一个id和一个parent_id表示其在树中的层级关系。我们需要将这个对象列表转换成树型列表,其中每个节点都包含一个子节点列表。 具体实现步骤如下: 1. 首先定义一个递归函数,函数的参数包括当前节点的id和整个对象列表。 2. 在函数中,我们首先找到当前节点的所有子节点,也就是parent_id等于当前节点id的对象。 3. 遍历子节点列表,对于每个子节点,递归调用函数,将子节点作为参数传入,得到子节点的子节点列表。 4. 将子节点列表添加到当前节点的子节点列表中。 5. 最后返回当前节点的子节点列表。 代码示例(假设对象列表中每个对象都有id和parent_id属性): ``` function buildTree(nodeId, list) { const children = []; // 找到当前节点的所有子节点 for (let i = 0; i < list.length; i++) { if (list[i].parent_id === nodeId) { const childNode = list[i]; const childList = buildTree(childNode.id, list); childNode.children = childList; children.push(childNode); } } return children; } // 示例用法 const list = [ { id: 1, parent_id: null }, { id: 2, parent_id: 1 }, { id: 3, parent_id: 2 }, { id: 4, parent_id: 2 }, { id: 5, parent_id: 1 }, { id: 6, parent_id: 5 }, { id: 7, parent_id: 6 }, ]; const tree = buildTree(null, list); console.log(tree); ``` 输出结果: ``` [ { "id": 1, "parent_id": null, "children": [ { "id": 2, "parent_id": 1, "children": [ { "id": 3, "parent_id": 2, "children": [] }, { "id": 4, "parent_id": 2, "children": [] } ] }, { "id": 5, "parent_id": 1, "children": [ { "id": 6, "parent_id": 5, "children": [ { "id": 7, "parent_id": 6, "children": [] } ] } ] } ] } ] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值