layui tree实现获取子节点所有值的实例代码

2024-11-15实例代码
192

layui tree实现获取子节点所有值的实例代码,具体代码如下:
layui.use(['tree', 'form'], function(){
  var tree = layui.tree;
  var form = layui.form;
  
  // 模拟数据
  var data = [
    {
      name: '节点1',
      id: 1,
      children: [
        {name: '节点1-1', id: 11, children: [{name: '节点1-1-1', id: 111}]},
        {name: '节点1-2', id: 12}
      ]
    }
    // ... 其他节点数据
  ];
  
  // 初始化树
  tree.render({
    elem: '#test' // 绑定元素
    ,data: data
    ,showCheckbox: true // 显示复选框
    ,id: 'id' // 设置节点id的属性名
    ,oncheck: function(obj){
      var childIds = getAllChildIds(obj.data, []);
      console.log(childIds);
    }
  });
  
  // 递归获取所有子节点的ID
  function getAllChildIds(node, ids) {
    if (node.children && node.children.length > 0) {
      node.children.forEach(function(child) {
        ids.push(child.id);
        getAllChildIds(child, ids);
      });
    }
    return ids;
  }
});
The End

相关推荐

layui后台布局实例代码
layui后台布局的实例代码,以下是详细代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...
2025-10-15 实例代码
68

可自动切换的tab实例代码
可自动切换的tab实例代码,html代码如下: !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...
2025-09-16 实例代码
114

php数据处理:数组根据某字段进行分组
php数据处理:数组根据某字段进行分组,实例代码如下: /** * @description:根据数据 * @param {dataArr:需要分组的数据;keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...
2025-06-12 实例代码
188

LayUI登录页面页设计实例
实例代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...
2025-04-13 实例代码
234

MUI Picker Input设置默认时间回显实例代码
MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数:'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...
2025-01-09 实例代码
139

layui实现带清除按钮的输入框
layui实现带清除按钮的输入框,首先html文件如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...
2024-12-31 实例代码
200