TaoBye

ztree加载树形菜单控件事列

  复制代码到编译器上面直接运行即可看见效果！(远程加载将里面的json数据换ajax加载即可！)

<!DOCTYPE html>

<HTML>

 <HEAD>

  <TITLE>淘拜网</TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="http://www.taobye.com/pc/download/zTreeStyle/zTreeStyle.css" type="text/css">

  <script type="text/javascript" src="http://www.taobye.com/pc/download/jquery-1.8.3.min.js"></script>

  <script type="text/javascript" src="http://www.taobye.com/pc/download/jquery.ztree.core.min.js"></script>

  <SCRIPT type="text/javascript">

var setting = {	};

var zNodes =[

{ name:"父节点1 - 展开", open:true,

children: [

{ name:"父节点11 - 折叠",

children: [

{ name:"叶子节点111"},

{ name:"叶子节点112"},

{ name:"叶子节点113"},

{ name:"叶子节点114"}

]},

{ name:"父节点12 - 折叠",

children: [

{ name:"叶子节点121"},

{ name:"叶子节点122"},

{ name:"叶子节点123"},

{ name:"叶子节点124"}

]},

{ name:"父节点13 - 没有子节点", isParent:true}

]},

{ name:"父节点2 - 折叠",

children: [

{ name:"父节点21 - 展开", open:true,

children: [

{ name:"叶子节点211"},

{ name:"叶子节点212"},

{ name:"叶子节点213"},

{ name:"叶子节点214"}

]},

{ name:"父节点22 - 折叠",

children: [

{ name:"叶子节点221"},

{ name:"叶子节点222"},

{ name:"叶子节点223"},

{ name:"叶子节点224"}

]},

{ name:"父节点23 - 折叠",

children: [

{ name:"叶子节点231"},

{ name:"叶子节点232"},

{ name:"叶子节点233"},

{ name:"叶子节点234"}

]}

]},

{ name:"父节点3 - 没有子节点", isParent:true}

];

$(document).ready(function(){

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

});

  </SCRIPT>

 </HEAD>

<BODY>

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

</BODY>

</HTML>
阅读：3174   发布：2017-08-31 16:48:13
正在加载评论...