layui树形菜单动态遍历的例子

layui树形菜单动态遍历的完整攻略

1. 前置条件

要实现layui树形菜单的动态遍历，需要先了解Layui框架的基本使用以及树形菜单的基本实现原理。

2. 实现过程

（1）准备数据源

要在页面上实现树形菜单的动态遍历，首先需要准备数据源。数据源可以是静态的，也可以从数据库、接口等动态获取。在本次示例中，以JSON格式的静态数据为例：

var data = [
  {
    "id": 1,
    "name": "目录1",
    "children": [
      {
        "id": 11,
        "name": "目录11",
        "children": [
          {
            "id": 111,
            "name": "目录111",
            "children": []
          }
        ]
      },
      {
        "id": 12,
        "name": "目录12",
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "目录2",
    "children": [
      {
        "id": 21,
        "name": "目录21",
        "children": []
      },
      {
        "id": 22,
        "name": "目录22",
        "children": []
      }
    ]
  }
];

（2）渲染树形菜单

接下来，需要使用Layui的tree组件来渲染树形菜单。示例代码如下：

layui.use(['tree'], function(){
  var tree = layui.tree;

  // 渲染树形菜单
  tree.render({
    elem: '#tree',  // 渲染elem元素中的树形菜单
    data: data,     // 数据源
    showCheckbox: true,  // 显示复选框
    id: 'demoId',    // 手风琴模式需要定义id
    accordion: true,  // 手风琴模式开启
    click: function(obj){  // 点击树节点的事件
      console.log(obj);
    }
  });
});

通过以上代码，我们可以将数据源中的数据渲染成一棵树形菜单，并在树节点上添加点击事件。

（3）遍历树形菜单

当需要遍历树形菜单时，需要使用tree组件中的getNode方法，将树形菜单转换成一个标准的JSON对象。接着，遍历JSON对象即可实现对树形菜单的遍历操作。示例代码如下：

layui.use(['tree'], function(){
  var tree = layui.tree;

  // 获取树形菜单的数据源
  var data = tree.getData('demoId');  // demoId为树形菜单的id值

  // 遍历树形菜单
  function traverseMenu(data) {
    for(var i=0; i<data.length; i++) {
      var item = data[i];

      // 执行遍历操作
      console.log(item.name);

      // 判断是否还有子节点，如果有则继续遍历子节点
      if(item.children.length > 0) {
        traverseMenu(item.children);
      }
    }
  }

  // 加载完成后遍历树形菜单
  tree.render({
    elem: '#tree',
    data: data,
    showCheckbox: true,
    id: 'demoId',
    accordion: true,
    click: function(obj){
      console.log(obj);
    },
    done: function(){
      // 遍历树形菜单
      traverseMenu(data);
    }
  });
});

在以上示例代码中，我们通过定义一个traverseMenu函数，并使用递归算法来实现对树形菜单的遍历操作。同时，我们也可以使用其他算法实现遍历操作，比如深度优先搜索算法。

3. 示例说明

（1）获取当前选中节点的子节点

如果需要获取当前选中节点的所有子节点，可以通过以下代码实现：

layui.use(['tree'], function(){
  var tree = layui.tree;

  // 获取树形菜单的数据源
  var data = tree.getData('demoId');

  // 点击树节点时的事件
  function onClickTreeNode(obj) {
    // 获取当前选中的节点
    var node = obj.data;

    // 获取当前选中节点的所有子节点
    var children = node.children;

    // 打印子节点的个数
    console.log("当前节点的子节点个数为：" + children.length);
  }

  // 加载完成后遍历树形菜单
  tree.render({
    elem: '#tree',
    data: data,
    showCheckbox: true,
    id: 'demoId',
    accordion: true,
    click: function(obj){
      onClickTreeNode(obj);
    }
  });
});

（2）根据节点id获取节点

如果需要根据节点id获取节点对象，可以使用tree组件的getNode方法来实现。示例代码如下：

layui.use(['tree'], function(){
  var tree = layui.tree;

  // 获取树形菜单的数据源
  var data = tree.getData('demoId');

  // 通过节点id获取节点对象
  function getNodeById(id) {
    var node = tree.getNode('demoId', id);
    console.log("id为" + id + "的节点对象为：" + JSON.stringify(node));
  }

  // 加载完成后遍历树形菜单
  tree.render({
    elem: '#tree',
    data: data,
    showCheckbox: true,
    id: 'demoId',
    accordion: true,
    click: function(obj){
      getNodeById(obj.data.id);
    }
  });
});

以上代码中的getNodeById方法，需要传入节点id参数，然后使用tree组件的getNode方法获取节点对象。获取到节点对象后，我们可以对其进行操作。比如打印节点的name属性。