引入js/css样式
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css">
<script src="<%=path%>/js/jquery-1.8.3.js"></script>
<!--jquery.easyui.min.js包含了easyUI中的所有插件-->
<script src="<%=path%>/js/jquery.easyui.min.js"></script>
编写script
<script> $(function(){ $('#tree').tree({ url:'basic_tree_data.json', //远程加载tree数据的url路径 animate:true, //是否开启动画效果 checkbox:true, //是否显示复选框 cascadeCheck:false, //是否开启级联选中，checkbox属性为true时才生效 onlyLeafCheck:true, //是否只在叶节点前显示复选框，checkbox属性为true时才生效 dnd:true, //是否启用拖拽功能 onDblClick:function(node){ //鼠标双击事件 $(this).tree("toggle",node.target); //改变当前节点状态 } }); }); </script>
编写body
<body>
<h2>easy UI Tree</h2>
<ul id="tree"></ul>
</body>
编写basic_tree_data.json
[{ "id":1, "text":"功能菜单", "children":[{ "id":11, "text":"投票管理", "children":[{ "id":111, "text":"所有投票", "attributes":{ "url":"findAll" }, "iconCls":"icon-search" },{ "id":112, "text":"发起投票", "iconCls":"icon-add" }] }, { "id":12, "text":"用户管理", "state":"open", "children":[{ "id":121, "text":"个人信息" },{ "id":122, "text":"参与投票记录", "iconCls":"icon-search" },{ "id":123, "text":"发起投票记录", "iconCls":"icon-search" }] },{ "id":13, "text":"系统管理", "state":"open", "children":[{ "id":131, "text":"系统日志" },{ "id":132, "text":"数据字典" }] }] }]
实现效果
