在本文中，我们将探讨如何使用jQuery和zTree插件实现一个可拖拽的树形视图。zTree是一个流行的JavaScript库，它提供了丰富的树结构功能，包括拖放操作，这在许多应用程序中都非常有用，例如数据分组、组织结构管理等。 要使用zTree，你需要下载其官方提供的包，包含CSS样式文件和JavaScript库。在HTML页面中引入这些文件，创建一个`

`元素，并为其分配一个ID（例如"modelTree"）和类名"ztree"，这是zTree的基本结构。 ```html
``` 接下来，我们需要配置zTree的设置。这通常通过JavaScript进行，创建一个名为`setting`的对象。在这个对象中，我们定义数据源、编辑选项以及其他回调函数。`data`属性用于定义节点的数据结构，`key`字段指定节点的显示名称。`simpleData`属性使数据处理更简单，`idKey`和`pIdKey`分别代表节点ID和父节点ID。`keep`属性用来保持节点的状态，如叶子节点和父节点的保持。 ```javascript var setting = { data: { key: { name: 'nodeName' }, simpleData: { enable: true, idKey: 'nodeId', pIdKey: 'parentNodeId' }, keep: { leaf: true, parent: true } }, edit: { drag: { isCopy: false, isMove: true, prev: true, next: true, inner: true, autoOpenTime: 0, minMoveSize: 10 }, enable: true, editNameSelectAll: true, removeTitle: "删除节点", renameTitle: "编辑节点名称", showRemoveBtn: false, showRenameBtn: false }, callback: { // 这里定义回调函数 } }; ``` 在`edit`配置中，`drag`属性用于开启拖放功能，设置拖放规则，如是否允许复制、移动、在父节点之间或内部拖放等。`beforeDrag`回调函数会在拖放开始前调用，你可以在这里添加自定义逻辑来控制拖放操作是否允许。例如，禁止特定类型的节点被拖动： ```javascript function beforeDrag(treeId, treeNode) { if (treeNode.nodeType == 'GROUP') { return false; } // 其他条件检查... } ``` `onDrag`、`beforeDragOpen`和`beforeDrop`等回调函数则用于处理拖放过程中的不同阶段。`beforeDrop`函数是关键，它在拖放操作结束前调用，可以根据业务逻辑决定是否允许节点被放置到目标位置。例如，检查目标节点的类型： ```javascript function beforeDrop(treeId, treeNode, targetNode, moveType) { if (targetNode.modelType == 'INTERF') { return false; } // 其他逻辑... } ``` 你需要为zTree初始化数据，这可以通过调用`$.fn.zTree.init`方法完成，传入`$("#modelTree")`选择器和之前配置的`setting`对象，以及树的数据源。数据源通常是一个JSON数组，每个元素代表树的一个节点。 ```javascript var nodes = [/* JSON 数据 */]; $.fn.zTree.init($("#modelTree"), setting, nodes); ``` 通过zTree插件，我们可以轻松实现一个可拖拽的树形视图。通过精细配置`setting`对象和实现相应的回调函数，我们可以根据业务需求定制拖放行为，实现灵活的数据管理。记得在实际项目中，根据实际情况调整代码以满足具体需求，确保zTree与你的应用完美集成。

Bootstrap风格的zTree是一款将流行的前端框架Bootstrap与强大的JavaScript树形插件zTree相结合的解决方案。这个集成使得开发者能够在Bootstrap的优雅设计下实现交互式的、美观的树形数据展示。zTree本身是一个功能丰富的JavaScript库，它允许创建可扩展、响应式和高度定制的树状结构，广泛应用于网站导航、组织架构、文件目录等场景。 Bootstrap，由Twitter开发并开源，是目前最流行且易于使用的前端框架之一，提供了一套完整的网页设计模板，包括排版、表单、按钮、网格系统、导航以及其他组件，让开发者能够快速构建响应式和移动优先的网站。 zTree的核心特性包括： 1. **多主题支持**：zTree提供了多种预设主题，包括Bootstrap风格，可以根据项目需求选择合适的外观。 2. **动态加载**：支持节点的异步加载，可以有效地处理大数据量的树形结构，提高用户体验。 3. **可操作性**：用户可以通过点击、拖拽、右键菜单等方式对树节点进行添加、删除、编辑等操作。 4. **事件驱动**：提供丰富的事件回调，如节点点击、展开、收缩等，便于自定义交互逻辑。 5. **多选模式**：支持单选和多选模式，方便在树形结构中进行数据选择。 6. **搜索功能**：内置搜索功能，用户可以通过关键词快速查找所需节点。 7. **节点状态管理**：节点可以设置各种状态，如禁用、半选、展开、折叠等。 8. **数据绑定**：可以方便地与后端数据源进行绑定，更新或获取树结构数据。 在Bootstrap环境下使用zTree，需要注意以下几点： 1. **CSS样式兼容**：确保引入了Bootstrap的CSS库，以便zTree的Bootstrap风格能正确显示。 2. **JavaScript引用**：同时引入zTree的核心JavaScript文件和Bootstrap风格的皮肤文件。 3. **HTML结构**：按照zTree的规范设置HTML结构，一般包括一个

元素作为根节点容器，以及
• 元素作为各个树节点。 4. **初始化配置**：通过JavaScript初始化zTree，设置相应的配置项，如主题、数据、事件等。 5. **数据格式**：zTree的数据格式通常是JSON数组，每个对象代表一个树节点，包含ID、名称、父ID等属性。 6. **交互一致性**：保持zTree的交互与Bootstrap的其他组件一致，如使用Bootstrap的模态框进行节点编辑等。 Bootstrap风格的zTree结合了两者的优势，为开发者提供了既美观又实用的树形数据展示工具。在实际开发中，根据项目需求灵活运用zTree的各种功能和配置，可以打造出高效、友好的用户界面。同时，由于其良好的扩展性和兼容性，zTree也常被用于各种复杂的应用场景。

比较简单的一个动态树的加载实例demo，可以下下来看看

在原html上可能浏览不到想要的功能，需要放到程序上运行才可以

ztree，右击（点击小图标）上移、下移、置顶、置底。点击空白隐藏div

机构人员树（单选、多选）示例 机构树实例 包含数据库脚本

该js文件用户web端操作，实现tree的功能，以及显示复选框的和选择父节与子节点联动，资源珍贵

dt+ztree+ajax的DEMO，点击ztree在datatables中展示数据

使用jquery ztree实现两棵树之间数据移动 感觉ztree两棵树之间的数据移动功能不是很成熟. 不过还是实现了.里面有详细的代码注释说明 有问题QQ群:40159684

本案例实现了一套完整树型菜单权限管理，包含增加、修改、删除、移动节点。 附有源代码+完整的JAR包+API学习文档 前台页面展示用zTree插件，后台数据用XML保存，利用Dom4j进行解析，涉及到了对XML的增、删、改等等特别需求的技术，并用struts2+spring进行整合项目，源代码中有非常完整的注释，导入myEclipse部署运行，即可从浏览器访问看效果。 通过本资源，您可以：掌握强大的zTree控件，和强大的Dom4j解析XML技术