Bootstrap5 treeview

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng TreeView trong C# Winforms. Đây là một bộ điều khiển khá quen thuộc, nó được sử dụng rất nhiều trong việc quản lý dữ liệu

Chúng ta sẽ cùng nhau tìm hiểu về công dụng cũng như các thuộc tính và phương thức, sự kiện của TreeView. Sau đó mình sẽ viết một chương trình áp dụng TreeView để xem sự khác nhau giữa TreeView và ListView nhé

Nội dung chính

1. Giới thiệu TreeView trong C#

TreeView là bộ điều khiển được sử dụng để hiển thị danh sách các đối tượng dưới dạng phân cấp

Các đối tượng trong TreeView thường được gọi là Node và cấu trúc phân cấp của TreeView được biểu diễn bởi lớp TreeNode. Mỗi nút trong TreeView có thể chứa các nút khác

Bài viết này được đăng tại [kiso. vn]

Node chứa một Node khác gọi là Node cha (RootNode) và Node được chứa goi là Node con (ChildNode)

Việc sử dụng điều khiển TreeView để hiển thị rất hữu ích, vì trình bày theo dạng phân cấp giúp việc hiển thị rõ ràng và có hệ thống thông tin tốt hơn

Thuộc tính, phương thức và điều kiện của TreeView

Một số thuộc tính thường dùng của TreeView

Thuộc tínhMô tảNodeTrả về một đối tượng thuộc lớp TreeNodeSelectedNodeTrả về Node đang được chọn trong TreeViewShowPlusMinusHiển thị dấu + và – trước mỗi TreeNodeShowRootLinesHiển thị đường kết nối giữa các RootNode trong TreeViewImageList

Hiển thị hình trước mỗi nút trong TreeView

*Lưu ý. phải sử dụng thêm điều khiển ImageList và gán tên đối tượng của điều khiển ImageList cho thuộc tính ImageList của TreeView

Hình ảnh Index

Giá trị của thuộc tính ImageIndex chỉ là số của hình trong ImageList điều khiển. Khi gán chỉ số cho thuộc tính ImageIndex thì hình hiển thị trước mỗi Nút sẽ là hình có chỉ số tương ứng

*Lưu ý. Phải sử dụng thuộc tính ImageList trước

SelectedImageIndexGiá trị của thuộc tính SelectedImageIndex chỉ là số của hình trong điều khiển ImageList. Khi người dùng chọn Node nào thì Node đó sẽ có cấu hình tương ứng như thuộc tính SelectedImageIndex only

A number of normal method used of TreeView

Phương thức Mô tảGetNodeCount() Đến số lượng Node trong TreeViewExpandAll()Hiển thị tất cả các Node trên TreeViewCollapseAll()Thu gọn tất cả các Node trên TreeViewGetNodeAt(x, y)

Get an Node at a position has a mode (x, y) on screen

*Lưu ý. Use the event MouseDown or NodeMouseClick

Một số sự kiện thường được sử dụng của TreeView

Sự kiệnMô tảAfterCollapsePhát sinh khi thu gọn một TreeNodeafterExpandPhát sinh khi hiển thị các Node trong TreeNodeafterSelectPhát sinh khi chọn một TreeNodeNodeMouseClickPhát sinh khi chọn một Node

Thuộc tính và phương thức của TreeNode

Một số thuộc tính thương mại sử dụng của TreeNode

Thuộc tính Mô tảNodesTrả về các tập tin NodeTextĐọc/gán chuỗi ký tự người dùng sẽ nhìn thấy ở mỗi NodeFirstNodeTrả về Node đầu tiênLastNodeTrả về Node cuối cùngNextNodeChuyển đến Node tiếp theoPrevNodeLùi lại Node trước đóParentTrả về Node cha của Node hiện tại IndexTrả về số của Node

Some method normal used of TreeNode

Phương thứcMô tảNodes. AddThêm một NodeNodes. RemoveXóa một NodeNodes. InsertChèn vào một NodeNodes. ClearXóa tất cả các Node con và Node hiện tại

