简述

使用QTableView,经常会遇到复选框,要实现一个好的复选框,除了常规的功能外,还应注意以下几点:

  1. 三态:不选/半选/全选
  2. 自定义风格(样式)

下面我们介绍一下常见的实现方式:

  • 编辑委托。

    方式:利用委托重载createEditor(),激活QCheckBox。

    特点:必须双击/选中,才能显示CheckBox控件。一般不满足实际中的直接显示的需要。

  • 使用QTableView的setIndexWidget(const QModelIndex &index, QWidget *widget)来实现。

    此功能用来显示可视区域内对应一个数据项的静态内容。如果想显示自定义的动态内容或执行自定义编辑器部件,子类化QItemDelegate代替。也就是说,这只适合做静态数据的显示,不适合做一些插入、更新、删除操作的数据显示。

  • 自定义模型QAbstractTableModel,通过flags()函数来实现。

    方式:通过将flags()设置为Qt::ItemIsUserCheckable实现可选中,然后配合setData()与data()来实现。

    特点:直接显示,可定义样式,默认左对齐,很难实现居中、右对齐。

  • 自定义委托QAbstractItemDelegate,通过paint()函数来实现。

    方式:通过控制editorEvent()实现鼠标的点击进行全选/半选/不选,然后由paint()实时绘制。

    特点:这种方式比较复杂,但适合扩展,除了可以嵌入复选框,还可以绘制其它控件-按钮、图片等。

效果

下面我们来介绍如何利用QAbstractTableModel的flags()函数来实现复选功能。

QAbstractTableModel

源码

table_model.cpp

#define CHECK_BOX_COLUMN 0
#define File_PATH_COLUMN 1 TableModel::TableModel(QObject *parent)
: QAbstractTableModel(parent)
{ } TableModel::~TableModel()
{ } // 更新表格数据
void TableModel::updateData(QList<FileRecord> recordList)
{
m_recordList = recordList;
beginResetModel();
endResetModel();
} // 行数
int TableModel::rowCount(const QModelIndex &parent) const
{
return m_recordList.count();
} // 列数
int TableModel::columnCount(const QModelIndex &parent) const
{
return 2;
} // 设置表格项数据
bool TableModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
if (!index.isValid())
return false; int nColumn = index.column();
FileRecord record = m_recordList.at(index.row());
switch (role)
{
case Qt::DisplayRole:
{
if (nColumn == File_PATH_COLUMN)
{
record.strFilePath = value.toString(); m_recordList.replace(index.row(), record);
emit dataChanged(index, index);
return true;
}
}
case Qt::CheckStateRole:
{
if (nColumn == CHECK_BOX_COLUMN)
{
record.bChecked = (value.toInt() == Qt::Checked); m_recordList.replace(index.row(), record);
emit dataChanged(index, index);
return true;
}
}
default:
return false;
}
return false;
} // 表格项数据
QVariant TableModel::data(const QModelIndex &index, int role) const
{
if (!index.isValid())
return QVariant(); int nRow = index.row();
int nColumn = index.column();
FileRecord record = m_recordList.at(nRow); switch (role)
{
case Qt::TextColorRole:
return QColor(Qt::white);
case Qt::TextAlignmentRole:
return QVariant(Qt::AlignLeft | Qt::AlignVCenter);
case Qt::DisplayRole:
{
if (nColumn == File_PATH_COLUMN)
return record.strFilePath;
return "";
}
case Qt::CheckStateRole:
{
if (nColumn == CHECK_BOX_COLUMN)
return record.bChecked ? Qt::Checked : Qt::Unchecked;
}
default:
return QVariant();
} return QVariant();
} // 表头数据
QVariant TableModel::headerData(int section, Qt::Orientation orientation, int role) const
{
switch (role)
{
case Qt::TextAlignmentRole:
return QVariant(Qt::AlignLeft | Qt::AlignVCenter);
case Qt::DisplayRole:
{
if (orientation == Qt::Horizontal)
{
if (section == CHECK_BOX_COLUMN)
return QStringLiteral("状态"); if (section == File_PATH_COLUMN)
return QStringLiteral("文件路径");
}
}
default:
return QVariant();
} return QVariant();
} // 表格可选中、可复选
Qt::ItemFlags TableModel::flags(const QModelIndex &index) const
{
if (!index.isValid())
return QAbstractItemModel::flags(index); Qt::ItemFlags flags = Qt::ItemIsEnabled | Qt::ItemIsSelectable;
if (index.column() == CHECK_BOX_COLUMN)
flags |= Qt::ItemIsUserCheckable; return flags;
}

接口说明

  • updateData

    主要用于更新数据,刷新界面。

  • data

    用来显示数据,根据角色(颜色、文本、对齐方式、选中状态等)判断需要显示的内容。

  • setData

    用来设置数据,根据角色(颜色、文本、对齐方式、选中状态等)判断需要设置的内容。

  • headerData

    用来显示水平/垂直表头的数据。

  • flags

    用来设置单元格的标志(可用、可选中、可复选等)。

样式

QSS不仅可以设置表格、表格项样式(背景、文本等),也可以通过indicator来设置复选框的样式:

