js移动端树型列表


完整demo下载


效果图

效果图

使用示例


html

<div id="treeBox"></div>

js

var G_treeData=[
    {
        name: 'title',
        id: 'title',
        totalNumber: 100,
        haveNumber: 38,
        subject_id: 'title',
        data:[
            {
                name: 'title',
                id: 'title',
                totalNumber: 100,
                haveNumber: 38,
                subject_id: 'title',
            },
            {
                name: 'title',
                id: 'title',
                totalNumber: 100,
                haveNumber: 38,
                subject_id: 'title',
            }
        ]
    }
]

var List = new AM_List($('.AM-tree-box'));
List.init(G_treeData,function(e){
    console.log(e); 
});
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对象列表树型列表的过程可以通过递归实现。假设我们有一个对象列表,每个对象有一个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": [] } ] } ] } ] } ] ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值