利用dtree实现网页树状菜单，动态传递联系人数据到js

本文主要介绍了如何在Web页面中使用DTREE（纯JavaScript树状菜单组件）实现一个联系人选择框，允许用户复选多个联系人，并将所选联系人的手机号添加到输入框的功能。DTREE由于其轻量级、易于配置和可扩展性（如支持复选框）的特点，被作者认为是实现这种需求的理想工具。 首先，DTREE的优势在于无需额外的JAR包，只需在JavaScript代码中进行配置即可。作者发现经过社区改良的版本更便于集成，因为它提供了更丰富的功能，比如支持复选框，有助于提升用户体验。然而，由于DTREE本身是前端组件，与服务器的交互成了开发过程中的挑战。为了解决这个问题，作者采取了分步骤的方法： 1. 后台处理：作者通过调用(directoryService)获取目录数据和(linkManService)获取联系人数据。将这些数据整理成字符串形式，例如`direStringstring`和`linkString`，分别存储目录ID和联系人及其所属目录的信息。 ```java directories = this.directoryService.GetAllDirecoty(); selectlinkMans = this.linkManService.GetAllLinkMans(); // 数据处理 String direStringstring = ""; String linkString = ""; for (int i = 0; i < directories.size(); i++) { // ...（处理并连接数据） } for (int i = 0; i < selectlinkMans.size(); i++) { // ...（处理并连接数据） } ``` 2. 数据传递：将后台生成的字符串传递到前端。由于DTREE不直接支持与服务器的交互，作者需要将数据先发送到服务器，然后通过字符串操作在前端解析。这涉及到将后台返回的目录ID和联系人信息切割并转换为适合DTREE组件使用的数据结构。 3. 前端接收和处理：在JavaScript中，作者通过字符串处理函数将后台返回的字符串切割成数组，然后动态创建DTREE的节点，包括节点的文字内容和可能的复选状态。这样，用户可以选择多个联系人，并在点击确认后，将选中的联系人的手机号添加到输入框中。 本文主要讲述了利用DTREE实现前端树状菜单选择联系人功能的具体步骤，包括数据的后台获取、前端处理和节点的动态生成，以及如何通过字符串操作解决与纯JavaScript组件的交互问题。这种方法对于希望在前端实现动态树形控件且保持轻量级的开发者来说，具有实用价值。