QTableView {
border: 1px solid rgb(50, 50, 50);
background: rgb(57, 58, 60);
gridline-color: rgb(60, 60, 60);
}
QTableView::item {
border: none;
border-bottom: 1px solid rgb(50, 50, 50);
}
QTableView::item:selected {
background: rgb(0, 160, 230);
}
QTableView::indicator {
width: 17px;
height: 17px;
}
QTableView::indicator:enabled:unchecked {
image: url(:/Images/checkBox);
}
QTableView::indicator:enabled:unchecked:hover {
image: url(:/Images/checkBoxHover);
}
QTableView::indicator:enabled:unchecked:pressed {
image: url(:/Images/checkBoxPressed);
}
QTableView::indicator:enabled:checked {
image: url(:/Images/checkBoxChecked);
}
QTableView::indicator:enabled:checked:hover {
image: url(:/Images/checkBoxCheckedHover);
}
QTableView::indicator:enabled:checked:pressed {
image: url(:/Images/checkBoxCheckedPressed);
}
QTableView::indicator:enabled:indeterminate {
image: url(:/Images/checkBoxIndeterminate);
}
QTableView::indicator:enabled:indeterminate:hover {
image: url(:/Images/checkBoxIndeterminateHover);
}
QTableView::indicator:enabled:indeterminate:pressed {
image: url(:/Images/checkBoxIndeterminatePressed);
}

使用

QTableView *pTableView = new QTableView(this);
TableModel *pModel = new TableModel(this); // 设置单行选中、最后一列拉伸、表头不高亮、无边框等
pTableView->setSelectionBehavior(QAbstractItemView::SelectRows);
pTableView->horizontalHeader()->setStretchLastSection(true);
pTableView->horizontalHeader()->setHighlightSections(false);
pTableView->verticalHeader()->setVisible(false);
pTableView->setShowGrid(false);
pTableView->setFrameShape(QFrame::NoFrame);
pTableView->setSelectionMode(QAbstractItemView::SingleSelection);
pTableView->setModel(pModel); // 加载数据、更新界面
QList<FileRecord> recordList;
for (int i = 0; i < 5; ++i)
{
FileRecord record;
record.bChecked = false;
record.strFilePath = QString("E:/Qt/image_%1.png").arg(i + 1);
recordList.append(record);
}
pModel->updateData(recordList);

Qt之QTableView添加复选框(QAbstractTableModel)的更多相关文章

  1. Qt之QTableView添加复选框(QAbstractItemDelegate)

    简述 上节分享了使用自定义模型QAbstractTableModel来实现复选框.下面我们来介绍另外一种方式: 自定义委托-QAbstractItemDelegate. 简述 效果 QAbstract ...

  2. Qt之QHeaderView添加复选框

    简述 前面分享了QTableView中如何添加复选框.本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头为例,垂直表头类似! 简述 效果 QHeaderV ...

  3. PyQt5之 QTableView 添加复选框(自定义委托)

    import sys from untitled import Ui_Form from PyQt5.QtWidgets import QApplication, QWidget, QStyleOpt ...

  4. Qt之QHeaderView加入复选框

    简述 前面分享了QTableView中怎样加入复选框. 本节主要介绍QTableView中的表头-QHeaderView加入复选框的功能,以下以水平表头为例.垂直表头相似! 简述 效果 QHeader ...

  5. 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  6. QListWidget的QComboBox下拉列表添加复选框及消息处理

    要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  8. dojo:为数据表格添加复选框

    一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...

  9. DateGridView标题列头添加复选框

    第一:添加列标题时,添加两个空格——用于显示复选框: 第二:实现列标题添加复选框,代码如下: private void AddCheckeBoxToDGVHeader(DataGridView dgv ...

随机推荐

  1. ora-01033和ora-12560错误的解决方案

    1.登录pl sql 报01033的错误,如下图: 2.登录cmd中,报12560的错误,如下图: 3.查看服务和注册表都没有问题,如下: 查看服务,已启动,如下图: 运行regedit,进入HKEY ...

  2. linux命令:locate

    1.命令介绍: locate用来查找文件,它是在系统的数据库中查找,所以速度非常快. 2.命令格式: locate [选项] 模式         ---这里的模式是指正则表达式 3.命令参数: -e ...

  3. BZOJ1407_NOI2002_荒岛野人_Savage_C++

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1407 题解:http://www.cnblogs.com/hadilo/p/5951091.h ...

  4. PostgreSQL的 initdb 源代码分析之二十三

    继续分析: vacuum_db(); 展开: cmd是:/home/pgsql/project/bin/postgres" --single -F -O -c search_path=pg_ ...

  5. UI/UE对个性化推荐的影响

            用户界面,用户体验.         在创建网站选择色调时,大多数企业想到的是美观.其实,颜色所起到的作用远超出人们的想象.         关于颜色与购买习惯的心理学书籍比比皆是,下 ...

  6. Linq中join &amp; group join &amp; left join 的用法

    Linq中join & group join & left join 的用法 2013-01-30 11:12 12154人阅读 评论(0) 收藏 举报  分类: C#(14)  文章 ...

  7. Nginx防盗链配置案例配置,Nginx的知识分享

    防盗链的含义:网站内容不在自己服务器上,而通过技术手段,绕过别人放广告有利益的最终页,直接在自己的有广告有利益的页面上向最终用户提供此内容. 常常是一些名不见经传的小网站来盗取一些有实力的大网站的地址 ...

  8. WebService(1-1)webservice调用

    参考url : http://www.cnblogs.com/flying607/p/6254045.html 今天用动态创建客户端的方式调用webservice,报了这样一个错: 2017-01-0 ...

  9. txn.go

    package clientv3 import (     "sync"     pb "github.com/coreos/etcd/etcdserver/etcdse ...

  10. Angular记录(11)

    开始使用Angular写页面 使用WebStorm:版本2018.3.5 官网资料 资料大部分有中文翻译,很不错 速查表:https://www.angular.cn/guide/cheatsheet ...