layui树组件 配置快速搜索功能
时间: 2023-08-09 09:06:33 浏览: 56
在Layui树组件中开启搜索功能,需要在树组件的配置中添加`search: true`属性。例如:
`
layui.tree({
elem: '#treeDemo',
data: [{
title: '节点1',
id: 1,
children: [{
title: '节点1.1',
id: 11
}, {
title: '节点1.2',
id: 12
}]
}, {
title: '节点2',
id: 2,
children: [{
title: '节点2.1',
id: 21
}, {
title: '节点2.2',
id: 22
}]
}],
search: true // 开启搜索功能
});
```
同时,需要在每个节点中设置`name`属性,以便搜索时能够正确匹配。例如:
```
layui.tree({
elem: '#treeDemo',
data: [{
title: '节点1',
id: 1,
name: 'node1', // 设置name属性
children: [{
title: '节点1.1',
id: 11,
name: 'node1.1' // 设置name属性
}, {
title: '节点1.2',
id: 12,
name: 'node1.2' // 设置name属性
}]
}, {
title: '节点2',
id: 2,
name: 'node2', // 设置name属性
children: [{
title: '节点2.1',
id: 21,
name: 'node2.1' // 设置name属性
}, {
title: '节点2.2',
id: 22,
name: 'node2.2' // 设置name属性
}]
}],
search: true // 开启搜索功能
});
```
这样就可以在搜索框中输入关键字,快速搜索到对应的节点了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)