详解layui中的树形关于取值传值问题

下面是关于 layui 中树形结构的取值和传值的完整攻略。

什么是 layui 树形结构

layui 是一个前端 UI 框架，其内置了丰富的组件，方便前端开发。其中，layui.tree 组件是一个树形组件，可以方便地实现树形结构。

layui 树形结构的取值问题

在 layui 的树形结构中，我们可以通过以下方式获取选中节点的值：

// 获取树形结构中选中的节点数据
var checkedData = layui.tree.getChecked('treeDemo');

其中，treeDemo 是树形结构的 id。这样一来，checkedData 变量中就存储了树形结构中选中的节点数据。

layui 树形结构的传值问题

layui 的树形结构中的节点除了自带的 id、name 属性外，还可以添加其他的属性。我们可以在节点属性中添加任何信息，例如角色id、用户id等等。这样一来，在选中节点时就可以直接获取到对应节点的信息。可以通过以下方式实现：

// 示例数据
var data = [{
    title: '节点1',
    id: 1,
    children: [{
        title: '节点1.1',
        id: 2,
        children: [{
            title: '节点1.1.1',
            id: 3,
            roleId: 1 // 添加了角色id属性
        }]
    }]
}];

// 渲染树形结构
layui.tree({
    elem: '#tree',
    nodes: data,
    click: function(node) {
        console.log(node.roleId); // 获取角色id
    }
});

上述代码中，我们在节点属性中添加了一个 roleId 参数。在选中节点时，我们可以通过 node 对象获取该节点属性中的 roleId 信息。

另外，我们还可以通过 layui 的全局 search 方法进行树形节点的搜索。搜索时，我们也可以通过节点的属性进行搜索。以下是一个示例：

// 示例数据
var data = [{
    title: '节点1',
    id: 1,
    roleId: 1,
    children: [{
        title: '节点1.1',
        id: 2,
        roleId: 2,
        children: [{
            title: '节点1.1.1',
            id: 3,
            roleId: 3
        }]
    }]
}];

// 渲染树形结构
layui.tree({
    elem: '#tree',
    nodes: data
});

// 搜索节点
var keyword = '测试';
layui.tree.search('tree', keyword, function(node) {
    console.log(node.roleId); // 输出选中节点的角色id信息
});

在上述示例中，我们在搜索时会遍历树形结构，然后在节点属性 roleId 中搜索对应的信息。

总结一下，我们可以通过在节点属性中添加信息来方便地获取和传递节点的信息，这样大大方便了我们的前端开发工作。