java ztree json 实例_基于zTree树形菜单的使用实例

在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号

第一步：在页面显示菜单位置，添加 ul设置 class=”ztree”

第二步：开启简单数据格式支持

第三步：编写树形菜单数据

第四步：生成树形菜单

ztree树形菜单的使用

//页面加载后执行

$(function() {

//1.进行ztree树形菜单设置，开启简单json数据支持

var setting = {

data:{

simpleData:{

enable:true//开启简单json数据格式支持

}

}

};

//2.提供ztree树形菜单数据

var zNodes = [

{id:1,pId:0,name:"父节点一"},

{id:2,pId:0,name:"父节点二"},

{id:11,pId:1,name:"子节点一"},

{id:12,pId:1,name:"子节点二"},

{id:13,pId:2,name:"子节点三"},

{id:14,pId:2,name:"子节点四"}

];

//3.生成树形菜单

$.fn.zTree.init($("#baseMenu"),setting,zNodes);

});

你我他学习吧

选项卡面板一

选项卡面板二

以上这篇基于zTree树形菜单的使用实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。