2. Sử dụng TreeView trong C#

Trong ví dụ này, mình sẽ thực hiện một chương trình theo biểu mẫu giao diện như dưới đây, với một số chức năng

Tạo hệ thống cây TreeView bao gồm

• Nút “Thêm nút gốc“. Add a root Node
• Nút “Thêm nút con“. Add a Node con
• Nút “Xóa tất cả các nút“. Hủy tất cả các Node trong TreeView
• Nút “Xóa Node được chọn“. Delete Node was select from TreeView
• Cái nút "-". Thu hồi lại vị trí lựa chọn – thu hồi lại các Node là con của Node
• Nút “+“. Open wide at location select – mở rộng các Node là con của Node
• Nút “Đếm tổng Node TreeView“. Dem tổng Node có trên TreeView

Việc đầu tiền chúng ta sẽ thiết kế giao diện tương tự như Mẫu, bao gồm

• 1 TextBox để nhập tiêu đề cho Node
• 7 Nút với các chức năng tương thích
• 1 TreeView để hiển thị danh sách các Node

Sau khi tạo giao diện cho Form, ta bắt đầu thực hiện các chức năng lần lượt trên các nút Button

Bước 1. lý sự kiện trên Nút “Thêm nút gốc“, với chức năng khi người dùng nhấp vào xử lý nút thì nội dung trong ô TextBox sẽ được thêm vào Nút gốc trong TreeView

Ta sử dụng string.IsNullOrEmpty() để xem xét điều kiện nếu như trong ô TextBox trống mà người dùng nhấn vào Button thì thông báo cho người dùng biết

Tiếp đến ta sử dụng string.Equals() để so sánh nội dung trong ô TextBox với các Node trong TreeView, nếu bằng nhau thì thông báo cho người dùng biết đã tồn tại Node trong TreeView

Sau khi xem xét xong điều kiện, bây giờ ta chỉ cần sử dụng Node.Add() để thêm nội dung từ TextBox vào Node. Khi bổ sung xong ta sẽ xóa nội dung trong ô TextBox bằng phương thức

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

0

private void btnThemnodegoc_Click(object sender, EventArgs e)
   {
       bool t = false;
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
           TreeNode Node = new TreeNode();
           Node.Text = txtNode.Text;
           foreach(TreeNode nodex in treeView1.Nodes)
           {
               if(string.Equals(Node.Text,nodex.Text))
               {
                    MessageBox.Show("Node đã tồn tại");
                    t = true;
               }
           }
           if (t == false) treeView1.Nodes.Add(Node);
           txtNode.Clear();
           txtNode.Focus();
        }
        else
            MessageBox.Show("Node không được để trống");
    }

Kết quả. Sau khi thêm các Node gốc và các Node con

Bước 2. Xử lý sự kiện trên Button “Add Node con“, với chức năng khi người dùng nhâp chuột vào Button thì nội dung trong ô TextBox sẽ được thêm bất kỳ Node con nào của Node được chọn trong TreeView

Tương tự như Nút “Thêm nút gốc“, ta cũng sử dụng string.IsNullOrEmpty() để thêm điều kiện cho nút. Sau đó sử dụng

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

2 để thêm Node con vào Node được chọn

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

Bước 3. Xử lý sự kiện trên Button “Xóa tất cả các Node“, với chức năng khi người dùng nhấn vào thì tất cả các Node sẽ bị xóa

Đơn giản ta chỉ cần sử dụng phương thức

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

0 có trong các Nút để xóa tất cả các Nút

private void btnXoaallNode_Click(object sender, EventArgs e)
    {
       treeView1.Nodes.Clear();
    }

Bước 4. Xử lý sự cố trên Nút “Xóa Node được chọn“, với chức năng xóa Node mà người dùng chọn từ TreeView

Ta sẽ sử dụng

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

4 để xóa Node đang được chọn khỏi TreeView

