TreeView là một điều khiển dùng để hiển thị các cấu trúc dạng cây.
Cấu trúc cây là một mô hình dữ liệu thường gặp trong thực tế. Mỗi một phần tử trong cây gọi là một Node, mỗi một cấu trúc cây gồm có:
- Root Node: gọi là Node gốc (gốc của cây). Nó có một hoặc nhiều Node con và không có Node cha.
- Parent Node: là Node nằm dưới Root Node. Nó có một hoặc nhiều Node con.
- Leaf Node : là Node lá, nó không có Node con nào.
Trong bài viết này, tôi sẽ trình bày một kỹ thuật để hiển thị một danh sách có thứ tự đa cấp theo hình thức một cây với đường kết nối các nút. Kết quả cuối cùng sẽ trông như thế này:
kết quả 1
 |
| Kết quả 2 |
Lưu ý rằng các menu mà chúng ta xây dựng là hoàn toàn tĩnh - có nghĩa là nó không có chức năng thu gọn hay mở rộng ra (xổ xuống).
Ta tạo ra một menu đơn giản như sau:
HTML:<ul class="tree">
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 2.1</li>
<li>List item 2.2
<ul>
<li>List item 2.2.1</li>
<li>List item 2.2.2</li>
</ul>
</li>
<li>List item 2.3</li>
</ul>
</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
Kết quả của đoạn code trên:
Điều đầu tiên mà chúng ta cần phải làm là loại bõ những nút chấm chấm đen đen "xấu xí" đó đi @@ bằng cách thiết lập
list-style-type với thuộc tính là
none
CSS:ul.tree, ul.tree ul {
list-style-type: none;
}và ta sẻ thu được kết quả:
Tiếp đến là chúng ta kẽ 1 đường dọc xuống cho các cấp bằng cách tạo ra hình ảnh dạng |
 |
| vline.png |
CSS:ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
}
ta được kết quả:
Kết nối các nút lại với nhau bằng cách bằng cách ta tạo ra 1 hình ảnh dạng chữ T
 |
| node.png |
CSS:ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}và kết quả sẻ là:
Rõ ràng, nút cuối cùng trong mỗi danh sách nhìn chưa đạt cần phải thiết lập lại. Và ta lại tạo ra thêm 1 hình ảnh dạng chữ L để nối nó lại:
 |
| lastnode.png |
CSS:ul.tree,ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul.tree ul li {
background: url(node.png) no-repeat;
}
ul.tree ul li.last,
ul.tree ul li:last-child {
background: #fff url(lastnode.png) no-repeat;
}
ta thu được kết quả cuối cùng:
Và đây là toàn bộ code:
HTML + CSS:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Treeview Menu - List : nhatchanh.info</title>
<style>
ul.tree,ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul.tree ul li {
background: url(node.png) no-repeat;
}
ul.tree ul li.last,
ul.tree ul li:last-child {
background: #fff url(lastnode.png) no-repeat;
}
</style>
</head>
<body>
<ul class="tree">
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 2.1</li>
<li>List item 2.2
<ul>
<li>List item 2.2.1</li>
<li>List item 2.2.2</li>
</ul>
</li>
<li>List item 2.3</li>
</ul>
</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</body>
</html>
jQuery tree menu css slide up - down
Với ví dụ trên các nhánh được hiển thị bằng hình ảnh, nếu bạn không muốn dùng hình ảnh bạn có thể sử dụng đoạn css dưới đây:
CSS:ul.tree,
ul.tree ul {
list-style:none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
position:relative;
}
ul.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
position:relative;
}
ul.tree ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
position:absolute;
top:10px;
left:0;
}
ul.tree ul li:last-child:before {
background:white;
height:auto;
top:10px;
bottom:0;
}
