bootstraptreetable树形⽹格，动态扩展，连数据库⼆话不说，先看看效果图： 1、先来看写死的：
展开前~~
展开后~~
怎么实现呢？
先new ⼀个jsp⽂件，导⼊⼏个包，编写html代码，编写js代码，⼀个⽂件搞定！ 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>Insert title here</title>
7 <script type="text/javascript" src="../bootstrap-3.3.7-dist/treeview/jquery.js"></script>
8 <script type="text/javascript" src="../able.js"></script>
9 <link rel="stylesheet" type="text/css" href="../able.css">
10 <link rel="stylesheet" type="text/css" href="../able.theme.default.css">
11 <script type="text/javascript">
12 $(document).ready(function(){
13 $("#treeTable").treetable({
14 expandable : true,
15 initialState:"expanded",
16//expandable : true
17 clickableNodeNames:true,//点击节点名称也打开⼦节点. 18 indent : 30//每个分⽀缩进的像素数。
19 });
20 });
21 </script>
22 </head>
23 <body>
24 <div>
25 <table id="treeTable" >
26 <tr>
27 <td>名字</td>
28 <td>URL</td>
29 <td>操作<td>
30 </tr>
31 <tr data-tt-id="a">
32 <td>a</td>
33 <td>a.jsp</td>
34 <td><button>edit</button> <td>
35 </tr>
36 <tr data-tt-id="a1" data-tt-parent-id="a">
37 <td>a1</td>
38 <td>a1.jsp</td>
39 <td><button>edit</button> <td>
40 </tr>
41 <tr data-tt-id="b">
42 <td>b</td>
43 <td>b.jsp</td>
44 <td><button>edit</button> <td>
45 </tr>
46 <tr data-tt-id="b1" data-tt-parent-id="b">
47 <td>b1</td>
48 <td>b1.jsp</td>
49 <td><button>edit</button> <td>
50 </tr>
51 </table>
52 </div>
53 </body>
54 </html>
把上⾯代码拷回去试试？记得导treetable的包。
2、有了上⾯的基础，再来看连数据库的，可动态扩展（推荐），但是相对⿇烦⼀点。 效果图：
数据库模型是这样的：
字段解释：nodeId就是节点的id。pid是 parentId也就是⽗亲的id（注意：最根的节点的pid会和代码耦合，或做好约定——代码总要根据什么字符来到最根节点），表⽰该节点
是哪个节点的⼦节点。type=1代表功能，type=0代表菜单。level代表该节点在树的第⼏层。
我做了什么⼯作呢？
简单解释⼀下，就是通过查数据库，把上⾯的数据查出来，每⼀⾏数据封装成为⼀个节点，然后拼成⼀颗树，然后对树进⾏“中序遍历”，按“中序遍历“的顺序把每⼀个节点添加到 list，最后显⽰在前台（有点绕，下⾯解释为什么这样做。因为是多叉树，中序遍历我打了引号）。注意：这⾥的数据是可以动态扩展的。
数据库查出来的数据本来就是⼀个list，我把这个list的数据封装成为⼀个节点，然后拼成⼀颗树，然后⼜把这颗树按中序的遍历顺序转化成了list。
看似多余，其实这是由于treetable这个插件构建树的时候是根据html的table⾥⾯定义的tr来构建的，具体可观察上⾯写死的那个例⼦。⽽它对tr定义的顺序也有要求（有兴趣可在
⾃⼰机器上调换⼀下tr的顺序，看看效果）。
在这个前提下，试想：传会前台的数据要怎么解析？传回来的数据毫⽆疑问是json数据，是⽤list结构的还是tree结构的？
其实都可以。如果是tree结构的（可见我另外⼀个例⼦：wwwblogs/chenhtblog/p/8342534.html），前台⼀样需要对这⼀棵树进⾏“中序遍历“，按这个顺序把每⼀个
节点⽣成⼀个tr。这⾥我是在后台处理了业务逻辑，传回来的是“中序遍历“后的list。
OK，⼤家应该迫不及待想要知道具体实现了.....
满⾜⼤家，先来看前端代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>Insert title here</title>
7 <%
8 String server_path = ContextPath();
9 %>
10 <script type="text/javascript" src="../bootstrap-3.3.7-dist/treeview/jquery.js"></script>
11 <script type="text/javascript" src="../able.js"></script>
12 <link rel="stylesheet" type="text/css" href="../able.css">
13 <link rel="stylesheet" type="text/css" href="../able.theme.default.css">
14 <script type="text/javascript">
15 $(document).ready(function(){
16 $.ajax({
17 "type" : 'post',
18 "url" : '<%= server_path%>/resource/reslist',
19 "dataType" : "json",
20 "success" : function(data) {
21 $.each(data.data, function(idx, obj) {
22 $("#treeTable").append("<tr data-tt-id=\"" + deId + "\" data-tt-parent-id=\"" + obj.pid + "\"><td>" + + "</td><td>" + obj.href + "</td><td><button id=\"" + deId + "\">编辑</button><button id=\"" + deId + "\">
23 });
24 $("#treeTable").treetable({
25 expandable : true,
26 initialState:"expanded",
27//expandable : true
28 clickableNodeNames:true,//点击节点名称也打开⼦节点.
29 indent : 30//每个分⽀缩进的像素数。
30 });
31 }
偷拍设备32 });
33
34 });
35 </script>
36 </head>
37 <body>
38 <table id="treeTable" >
商场柜台制作39 <tr>
40 <td>名字</td>
41 <td>URL</td>
42 <td>操作</td>
43 </tr>
44 </table>
45
46 </body>
47 </html>
注意：上⾯⽤了ajax的异步请求，要把$("#treeTable").treetable();⽅法写在success域⾥⾯，因为要重新⽣成table，必须要先有数据，然后才能⽣成
控制器(springMVC)代码：
@RequestMapping("reslist")
public void getReslist(HttpServletRequest request,HttpServletResponse response) throws Exception{
json.setResult("no");//返回前台的json数据
Node tree = getTreeJson();//获得树形结构的json数据
Node n = PraseTree(tree);//把树形结构数据按中序遍历顺序，加⼊list
List<Node> reslist = n.getNodes();//获得上⾯的list
List<Node> list = new ArrayList<Node>();
for(Node node : reslist) {//去掉null节点
if(null != node) {
NodeId() != null) {
list.add(node);
}
}
}
json.setData(list);//设置，返回到前台
json.setResult("ok");
}
public Node getTreeJson() {
List<Resource> reslist = resourceService.loadAll();//从数据库加载所有数据，得到list List<Node> nodes = new ArrayList<Node>();
for(Resource res : reslist){
Node node = new Node();
node.Url());
node.Icon());
node.NodeId());
node.Pid());
node.Name());
nodes.add(node);
}
Node tree = new Node();
Node mt = ateTree(nodes);//把list转化成tree
System.out.println(tree.iteratorTree(mt));//遍历打印
return mt;
}
提供⼀个⼯具类:
1import java.util.ArrayList;
2import java.util.List;
3/**
4 * 树形节点模型
5 * @author chenht
6 *
7*/
8public class Node {
9public Node() {
11 }
12public Node(String nodeId,String pId) {
14this.pid = pId;
16 }
17/**
18 * ⽣成⼀个节点
19 * @param nodeId
20 * @param pId
21 * @param text
22 * @param icon
23 * @param href
24*/
25public Node(String nodeId, String pId, String text, String icon, String href) {
26super();
28this.pid = pId;
< = text;
30this.icon = icon;
31this.href = href;
33 }
34
35private String nodeId; //树的节点Id，区别于数据库中保存的数据Id。
36private String pid;
屋面玻纤瓦37private String text; //节点名称
38private String icon;
39private String href; //点击节点触发的链接
40private List<Node> nodes; //⼦节点，可以⽤递归的⽅法读取
41fe光模块
42public String getNodeId() {
43return nodeId;
44 }
45public void setNodeId(String nodeId) {
47 }
48
49public String getPid() {
50return pid;
51 }
52public void setPid(String pid) {
53this.pid = pid;
54 }
55
56public String getText() {
57return text;
58 }
59public void setText(String text) {
< = text;
61 }
62
63public String getIcon() {
64return icon;
65 }
66public void setIcon(String icon) {
67this.icon = icon;
68 }
69
70public String getHref() {
71return href;
72 }
73public void setHref(String href) {
74this.href = href;嘌呤霉素筛选浓度
75 }
76
77public List<Node> getNodes() {
78return nodes;
79 }
80public void setNodes(List<Node> nodes) {
82 }
83
84/**
85 * ⽣成⼀颗多叉树，根节点为root
86 * @param Nodes ⽣成多叉树的节点集合
87 * @return NodeTree
88*/
89public Node createTree(List<Node> Nodes) {
90if (Nodes == null || Nodes.size() < 0)
91return null;
92 Node root = new Node("root","0");
93// 将所有节点添加到多叉树中
94for (Node node : Nodes) {
95if (Pid().equals("0") || Pid().equals("root")) {
96// 向根添加⼀个节点
97 Nodes().add(node);
98 } else {
99 addChild(root, node);
100 }
101 }
102return root;
103 }
104
105/**
106 * 向指定多叉树节点添加⼦节点
107 * @param Node 多叉树节点
108 * @param child 节点
109*/
110public void addChild(Node Node, Node child) {
111for (Node item : Nodes()) {
112if (NodeId().Pid())) {
113// 到对应的⽗亲
114 Nodes().add(child);
115break;
116 } else {
117if (Nodes() != null && Nodes().size() > 0) { 118 addChild(item, child);
119 }
120 }
121 }
122 }
123
124/**
125 * 遍历多叉树
126 * @param Node 多叉树节点
127 * @return
128*/
129public String iteratorTree(Node Node) {
130 StringBuilder buffer = new StringBuilder();
131 buffer.append("\n");
132if (Node != null) {
133for (Node index : Nodes()) {
134 buffer.NodeId() + ",");
135if (Nodes() != null && Nodes().size() > 0) { 136 buffer.append(iteratorTree(index));
137 }
138 }
139 }
140 buffer.append("\n");
String();
142 }
143
144
145/**
146 * 遍历多叉树
147 * @param Node 多叉树节点
148 * @return
149*/
150 List<Node> node = new ArrayList<Node>();
151public Node zxPraseTree(Node Node) {
152if (Node != null) {
153for (Node index : Nodes()) {
154 node.add(index);
按摩腰靠155if (Nodes() != null && Nodes().size() > 0) { 156 node.add(zxPraseTree(index));
157 }
158 }
159 }
160//buffer.append("\n");
161 Node n = new Node();
162 n.setNodes(node);
163return n;
164 }
165
166public static void main(String[] args) {
167 List<Node> nodes = new ArrayList<Node>();
168 nodes.add(new Node("系统管理", "0"));
169 nodes.add(new Node("⾓⾊管理", "系统管理"));
170 nodes.add(new Node("资源管理", "系统管理"));
171 nodes.add(new Node("⽤户管理", "系统管理"));
172 nodes.add(new Node("添加⽤户", "⽤户管理"));
173 nodes.add(new Node("修改⽤户", "⽤户管理"));
174 nodes.add(new Node("机票管理", "系统管理"));
175
176 Node tree = new Node();
177 Node mt = ateTree(nodes);
178 System.out.println(tree.iteratorTree(mt));
179 Node n = PraseTree(mt);
180 List<Node> list = n.getNodes();
181for(Node node : list) {
182 System.out.NodeId());
183 }
184 }
185
186
187 }
传回来的数据：
再加上导⼊bootstrap的包，稍微改⼀下样式就是第⼀张图的效果啦~~~
最后再次说明：本例⼦⽀持连数据库，动态扩展。但是例⼦⽤了springMVC的环境，不可硬搬代码到你机器上去运⾏哦。主要思路已经写明⽩了，⼯具类也给出，已帮各位解决80%难度。主要是要明⽩每⼀步做了什么⼯作，事在⼈为，根据思路相信你也可以弄出来。说实话⽹络上太少⽐较靠谱的例⼦了。。。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议