C/C++ Qt TableWidget 表格組件應用

TableWidget 表格結構組件，該組件可以看作是TreeWidget樹形組件的高級版，表格組件相比於樹結構組件靈活性更高，不僅提供了輸出展示二維表格功能，還可以直接對表格元素直接進行編輯與修改操作，表格結構分為表頭，表中數據兩部分，表格結構可看作一個二維數組，通過數組行列即可鎖定特定元素，如下代碼是針對表格結構的基本使用方法，分別實現了表頭數據的初始化，元素的插入等基本操作。

在研究Widget組件之前先來熟悉一下View組件，View組件相對Widget組件來說只是不具備編輯功能，其他功能保持一致，View組件支持與數據庫建立映射關系，如果表格無需更新則最好可以使用View組件，View組件創建表格代碼如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <iostream>
#include <QStandardItemModel>

QStandardItemModel *model = new QStandardItemModel();

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 初始化tableView表頭
    model->setColumnCount(3);
    model->setHeaderData(0,Qt::Horizontal,QString("賬號"));
    model->setHeaderData(1,Qt::Horizontal,QString("用戶"));
    model->setHeaderData(2,Qt::Horizontal,QString("年齡"));

    ui->tableView->setModel(model);
    ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft);  // 表頭居左顯示

    //設置列寬
    ui->tableView->setColumnWidth(0,101);
    ui->tableView->setColumnWidth(1,102);
}

MainWindow::~MainWindow()
{
    delete ui;
}

// 對表格添加數據
// https://www.cnblogs.com/lyshark
void MainWindow::on_pushButton_clicked()
{
    for(int i = 0; i < 5; i++)
    {
        model->setItem(i,0,new QStandardItem("20210506"));

        //設置字符顏色
        model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0)));
        //設置字符位置
        model->item(i,0)->setTextAlignment(Qt::AlignCenter);
        model->setItem(i,1,new QStandardItem(QString("lyshark")));

        model->setItem(i,2,new QStandardItem(QString("24")));
    }
}

代碼運行效果如下:

Widget組件的初始化與View組件基本保持一致，當程序運行時，首先在構造函數中執行以下代碼，對表格進行初始化。

// https://www.cnblogs.com/lyshark
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QStringList header;
    header << "姓名" << "性別" << "年齡";

    ui->tableWidget->setColumnCount(header.size());                        // 設置表格的列數
    ui->tableWidget->setHorizontalHeaderLabels(header);                    // 設置水平頭
    ui->tableWidget->setRowCount(5);                                       // 設置總行數
    ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);   // 設置表結構默認不可編輯

    // 初始化右側的編輯框等屬性
    ui->radioButton->setChecked(true);
    ui->lineEdit_1->setText("");
    ui->lineEdit_2->setText("");

    // 填充數據
    QStringList NameList;
    NameList << "lyshark A" << "lyshark B" << "lyshark C";

    QStringList SexList;
    SexList << "男" << "男" << "女";

    qint32 AgeList[3] = {22,23,43};

    // 針對獲取元素使用 NameList[x] 和使用 NameList.at(x)效果相同
    for(int x=0;x< 3;x++)
    {
        int col =0;
        // 添加姓名
        ui->tableWidget->setItem(x,col++,new QTableWidgetItem(NameList[x]));
        // 添加性別
        ui->tableWidget->setItem(x,col++,new QTableWidgetItem(SexList.at(x)));
        // 添加年齡
        ui->tableWidget->setItem(x,col++,new QTableWidgetItem( QString::number(AgeList[x]) ) );
    }
}

MainWindow::~MainWindow()
{
    delete ui;
}

代碼運行效果如下:

接着就是對Ui中的按鈕增加一些綁定事件，此處我們就通過connect綁定信號，綁定以下這幾個:

• ui->pushButton 綁定添加信號
• ui->pushButton_2 綁定刪除信號
• ui->pushButton_3 綁定獲取單元格信號
• ui->pushButton_4 綁定修改信號

增加添加按鈕信號: 給添加按鈕綁定一個信號槽,點擊按鈕添加

    connect(ui->pushButton,&QPushButton::clicked,[=](){

        QString Uname = ui->lineEdit_1->text();
        QString Usex = "男";
        int Uage = 0;

        if(ui->radioButton->isChecked())
            Usex = "男";
        if(ui->radioButton_2->isChecked())
            Usex = "女";

        Uage =(ui->lineEdit_2->text()).toInt();

        // 添加之前,先判斷Uname是否存在於TableWidget中,如果存在返回0不存在返回1
        bool isEmpty = ui->tableWidget->findItems(Uname,Qt::MatchExactly).empty();
        if(isEmpty)
        {
            ui->tableWidget->insertRow(0);    // 在行首添加一行空列表
            ui->tableWidget->setItem(0,0,new QTableWidgetItem(Uname));
            ui->tableWidget->setItem(0,1,new QTableWidgetItem(Usex));
            ui->tableWidget->setItem(0,2,new QTableWidgetItem( QString::number(Uage)));
        }
    });

增加刪除按鈕信號: 點擊按鈕刪除選中行

    connect(ui->pushButton_2,&QPushButton::clicked,[=](){
        bool isEmpty = ui->tableWidget->findItems(ui->lineEdit_1->text(),Qt::MatchExactly).empty();
        if(!isEmpty)
        {
            // 定位到所在行行號
            int row = ui->tableWidget->findItems(ui->lineEdit_1->text(),Qt::MatchExactly).first()->row();
            // 釋放資源
            ui->tableWidget->removeRow(row);
        }
    });

增加釋放單元格按鈕信號: 獲取當前選中單元,並釋放當前單格

    connect(ui->pushButton_3,&QPushButton::clicked,[=](){
        int row = ui->tableWidget->currentRow();
        std::cout << row << std::endl;

        QTableWidgetItem *table =  ui->tableWidget->currentItem();
        delete(table);
    });

增加修改單元格按鈕信號: 添加修改指定內容的處理流程

    connect(ui->pushButton_4,&QPushButton::clicked,[=](){
        QTableWidgetItem *cellItem;

        // 取出當前選中行
        int curr_row = ui->tableWidget->currentRow();

        // 循環列數
        // https://www.cnblogs.com/lyshark
        for(int col=0; col<ui->tableWidget->columnCount(); col++)
        {
            // 尋找到當前列的指針
            cellItem = ui->tableWidget->item(curr_row,col);

            // 循環輸出列名稱
            std::cout << cellItem->text().toStdString().data() << std::endl;

            // 先來處理第一個姓名,讀出來並寫回到列表第0列
            if(col == 0)
                cellItem->setText(ui->lineEdit_1->text());

            // 判斷性別,並分別寫回到第1列
            if(col == 1)
            {
                if(ui->radioButton->isChecked())
                    cellItem->setText("男");
                if(ui->radioButton_2->isChecked())
                    cellItem->setText("女");
            }

            // 判斷年齡,並寫回到第3列
            if(col == 2)
                cellItem->setText(ui->lineEdit_2->text());
        }
    });

信號綁定后,代碼運行效果如下: