Layui的eleTree树式选择器，分单选和多选，带搜索功能

在本文中，我们将深入探讨Layui中的eleTree树式选择器，这是一个强大的组件，尤其适用于数据层次结构明显的场景，如组织结构、地区层级、权限管理等。eleTree提供了单选和多选功能，并且内置了搜索功能，使得用户能够更高效地在大量数据中定位目标。 ### 一、eleTree简介 eleTree是基于Layui框架的一个扩展组件，它以树形结构展示数据，支持多种交互操作，包括展开/折叠节点、选择节点、拖拽节点等。eleTree设计简洁，易用性强，与Layui的其他组件兼容性良好，可以无缝集成到Layui项目中。 ### 二、单选和多选模式 1. **单选模式**：在单选模式下，用户只能选择一个节点，当选中一个节点时，之前选中的节点会自动取消选中。这种模式通常用于需要明确唯一选择的场景。 2. **多选模式**：多选模式允许用户同时选择多个节点，可以满足用户需要选取多个选项的需求。通过设置参数`checkStrictly`，可以控制是否开启严格多选模式，即子节点的选中状态不受父节点的影响。 ### 三、搜索功能 eleTree的搜索功能让用户能够在树形结构中快速查找目标节点。只需在搜索框中输入关键字，eleTree会即时过滤出匹配的节点并高亮显示。搜索功能的实现依赖于`filter`方法，可以自定义过滤规则，提高搜索的灵活性。 ### 四、使用步骤 1. **引入依赖**：你需要在项目中引入eleTree的CSS和JS文件，以及Layui的核心库。 2. **HTML结构**：创建一个`<div>`作为eleTree的容器，并设定相应的ID。 3. **初始化配置**：在JS中，使用`layui.use()`加载eleTree模块，然后调用`layui.eleTree`方法，传入配置对象，如数据源、选择模式、搜索配置等。 4. **事件监听**：可以通过`on`方法监听eleTree的各种事件，如节点点击、选中变化等，实现业务逻辑。 ### 五、示例代码 以下是一个基本的eleTree配置示例： ```javascript layui.use(['eleTree'], function () { var eleTree = layui.eleTree; // 数据源 var data = [ { id: 1, name: '节点1', children: [{ id: 11, name: '子节点1' }, { id: 12, name: '子节点2' }] }, { id: 2, name: '节点2' } ]; // 初始化eleTree eleTree.render({ elem: '#tree', data: data, checkType: 'checkbox', // 设置为多选模式 searchKey: 'name', // 搜索关键字字段 showLine: true, // 显示连接线 search: true, // 开启搜索 onCheck: function (obj) { console.log('选中节点:', obj); } }); }); ``` ### 六、参数详解 eleTree提供了丰富的配置参数，例如： - `data`：树的数据源，可以是JSON数组或Ajax请求地址。 - `checkType`：选择模式，可选值有`radio`（单选）和`checkbox`（多选）。 - `searchKey`：指定搜索关键字所在的字段名。 - `showLine`：是否显示节点间的连线。 - `onCheck`：节点被选中时触发的回调函数，返回包含当前节点信息的对象。 ### 七、注意事项 1. 在多选模式下，若需保持父子节点联动，需要关闭`checkStrictly`。 2. 节点数据中，`id`字段是必须的，用于识别节点，`name`字段通常是显示的文本。 3. eleTree的搜索功能默认是全匹配，如果需要部分匹配，需要在`filter`方法中自定义实现。 以上就是关于Layui的eleTree树式选择器的详细介绍，它集成了单选、多选和搜索功能，是构建高效、易用界面的理想工具。希望这篇文章能帮助你更好地理解和使用这个组件。在实际开发中，你可以根据具体需求调整配置，打造符合业务场景的完美用户体验。