C/C++ Qt 資料庫與TableView多元件聯動

lyshark發表於2021-12-08
C++QT資料庫View元件

Qt 資料庫元件與TableView元件實現聯動，以下案例中實現了，當使用者點選並選中TableView元件內的某一行時，我們通過該行中的name欄位查詢並將查詢結果關聯到ListView元件內，同時將TableView中選中行的欄位分別顯示在窗體底部的LineEdit編輯內，該案例具體實現細節如下。

首先在UI介面中繪製好需要的控制元件，左側放一個TableView元件，右側是一個ListView元件，底部放三個LineEdit元件，介面如下:

我們還是需要建立兩張表結構，表Student用於儲存學生的基本資訊，表StudentTimetable儲存的是每個學生所需要學習的課程列表，執行後建立資料表。

void InitMultipleSQL()
{
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("./lyshark.db");
     if (!db.open())
     {
            std::cout << db.lastError().text().toStdString()<< std::endl;
            return;
     }

    // 執行SQL建立表
    db.exec("DROP TABLE Student");
    db.exec("CREATE TABLE Student ("
                    "id INTEGER PRIMARY KEY AUTOINCREMENT, "
                    "name VARCHAR(40) NOT NULL, "
                    "age INTEGER NOT NULL)"
         );

    // 批量建立資料
    // https://www.cnblogs.com/lyshark
    QStringList name_list; name_list << "lyshark" << "lisi" << "wangwu";
    QStringList age_list; age_list << "25" << "34" << "45";

    // 繫結並插入資料
    QSqlQuery query;
    query.prepare("INSERT INTO Student(name,age) ""VALUES (:name, :age)");

    if(name_list.size() == age_list.size())
    {
        for(int x=0;x< name_list.size();x++)
        {
            query.bindValue(":name",name_list[x]);
            query.bindValue(":age",age_list[x]);
            query.exec();
        }
    }

    // ------------------------------------------------
    // 建立第二張表,與第一張表通過姓名關聯起來
    db.exec("DROP TABLE StudentTimetable");
    db.exec("CREATE TABLE StudentTimetable("
            "id INTEGER PRIMARY KEY AUTOINCREMENT, "
            "name VARCHAR(40) NOT NULL, "
            "timetable VARCHAR(128) NOT NULL"
            ")");

    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('lyshark','AAA')");
    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('lyshark','BBB')");
    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('lyshark','CCC')");

    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('lisi','QQQ')");
    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('lisi','WWW')");

    db.exec("INSERT INTO StudentTimetable(name,timetable) VALUES ('wangwu','EEE')");

    db.commit();
    db.close();
}

程式執行後，建構函式MainWindow::MainWindow(QWidget *parent)內初始化表格，查詢Student表內記錄，將查詢到的指標繫結到theSelection模型上，繫結後再將繫結指標加入到dataMapper元件對映中，即可實現初始化，其初始化程式碼如下:

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

#include <QSqlDatabase>
#include <QSqlError>
#include <QSqlQuery>
#include <QSqlRecord>
#include <iostream>
#include <QStringList>
#include <QString>
#include <QVariant>
#include <QDataWidgetMapper>
#include <QtSql>
#include <QStandardItem>
#include <QStringList>
#include <QStringListModel>

QSqlQueryModel *qryModel;          // 資料模型
QItemSelectionModel *theSelection; // 選擇模型
QDataWidgetMapper *dataMapper;     // 資料介面對映

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

    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("./lyshark.db");
     if (!db.open())
     {
            std::cout << db.lastError().text().toStdString()<< std::endl;
            return;
     }

     // 查詢資料表中記錄
     qryModel=new QSqlQueryModel(this);
     qryModel->setQuery("SELECT * FROM Student ORDER BY id");
     if (qryModel->lastError().isValid())
     {
         return;
     }

     // 設定TableView表頭資料
     qryModel->setHeaderData(0,Qt::Horizontal,"ID");
     qryModel->setHeaderData(1,Qt::Horizontal,"Name");
     qryModel->setHeaderData(2,Qt::Horizontal,"Age");

     // 將資料繫結到模型上
     theSelection=new QItemSelectionModel(qryModel);
     ui->tableView->setModel(qryModel);
     ui->tableView->setSelectionModel(theSelection);
     ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

     // 建立資料對映
     dataMapper= new QDataWidgetMapper();
     dataMapper->setSubmitPolicy(QDataWidgetMapper::AutoSubmit);
     dataMapper->setModel(qryModel);
     dataMapper->addMapping(ui->lineEdit_id,0);
     dataMapper->addMapping(ui->lineEdit_name,1);
     dataMapper->addMapping(ui->lineEdit_age,2);
     dataMapper->toFirst();

     // 繫結訊號,當滑鼠選擇時,在底部編輯框中輸出
     // https://www.cnblogs.com/lyshark
     connect(theSelection,SIGNAL(currentRowChanged(QModelIndex,QModelIndex)),this,SLOT(on_currentRowChanged(QModelIndex,QModelIndex)));
}

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

