LigerUI Tree
1 <!DOCTYPE html> 2 <%@ page language="java" contentType="text/html; charset=utf-8" 3 pageEncoding="utf-8"%> 4 <% 5 String contextPath = request.getContextPath(); 6 %> 7 <html> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 10 <title>Insert title here</title> 11 <link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 12 <script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> 13 <script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script> 14 <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> 15 16 <!-- CSS样式 --> 17 <style type="text/css"> 18 .box{ 19 float: left; 20 } 21 .tree{ 22 width: 230px; 23 height: 200px; 24 margin: 10px; 25 border: 1px solid #ccc; 26 overflow: auto; 27 } 28 h4{ margin: 10px; 29 } 30 </style> 31 </head> 32 <body> 33 <ul id="tree"></ul> 34 </body> 35 <script type="text/javascript"> 36 var treeData = [ 37 { 'name': '节点1', 'no':1 , 38 'children': 39 [ 40 { 'name': '节点1.1','no':1 }, 41 { 'name': '节点1.2','no':2 }, 42 { 'name': '节点1.3', 43 'children': [ 44 { 'name': '节点1.3.1' }, 45 { 'name': '节点1.3.2' } 46 ] 47 }, 48 { 'name': '节点1.4' } 49 ] 50 }, 51 { 'name': '节点2' } 52 ]; 53 $(function(){ 54 $("#tree").ligerTree({ 55 checkbox: true, 56 parentIcon: null, 57 childIcon: null , 58 slide: true, //是否显示动画 59 nodeWidth: 100, 60 idFieldName: 'id', 61 textFieldName:'name' , //指定数据中要显示的属性名，默认为"text" 62 data: treeData 63 }); 64 }); 65 //var tree = $("#tree").ligerGetTreeManager(); 66 //tree.setData(treeData) ; //或者这样设值 67 </script> 68 69 </html>
效果如下：
