Hướng dẫn treeview table html


Learn how to create a tree view with CSS and JavaScript.


Tree View

A tree view represents a hierarchical view of information, where each item can have a number of subitems.

Click on the arrow(s) to open or close the tree branches.

  • Beverages
    • Water
    • Coffee
    • Tea
      • Black Tea
      • White Tea
      • Green Tea
        • Sencha
        • Gyokuro
        • Matcha
        • Pi Lo Chun

Try it Yourself »


Tree View

Step 1) Add HTML:

Example

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


Step 2) Add CSS:

Example

/* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}



Step 3) Add JavaScript:

Example

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

Try it Yourself »


Checkbox Tree View

In this example, we use a "ballot box" unicode instead of a caret:



Cách tạo Tree menu bằng Bootstrap

Hướng dẫn cách tạo Tree menu bằng Bootstrap

Bước 1: Chuẩn bị nội dung HTML để tạo cấu trúc menu

 
 
  • THIẾT KẾ WEB
    • Photoshop
    • Dreamweaver
      • DW CS3
      • DW CS4
      • DW CS5
      • DW CS6
      • DW CC
    • Fireworks
  • LẬP TRÌNH WEB
    • Lập trình HTML5
    • Lập trình CSS3
    • Lập trình PHP
      • PHP Frameworks
        • Zend
        • Codeigniter
        • Laravel
        • CakePHP
    • Lập trình ASP.NET

Bước 2: Sử dụng JQUERY để tạo Tree menu

 

Bước 3: Định nghĩa CSS cho Tree menu

 
 

Bước 4: Gọi thư viện Bootstrap

 
  

Bước 5: Gọi thư viện JQUERY

 
Xem  demo Tải Code Chat với hocwebgiare.com

Chuyển đến nội dung chính

Trình duyệt này không còn được hỗ trợ nữa.

Hãy nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, bản cập nhật bảo mật và hỗ trợ kỹ thuật.

TreeViewImageSet Enum

  • Reference

Definition

Represents an image set to use in the TreeView control.

In this article

public enum class TreeViewImageSet
public enum TreeViewImageSet
type TreeViewImageSet = 
Public Enum TreeViewImageSet
Inheritance

Fields

Arrows 10

A predefined set of arrow images.

BulletedList 6

A predefined set of diamond-shaped bullet images.

BulletedList2 7

A predefined set of square-shaped bullet images.

BulletedList3 8

A predefined set of sectioned, diamond shaped bullet images.

BulletedList4 9

A predefined set of alternate sectioned, diamond shaped bullet images in sizes that vary by level.

Contacts 12

A predefined set of MSN Messenger-styled images.

Custom 0

A user-defined set of images. This is the default value of the ImageSet.

Events 14

A predefined set of event log-styled images.

Faq 15

A predefined set of FAQ-styled images.

Inbox 13

A predefined set of email-styled images.

Msdn 2

A predefined set of Microsoft MSDN developer program-styled images.

News 11

A predefined set of newsgroup-styled images.

Simple 4

A predefined set of simple-shaped outline images.

Simple2 5

A predefined set of filled simple-shaped images.

WindowsHelp 3

A predefined set of Microsoft Windows Help-styled images.

XPFileExplorer 1

A predefined set of Windows Explorer for Microsoft Windows XP-styled images.

Examples

The following example demonstrates how to use the TreeViewImageSet enumeration to indicate which image set to use in the TreeView control:


<%@ Page Language="C#" %>

<!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 runat="server">
    <title>TreeView ImageSet Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>TreeView ImageSet Example</h3>
    
      <asp:TreeView id="LinksTreeView"
         ImageSet="XPFileExplorer" 
         runat="server">
         
        <Nodes>
        
          <asp:TreeNode Value="Home" 
            NavigateUrl="Home.aspx" 
            Text="Home"
            Target="_blank" 
            Expanded="True">
             
            <asp:TreeNode Value="Page 1" 
              NavigateUrl="Page1.aspx" 
              Text="Page1"
              Target="_blank">
               
              <asp:TreeNode Value="Section 1" 
                NavigateUrl="Section1.aspx" 
                Text="Section 1"
                Target="_blank"/>
                 
            </asp:TreeNode>              
            
            <asp:TreeNode Value="Page 2" 
              NavigateUrl="Page2.aspx"
              Text="Page 2"
              Target="_blank">
               
            </asp:TreeNode> 
            
          </asp:TreeNode>
        
        </Nodes>
        
      </asp:TreeView>

    </form>
  </body>
</html>

<%@ Page Language="VB" %>

<!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 runat="server">
    <title>TreeView ImageSet Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>TreeView ImageSet Example</h3>
    
      <asp:TreeView id="LinksTreeView"
         ImageSet="XPFileExplorer" 
         runat="server">
         
        <Nodes>
        
          <asp:TreeNode Value="Home" 
            NavigateUrl="Home.aspx" 
            Text="Home"
            Target="_blank" 
            Expanded="True">
             
            <asp:TreeNode Value="Page 1" 
              NavigateUrl="Page1.aspx" 
              Text="Page1"
              Target="_blank">
               
              <asp:TreeNode Value="Section 1" 
                NavigateUrl="Section1.aspx" 
                Text="Section 1"
                Target="_blank"/>
                 
            </asp:TreeNode>              
            
            <asp:TreeNode Value="Page 2" 
              NavigateUrl="Page2.aspx"
              Text="Page 2"
              Target="_blank">
               
            </asp:TreeNode> 
            
          </asp:TreeNode>
        
        </Nodes>
        
      </asp:TreeView>

    </form>
  </body>
</html>

Remarks

The TreeViewImageSet enumeration is used to represent the different sets of images that can be displayed in the TreeView control. You can select from a predefined set of images or create your own custom set by setting the TreeView.ImageSet property to the Custom value. When defining a custom set of images, you should specify an image for each of the properties in the following table. Otherwise, the default image for that property is used.

PropertyDescription
CollapseImageUrl The URL to a custom image for the collapsed node indicator.
ExpandImageUrl The URL to a custom image for the expanded node indicator.
LineImagesFolder The URL to a folder that contains custom images for lines-connecting nodes.
NoExpandImageUrl The URL to a custom image for the non-expanding node indicator.

Applies to

See also

  • TreeView
  • ImageSet