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

信号绑定后,代码运行效果如下:

到此这篇关于C/C++表格组件Qt TableWidget应用详解的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • C/C++ Qt 给ListWidget组件增加右键菜单功能

    在上一篇博文<C/C++ Qt ListWidget 列表框组件应用>中介绍了ListWidget组件的基本使用技巧,本次将给ListWidget组件增加一个右键菜单,当用户在ListWidget组件中的任意一个子项下右键,我们让其弹出这个菜单,并根据选择提供不同的功能. 为了增加菜单,我们首先需要在程序全局增加QAction其中每一个QAction则代表一个菜单选项指针. // 全局下设置增加菜单 QAction *NewAction; QAction *InsertAction; QAct

  • C/C++ Qt QChart绘图组件的具体使用

    QtCharts 组件是QT中提供图表绘制的模块,该模块可以方便的绘制常规图形,Qtcharts 组件基于GraphicsView模式实现,其核心是QChartView和QChart的二次封装版. 在使用绘图模块时需要在pro文件中包含QT += charts来引入绘图类库. 然后还需在头文件中定义QT_CHARTS_USE_NAMESPACE宏,这样才可以正常的使用绘图功能. 一般情况下我们会在mainwindows.h头文件中增加如下代码段. #include <QMainWindow>

  • C/C++ Qt QThread线程组件的具体使用

    QThread库是QT中提供的跨平台多线程实现方案,使用时需要继承QThread这个基类,并重写实现内部的Run方法,由于该库是基本库,默认依赖于QtCore.dll这个基础模块,在使用时无需引入其他模块. 实现简单多线程 QThread库提供了跨平台的多线程管理方案,通常一个QThread对象管理一个线程,在使用是需要从QThread类继承并重写内部的Run方法,并在Run方法内部实现多线程代码. #include <QCoreApplication> #include <iostre

  • C/C++ Qt TreeWidget 嵌套节点操作使用

    目录 简单的节点遍历 初始化树形节点 单击双击节点反馈 添加 父节点/子节点 删除选中节点 修改指定节点名称 枚举所有节点元素 枚举选中节点元素 获取选中子节点的父节点 在上一篇博文<C/C++ Qt TreeWidget 单层树形组件应用>中给大家演示了如何使用TreeWidget组件创建单层树形结构,并给这个树形组件增加了右键菜单功能,接下来将继续延申树形组件的使用,并实现对树形框多节点的各种操作. 常用树形框节点间的操作方法如下: 节点遍历 初始化节点 单击双击节点 添加根节点 添加子节

  • C/C++ Qt Tree与Tab组件实现分页菜单功能

    虽然TreeWidget组件可以实现多节点的增删改查,但多节点操作显然很麻烦,在一般的应用场景中基本上只使用一层结构即可解决大部分开发问题,TreeWidget组件通常可配合TabWidget组件,实现一个类似于树形菜单栏的功能,当用户点击菜单栏中的选项时则会跳转到不同的页面上. 首先在Qt的Ui编辑界面左侧加入TreeWidget组件,右侧加入TabWidget组件,将页面中的TabWidget组件增加指定页,效果如下. 在MainWindow::MainWindow主函数中我们对其中的两个组

  • C/C++ Qt MdiArea 多窗体组件应用教程

    MDI多窗体组件,主要用于设计多文档界面应用程序,该组件具备有多种窗体展示风格,其实现了在父窗体中内嵌多种子窗体的功能,使用MDI组件需要在UI界面中增加mdiArea控件容器,我们所有的窗体创建与操作都在这个容器内进行,如下我们将具体介绍该组件的常用使用技巧. MDI窗体控件类似于画布,该控件只具备展示窗体的功能,无法实现生成窗体,所以我们需要在项目中手动增加自定义的Dialog对话框,并对该对话框进行一定的定制. 这个Dialog对话框我们只增加两个功能,一个Dialog::currentF

  • C/C++中使用列表框组件Qt ListWidget

    ListWidget列表框组件,该组件与TreeWidget有些相似,区别在于TreeWidget可以实现嵌套以及多字段结构,而ListWidget组件则只能实现单字段结构,ListWidget组件常用于显示单条记录,例如只显示IP地址,用户名等数据,如下笔记是本人在开发中经常用到的一些基本操作技巧,包括列表框组件的基本操作方法. 常用节点间的操作方法如下: ListView 组件与应用基础 ListWidget 初始化 ListWidget 变化行(触发事件) ListWidget 编辑状态设

  • C/C++表格组件Qt TableWidget应用详解

    TableWidget 表格结构组件,该组件可以看作是TreeWidget树形组件的高级版,表格组件相比于树结构组件灵活性更高,不仅提供了输出展示二维表格功能,还可以直接对表格元素直接进行编辑与修改操作,表格结构分为表头,表中数据两部分,表格结构可看作一个二维数组,通过数组行列即可锁定特定元素,如下代码是针对表格结构的基本使用方法,分别实现了表头数据的初始化,元素的插入等基本操作. 在研究Widget组件之前先来熟悉一下View组件,View组件相对Widget组件来说只是不具备编辑功能,其他功

  • Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

  • JS表格组件神器bootstrap table详解(基础版)

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • vue.js表格组件开发的实例详解

    前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

  • JS表格组件神器bootstrap table详解(强化版)

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • QT布局管理详解QVBoxLayout与QHBoxLayout及QGridLayout的使用

    目录 main.cpp mainwindow.h mainwindow.cpp ui界面设计 登录界面为例 总结 main.cpp #include "mainwindow.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; return a.exec(); } mainwindow.h #ifndef MAINWIND

  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解

    目录 一.导入和导出 二.导出数据为excel实现过程 三.将excel中的数据导入到数据库中 一.导入和导出 导入:通过解析excel表格中的数据,然后将数据放到一个集合中,接着通过对持久层操作,将数据插入到数据库中,再加载一下页面,从而实现了数据的导入 导出:导出也是直接对数据库进行操作,获取数据库中所有的数据,将其存储在一个集中,接着使用查询出来的的数据生成一个excel表格 其中导入和导出的功能实现都是基于EasyExcel实现的 EasyExcel是阿里巴巴开源的一个基于Java的简单

  • Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • Vue2.0父子组件传递函数的教程详解

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

  • vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

随机推荐