此時這個程式執行後會得到表內資料:

接著我們需要繫結TableView表格的on_currentRowChanged()事件，當使用者點選TableView表格中的某個屬性是則自動觸發該函式，在此函式內我們完成對其他元件的填充.

  • 1.通過currentIndex方法獲取到當前表所在行
  • 2.通過當前行號查詢表中姓名，並帶入StudentTimetable表查該表中記錄
  • 3.迴圈獲取該使用者的資料,並將timetable欄位提取出來放入QStringList容器
  • 4.將資料直接關聯到ListView資料表中
// 滑鼠點選後的處理槽函式
void MainWindow::on_currentRowChanged(const QModelIndex &current, const QModelIndex &previous)
{
    Q_UNUSED(previous);
    if (!current.isValid())
    {
        return;
    }

    dataMapper->setCurrentModelIndex(current);

    // 獲取到記錄開頭結尾
    bool first=(current.row()==0);                    // 是否首記錄
    bool last=(current.row()==qryModel->rowCount()-1);// 是否尾記錄
    std::cout << "IsFirst: " << first << "IsLast: " << last << std::endl;


    // 獲取name欄位資料
    int curRecNo=theSelection->currentIndex().row();  // 獲取當前行號
    QSqlRecord curRec=qryModel->record(curRecNo);     // 獲取當前記錄
    QString uname = curRec.value("name").toString();
    std::cout << "Student Name = " << uname.toStdString() << std::endl;

    // 查StudentTimetable表中所有資料
    // 根據姓名過濾出該使用者的所有資料
    QSqlQuery query;
    query.prepare("select * from StudentTimetable where name = :x");
    query.bindValue(":x",uname);
    query.exec();

    // 迴圈獲取該使用者的資料,並將timetable欄位提取出來放入QStringList容器
    // https://www.cnblogs.com/lyshark
    QSqlRecord rec = query.record();
    QStringList the_data;

    while(query.next())
    {
        int index = rec.indexOf("timetable");
        QString data = query.value(index).toString();

        std::cout << "User timetable = " << data.toStdString() << std::endl;
        the_data.append(data);
    }

    // 關聯到ListView資料表中
    QStringListModel *model;
    model = new QStringListModel(the_data);
    ui->listView->setModel(model);
    ui->listView->setEditTriggers(QAbstractItemView::NoEditTriggers);
}

當繫結選中事件時,程式執行效果如下:

針對底部按鈕處理事件相對來說較為簡單，其實現原理就是呼叫了TableView預設提供的一些函式而已，程式碼如下:

// 重新整理tableView的當前選擇行
// https://www.cnblogs.com/lyshark
void MainWindow::refreshTableView()
{
    int index=dataMapper->currentIndex();
    QModelIndex curIndex=qryModel->index(index,0);      // 定位到低0行0列
    theSelection->clearSelection();                     // 清空選擇項
    theSelection->setCurrentIndex(curIndex,QItemSelectionModel::Select);//設定剛插入的行為當前選擇行
}

// 第一條記錄
void MainWindow::on_pushButton_clicked()
{
    dataMapper->toFirst();
    refreshTableView();
}
// 最後一條記錄
void MainWindow::on_pushButton_2_clicked()
{
    dataMapper->toLast();
    refreshTableView();
}

// 前一條記錄
void MainWindow::on_pushButton_3_clicked()
{
    dataMapper->toPrevious();
    refreshTableView();
}

// 下一條記錄
void MainWindow::on_pushButton_4_clicked()
{
    dataMapper->toNext();
    refreshTableView();
}

最終執行效果如下所示:

相關文章