layui tree 单选实例

以下是一个基于 layui 的树形结构单选实例：

HTML 代码：

<div class="layui-form-item">
  <label class="layui-form-label">选择菜单</label>
  <div class="layui-input-block">
    <input type="hidden" name="menuId" id="menuId" value="">
    <div id="menuTree"></div>
  </div>
</div>

JavaScript 代码：

layui.use(['tree', 'form'], function(){
  var tree = layui.tree,
      form = layui.form;
  
  // 模拟数据
  var data = [{
    title: '菜单1',
    id: 1,
    children: [{
      title: '子菜单1-1',
      id: 101
    },{
      title: '子菜单1-2',
      id: 102
    }]
  },{
    title: '菜单2',
    id: 2,
    children: [{
      title: '子菜单2-1',
      id: 201
    },{
      title: '子菜单2-2',
      id: 202
    }]
  }];
  
  // 渲染树形结构
  tree.render({
    elem: '#menuTree',
    data: data,
    showCheckbox: false,
    click: function(obj){
      // 点击节点时，获取节点 ID 并设置到隐藏域中
      $('#menuId').val(obj.data.id);
    }
  });
  
  // 监听表单提交事件
  form.on('submit(formDemo)', function(data){
    // 获取选中的菜单 ID
    var menuId = $('#menuId').val();
    console.log(menuId);
    // 提交表单
    return false;
  });
});

说明：

1. 首先，我们通过 layui.use 引入了 tree 和 form 模块。
2. 然后，我们定义了一个模拟数据 data，其中包含了两个菜单及其子菜单。
3. 接下来，我们使用 tree.render 方法渲染树形结构，其中 elem 指定了渲染的 DOM 元素，data 指定了渲染的数据，showCheckbox 设置为 false 表示不显示复选框，click 函数监听了树形结构的点击事件，当点击节点时，获取节点的 ID 并设置到一个隐藏域中。
4. 最后，我们监听了表单的提交事件，获取隐藏域中的菜单 ID，并提交表单。