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>
效果如下：