jquery easyui tree

原创于 2017-12-22 09:31:46 发布 · 118 阅读

CC 4.0 BY-SA版权

本文介绍如何利用JSON格式的数据源结合jQuery及其插件easyUI来快速创建网页上的树形导航菜单。通过简单的代码示例展示了如何加载JSON数据，并设置点击事件以实现节点的展开与折叠功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 简单的读取json格式的，作为tree的数据。
如：首先由json文件：
[{
"text":"123",
"state":"closed",
"children":[{"text":"text0_1"},{"text":"text0_2"}]
},{
"text":"text1"
}]
其次增加jquery的一些js和css
如：<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.easyui.min.js"></script>
再其次就是设置了
如：<script type="text/javascript" language="javascript">

$(function(){
//alert("12");
$("#tt2").tree({
url:"data/tree_data2.json",
onClick:function(treeNode){
$("#tt2").tree("toggle",treeNode.target);//展开或关闭

}
});
});
</script>
在body中有一个id为tt2的ul，这样一个简单的tree就设置好了，明天读取从后台返回的。