jQuery zTree插件使用简单教程

本文实例为大家分享了jQuery zTree插件使用简单教程，供大家参考，具体内容如下

首先说一下，在web开发过程中会有很多的地方需要到树形的插件，JQuery 就有树的插件，本次简单教程讲的是zTree的使用教程。

官方下载地址

第一步，HTML

<ul id="deptTree" class="ztree"></ul>

第二步，zTree在init的时候都需要什么参数

zTree 初始化方法，创建 zTree 必须使用此方法

$.fn.zTree.init($("#deptTree"), setting, data);

init(obj, zSetting, zNodes);


var setting = {
 data: {
  simpleData: {
   enable: true,
   idKey: "deptId", //对应参数中的主键id
   pIdKey: "parentId", //对应参数中的父id
   rootPId: 0 //根节点的id
  },
  key: {
   url:"nourl"
  }
 }
};

数据是请求后台的数据，这里展示下json数据。注意后台返回的参数节点的名称要使用name属性，因为name属性是默认的，无果需要改动那就需要去配置了。

[{
 "deptId": 1,
 "parentId": 0,
 "name": "XX科技",
 "parentName": null,
 "orderNum": 0,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 2,
 "parentId": 1,
 "name": "长沙分公司",
 "parentName": "XX科技",
 "orderNum": 1,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 3,
 "parentId": 1,
 "name": "上海分公司",
 "parentName": "XX科技",
 "orderNum": 2,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 4,
 "parentId": 3,
 "name": "技术部",
 "parentName": "上海分公司",
 "orderNum": 0,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 5,
 "parentId": 3,
 "name": "销售部",
 "parentName": "上海分公司",
 "orderNum": 1,
 "delFlag": 0,
 "open": null,
 "list": null
}]

第三步，jquery渲染树

$.ajax({
 type: "get",
 url: baseURL+"sys/dept/list",
 success:function(data){
 ztree = $.fn.zTree.init($("#deptTree"), setting, data);
 var node = ztree.getNodeByParam("deptId", );
});

这样就完成了，看下效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery树插件zTree使用方法详解

    jQuery树插件zTree使用方法详解

    最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery  zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te

  • jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

    jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

    本文实例讲述了jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link

  • 在AngularJS中使用jQuery的zTree插件的方法

    在AngularJS中使用jQuery的zTree插件的方法

    前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间

  • Jquery树插件zTree用法入门教程

    Jquery树插件zTree用法入门教程

    本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css 复制代码 代码如下: <script type="text/javascript" src=&

  • jQuery zTree树插件简单使用教程

    前言 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示. 下载地址:zTree 静态zTree开发流程 引入资源 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/c

  • jQuery使用zTree插件实现树形菜单和异步加载

    jQuery使用zTree插件实现树形菜单和异步加载

    本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l

  • 无限树Jquery插件zTree的常用功能特性总结

    其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性. (ztree的语法结构是基于key-value的形式配置) 1:支持异步加载数据 语法配置: async: { enable: true, url:'abc.ashx', otherParam: { "request": "requestname" } } 简要说明: enable :设置 zTree 是否开启异步加载模式. url:Ajax 获

  • zTree jQuery 树插件的使用(实例讲解)

    zTree jQuery 树插件的使用(实例讲解)

    分享说明: 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果. 外部引入资源 <link rel=&qu

  • 多功能jQuery树插件zTree实现权限列表简单实例

    zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAPI下载链接 页面主要引入一下几个文件:  <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript&q

  • jQuery插件zTree实现的多选树效果示例

    jQuery插件zTree实现的多选树效果示例

    本文实例讲述了jQuery插件zTree实现的多选树效果.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>多选树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="styleshee

随机推荐