`

ztree的用法和示例

 
阅读更多

ztree是我在项目中使用了很多次的一个树形js控件,它的文档比较规范。

地址:http://www.treejs.cn/v3/main.php#_zTreeInfo

我在项目中的js做了比较好的包装。

思路则是在设置角色权限的页面,点击某个按钮,获取该角色的id,然后利用js弹窗,打开一个iframe,剩下的事情都在iframe中的页面来做,这样将角色设置页面和权限选择和保存界面解耦,降低了代码的复杂度。这个角色id传入iframe可以通过iframe的src网址传入,但设置了权限以后,因为确认按钮做到了iframe的页面中,所以只能利用window.postMessage来将设置好的权限传递回去。

 

利用window.postMessage的目的是让写代码的人不必关心ztree怎么用,只要实现各个后台接口,写js弹窗,调用页面,并绑定message接收事件,将数据保存到服务器即可。

分享到:
评论

相关推荐

    ztree使用完整示例

    在 JavaScript 中,通过 `$.fn.zTree.init()` 方法初始化 ZTree,传入容器元素、节点数据和配置对象。 ```javascript var setting = {}; var zNodes = [ { name: "节点1", children: [{ name: "子节点1" }, { ...

    zTree异步加载简单示例VS2008项目完整源码

    这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源,提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载(Async Loading)是zTree的核心特性之一,它...

    zTree_v3 示例代码

    通过查看和修改这些示例,你可以快速掌握zTree_v3的用法,并将其应用于自己的项目中。 总之,zTree_v3是一个强大且灵活的树形插件,提供了丰富的功能和良好的扩展性。通过深入学习和实践"zTree_v3-master"中的示例...

    java jquery Ztree 机构人员树示例

    在IT行业中,构建一个高效的组织结构和人员管理系统是至关重要的,而"java jquery Ztree 机构人员树示例"就是一种实现方式。这个示例利用了Java后端技术和前端jQuery库ZTree,来创建一个可交互的、可视化展示机构与...

    jquery ztree示例

    综上所述,jQuery zTree是一个强大且灵活的树形插件,结合提供的示例和文档,开发者可以轻松地将它集成到项目中,实现各种树形结构的需求。在实际应用中,根据项目需求调整配置,结合API文档和示例,能让你更好地...

    JQuery zTree源码以及示例

    在本资料中,我们包含了zTree的v2.5版本,这将帮助你深入了解其内部实现和使用方法。 **源码分析:** 1. **jquery-ztree-2.5.js**:这是zTree的核心JavaScript库,包含了所有zTree的功能实现。你可以通过阅读源码...

    ztree用法和例子

    **一、ZTree 基本用法** 1. **引入依赖** 在 HTML 页面中,首先需要引入 jQuery 和 ZTree 的 CSS 样式文件以及 JS 文件。通常,你需要在头部 `<head>` 标签内添加以下代码: ```html ...

    java实现ztree异步加载

    本文将详细讲解如何使用Java来实现ZTree的异步加载功能。 首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到...

    ztree 源码和例子

    3. **demo** 文件夹:包含多个示例,展示了ZTree的各种功能和用法,每个示例都有对应的HTML、CSS和JS文件,便于学习和参考。 4. **img** 文件夹:存储了ZTree使用的各种图标资源。 5. **json** 文件夹:可能包含一些...

    zTree树的demo和API

    本压缩包“zTree_v3”包含了zTree的最新版本v3的相关资源,包括演示示例和API文档,帮助开发者更好地理解和使用这个工具。 一、zTree基本概念与功能 zTree的核心是通过JSON数据格式来构建树形结构,每个节点都可以...

    zTree DEMO和API

    在"zTree_v3"文件夹中,你将找到各种DEMO示例,这些示例涵盖了zTree的基本用法和复杂应用,通过查看和运行这些示例,开发者可以快速掌握zTree的使用。同时,API文档会详细解释每个函数的参数、返回值以及使用场景,...

    Ztree相关js和css包.7z

    这些资源可能用于帮助开发者更好地理解和使用ZTree,例如,示例HTML文件会展示如何在实际项目中集成ZTree,图片则可能是ZTree使用的节点图标。 在使用ZTree时,首先需要在HTML文件中引入jQuery和ZTree的JavaScript...

    Ztree使用方法.docx

    ### Ztree 使用方法详解 #### 一、简介 Ztree 是一个依赖于 jQuery 的轻量级树插件,用于在 Web 页面中展示树形结构的数据。它提供了丰富的配置选项和强大的功能,支持异步加载数据、自定义节点样式、响应式布局等...

    ztree使用说明ztree.zip

    在本说明中,我们将详细介绍zTree的基本使用方法、配置选项、事件处理以及常见问题。 ### 一、安装与引入 首先,你需要下载zTree的最新版本,并在HTML文件中引入jQuery库和zTree的核心CSS及JavaScript文件。例如:...

    zTree-zTree_v3-各种tree的使用大全(带搜索)

    在【zTree-zTree_v3-各种tree的使用大全(带搜索)】这个压缩包中,包含了zTree_v3的完整源码和相关示例,为开发者提供了全面了解和使用zTree_v3的功能。 1. **zTree_v3的核心特性** - **灵活的配置**:zTree_v3支持...

    zTree zTree zTree

    以下是对zTree核心特性和使用方法的详细解释。 一、基本概念与结构 zTree的核心是通过JSON数据格式来构建树节点,每个节点包含id、name、pId(父节点id)等属性,可以根据需求扩展其他自定义属性。树形结构由多个...

    Angular整合zTree的示例代码

    通过调用`$.fn.zTree.init()`方法,传入DOM元素(通常是一个`<ul>`标签)、配置设置和节点数据,就可以成功地在Angular应用中渲染zTree。 最后,我们还定义了一个`getFont`函数,用于设置节点的字体样式。此外,`...

    ztree脚本、ztree下载

    3. **ztree的PDF教程**:`zTreeAPI v2.5.pdf`是ztree的PDF版API手册,通常包含了完整的功能介绍、示例代码和使用说明。开发者可以通过查阅此文档了解如何使用ztree的各项功能,快速上手开发项目。 4. **ztree的CHM...

Global site tag (gtag.js) - Google Analytics