Qt5中表格處理大數據量

在Qt中如果是普通項目，GUI處理展現的數據量不大，一般用QTableWidget，QTreeWidget這樣的控件就滿足了，但是如果數據量行數達到了幾萬行，那么Widget的展示性能就偏差了。

Qt中提供了一種Model/View的編程方式來處理數據，也就是展示層和數據層分離，這樣就解耦了。一旦Model的狀態改變，它會自動渲染到View控件。這樣的機制使得GUI可以展現大量的數據也不會卡頓。

為了處理數據的靈活性，我們用QStandardItemModel來做QTableView的Model層實現。因為以Table的形式展現，所以以下代碼實現了，點擊表頭按列排序，點擊行顯式行的上下文菜單的功能。因為QTableView的默認

排序是按字符序列排序，所以得對QStandardItem進行子類化，並重載operator< 函數才能達到某些列用數值大小來排序。

 

因為是簡單的Demo例子，QTableView是采用拖拽空間的方式拖到一個Widget里面的，該Wdiget類為ModelViewTable：

// ModelViewTable.h
#pragma once

#include <QtWidgets/QWidget>
#include "ui_ModelViewTable.h"

class QStandardItemModel;
class QMenu;

class ModelViewTable : public QWidget
{
    Q_OBJECT

public:
    ModelViewTable(QWidget *parent = Q_NULLPTR);
    void generateDataSet();
    void addRowRecord(int row);

    void setColumnItem(int row, int column, QString ip);

public slots:
    void slotShowContextMenu(const QPoint& point);
private:
    Ui::ModelViewTableClass ui;
    QStandardItemModel * m_model;
    QMenu* m_contextMenu;
};

// ModelViewTable.cpp
#include "ModelViewTable.h"

#include <QStandardItemModel>
#include <QStandardItem>
#include <QString>
#include <QMenu>
#include <QAction>

#include "CustomStandardItem.h"

ModelViewTable::ModelViewTable(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    //////////////////////////設置表頭/////////////////////
    m_model = new QStandardItemModel(this);
    m_model->setColumnCount(3);
    m_model->setHeaderData(0, Qt::Horizontal, QStringLiteral("終端IP"));
    m_model->setHeaderData(1, Qt::Horizontal, QStringLiteral("CPU使用率"));
    m_model->setHeaderData(2, Qt::Horizontal, QStringLiteral("內存使用率"));
    
    ui.tableView->resizeColumnsToContents(); // 自適應列寬
    ui.tableView->setSortingEnabled(true); // 可以按列來排序
    ui.tableView->setModel(m_model);
    ui.tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignHCenter);
    ui.tableView->horizontalHeader()->setFont(QFont("Times",10,QFont::Bold));
   
    ui.tableView->setSelectionBehavior(QAbstractItemView::SelectRows); //整行選中
    ui.tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);// 表格單元格為只讀
    ui.tableView->setContextMenuPolicy(Qt::CustomContextMenu); // 可以自定義右鍵菜單

    m_contextMenu = new QMenu(this);
    QAction *processAct = new QAction(QStringLiteral("進程列表信息"),m_contextMenu);
    QAction *windowAppsAct = new QAction(QStringLiteral("窗口應用列表信息"),m_contextMenu);
    m_contextMenu->addAction(processAct);
    m_contextMenu->addAction(windowAppsAct);

    connect(ui.tableView, SIGNAL(customContextMenuRequested(const QPoint&)),
        this, SLOT(slotShowContextMenu(const QPoint&)));
   

}

void ModelViewTable::generateDataSet()
{
    for (int i = 0; i < 3000; ++i)
    {
        addRowRecord(i);
    }
}

void ModelViewTable::addRowRecord(int row)
{
    // 每行3列
    QString ip = QString("%1.%2.%3.%4").arg(192).arg(168).arg(1).arg(row);
    setColumnItem(row, 0, ip);

    QString cpu = QString("%1").arg((row * 10) % 100);
    setColumnItem(row, 1, cpu);

    QString mem = QString("%1").arg((row * 12)  % 100);
    setColumnItem(row, 2, mem);
    
}

void ModelViewTable::slotShowContextMenu(const QPoint& point)
{
    QModelIndex index = ui.tableView->indexAt(point);
    if (index.isValid())
    {
        m_contextMenu->exec(QCursor::pos());
    }
}

void ModelViewTable::setColumnItem(int row, int column, QString ip)
{
    m_model->setItem(row, column, new CustomStandardItem(ip));
    m_model->item(row, column)->setTextAlignment(Qt::AlignCenter);
}

 

因為需要實現自定義的數值排序，所以要繼承QStandardItem，並覆蓋其中的相關函數:

//   CustomStandardItem.h
#pragma once

#include <QStandardItem>
#include <QString>

//  自定義數值排序
class CustomStandardItem : public QStandardItem
{
   // Q_OBJECT

public:
    CustomStandardItem();
    CustomStandardItem(const CustomStandardItem& other);
    CustomStandardItem(const QString &text);
    CustomStandardItem & operator =(const CustomStandardItem& other);
    ~CustomStandardItem();

public:
    virtual bool operator<(const QStandardItem& other) const override;

};

//CustomStandardItem.cpp
#include "CustomStandardItem.h"

#include <QVariant>

CustomStandardItem::CustomStandardItem()
{
}

CustomStandardItem::CustomStandardItem(const CustomStandardItem& other)
    :QStandardItem(other)
{

}

CustomStandardItem::CustomStandardItem(const QString &text)
    :QStandardItem(text)
{

}

CustomStandardItem::~CustomStandardItem()
{
}

CustomStandardItem & CustomStandardItem::operator=(const CustomStandardItem& other)
{
    QStandardItem::operator=(other);
    return *this;
}

bool CustomStandardItem::operator<(const QStandardItem& other) const
{
    const QVariant left = data(Qt::DisplayRole), right = other.data(Qt::DisplayRole);
    //   第1到2列，全部采用浮點數的大小排序
    if (column() == other.column() && other.column() >= 1 && other.column() <= 2)
    {
        return left.toDouble() < right.toDouble();
    }

    return QStandardItem::operator<(other);
}

 

以上代碼就完全實現了Model/View 的Table編程。

 

references:

https://stackoverflow.com/questions/18421603/displaying-big-data-using-qt-table-view

https://stackoverflow.com/questions/4031168/qtableview-is-extremely-slow-even-for-only-3000-rows

https://doc.qt.io/archives/qq/qq07-big-tables.html

http://blog.csdn.net/woshiwlia/article/details/9141065

http://blog.csdn.net/u013255206/article/details/62235052

http://qimo601.iteye.com/blog/1539147

http://qimo601.iteye.com/blog/1530539

http://qimo601.iteye.com/blog/1530245