时间:2021-05-26
本文实例为大家分享了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", );});这样就完成了,看下效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
JQueryZTree简单使用@(JavaScript)[jQuery,ztree,入门]基本概述zTree是一个依靠jQuery实现的多功能“树插件”。优异的
本文为大家分享了jQueryzTree树插件的使用教程,供大家参考,具体内容如下一、介绍zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。介绍zTree是一个依靠jQuery实现的多
zTree简介zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。zTree是开源免费的软件(M
zTree简介zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。zTree是开源免费的软件(M