private void btnXoaNodechon_Click(object sender, EventArgs e)
    {
       if(treeView1.SelectedNode !=null)
       treeView1.SelectedNode.Remove();
    }

Bước 5. Xử lý sự kiện trên hai Button “–” và “+“, với chức năng thu cơ sở và mở rộng các Node trong TreeView

Trong TreeView có hai sự kiện hỗ trợ cho công việc này mà chính là

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

5 và

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

6

private void btnShow_Click(object sender, EventArgs e)
    {
       treeView1.ExpandAll();
    }

private void btnAn_Click(object sender, EventArgs e)
    {
       treeView1.CollapseAll();
    }

Bước 6. Xử lý sự kiện trên Button “Đếm tổng Node TreeView“, với chức năng đếm tất cả các Node có trong TreeView

Ta sẽ sử dụng

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

7 để đếm tổng số nút trong

private void btnThemnodecon_Click(object sender, EventArgs e)
    {
       if (!string.IsNullOrEmpty(txtNode.Text))
       {
          if (treeView1.SelectedNode != null)
          {
              TreeNode Subnode = new TreeNode();
              Subnode.Text = txtNode.Text;
              treeView1.SelectedNode.Nodes.Add(Subnode);
              txtNode.Clear();
              txtNode.Focus();
           }
           else
              MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
        }
        else
            MessageBox.Show("Node không được để trống");
    }

8

private void btnTong_Click(object sender, EventArgs e)
    {
       int n = treeView1.GetNodeCount(true);
       MessageBox.Show("Tổng số Node của TreeView : "+n);
    }

Kết quả. khi nhấn vào Nút “Đến tổng nút TreeView“

Mã đầy đủ

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace cau4
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnThemnodegoc_Click(object sender, EventArgs e)
        {
            bool t = false;
            if (!string.IsNullOrEmpty(txtNode.Text))
            {
                TreeNode Node = new TreeNode();
                Node.Text = txtNode.Text;
                foreach(TreeNode nodex in treeView1.Nodes)
                {
                    if(string.Equals(Node.Text,nodex.Text))
                    {
                        MessageBox.Show("Node đã tồn tại");
                        t = true;
                    }
                }
                if (t == false) treeView1.Nodes.Add(Node);
                txtNode.Clear();
                txtNode.Focus();
            }
            else
                MessageBox.Show("Node không được để trống");

        }

        private void btnThemnodecon_Click(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(txtNode.Text))
            {
                if (treeView1.SelectedNode != null)
                {
                    TreeNode Subnode = new TreeNode();
                    Subnode.Text = txtNode.Text;
                    treeView1.SelectedNode.Nodes.Add(Subnode);

                    txtNode.Clear();
                    txtNode.Focus();
                }
                else
                    MessageBox.Show("Bạn chưa chọn vị trí tạo Node con");
            }
            else
                MessageBox.Show("Node không được để trống");
        }

        private void btnShow_Click(object sender, EventArgs e)
        {
            treeView1.ExpandAll();
        }

        private void btnAn_Click(object sender, EventArgs e)
        {
            treeView1.CollapseAll();
        }

        private void btnXoaallNode_Click(object sender, EventArgs e)
        {
            treeView1.Nodes.Clear();
        }

        private void btnXoaNodechon_Click(object sender, EventArgs e)
        {
            if(treeView1.SelectedNode !=null)
            treeView1.SelectedNode.Remove();
        }

        private void btnTong_Click(object sender, EventArgs e)
        {
            int n = treeView1.GetNodeCount(true);
            MessageBox.Show("Tổng số Node của TreeView : "+n);
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

Kết luận

Như vậy là chúng ta đã cùng nhau tìm hiểu về điều khiển TreeView trong C#, cũng như các thuộc tính, sự kiên định và phương thức của nó. Đây là một bộ điều khiển được sử dụng rất nhiều, vì vậy các bạn hãy thử nhiều tập tin thật để thành công với nó nhé. Ở bài tiếp theo mình sẽ hướng dẫn các bạn các driver khác trong winforms, các bạn chú ý theo dõi nhé