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

lyshark發表於2021-12-01
C++QT元件

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());
        }
    });

訊號繫結後,程式碼執行效果如下:

相關文章