1         QTableWidget自定义表头QHeaderView加全选复选框

在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复选框了。并且实现点击复选框时,发出信号,让QTableWidget中每条记录的复选框都选中,取消时,QTableWidget中每条记录的复选框都取消。并且实现复选框的normal、hov、pressed三种状态的显示。三种状态需要设置背景图片。效果图如下

(1)   继承QHeaderView,重写绘制函数,绘制表头,重写鼠标移动函数,用来获取鼠标位置,鼠标移动到复选按钮上时,显示高亮。重写鼠标点击函数,点击复选框时,发送信号控制选中和取消。

头文件:

#pragma once

#include <QHeaderView>

#include <QPainter>

#include <QMouseEvent>

using namespace std;

class MyQHeaderView : public QHeaderView

{

Q_OBJECT

public:

explicit MyQHeaderView(Qt::Orientation orientation, QWidget *parent = 0);

signals:

void headCheckBoxToggled(bool checked);

protected:

void paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const;

void mousePressEvent(QMouseEvent *event);

void mouseMoveEvent(QMouseEvent *event);

private:

bool m_isOn;//是否选中

QPoint m_mousePoint;//鼠标位置

mutable QRect m_RectHeaderCheckBox;//复选框的位置

};

源文件

#include "QMyHeaderView.h"

MyQHeaderView::MyQHeaderView(Qt::Orientation orientation, QWidget *parent)

: QHeaderView(orientation, parent)

, m_isOn(false)

{

m_isOn = false;

m_mousePoint.setX(100);

m_mousePoint.setY(100);

}

/*绘制表头logicalIndex表示表头第几列,0表示第0列,也就是我们要画复选框的列,rect是表头第一列的大小*/

void MyQHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const

{

painter->save();

QHeaderView::paintSection(painter, rect, logicalIndex);

painter->restore();

if (logicalIndex == 0)//第一列

{

//保存第一列的位置

m_RectHeaderCheckBox.setX(rect.x() + 3);

m_RectHeaderCheckBox.setY(rect.y() + 10);

m_RectHeaderCheckBox.setWidth(14);

m_RectHeaderCheckBox.setHeight(14);

QStyleOptionButton option;

QPixmap pix;

if (m_isOn)

{//图片需要在资源里添加

pix.load(":/checkImage/image/checkImage/check-sel.png");//选中

option.state = QStyle::State_On;

}

else if (m_RectHeaderCheckBox.contains(m_mousePoint))

{

pix.load(":/checkImage/image/checkImage/check-hov.png");//高亮

option.state = QStyle::State_HasFocus;

}

else

{

pix.load(":/checkImage/image/checkImage/check-nor.png");//正常

option.state = QStyle::State_Off;

}

style()->drawItemPixmap(painter, rect, Qt::AlignLeft | Qt::AlignVCenter, pix);

//方法2,画选择按钮,,无法设置背景图片

//

//option.rect = m_RectHeaderCheckBox;

//QIcon icon(pix);

//option.icon = icon;//setStyleSheet("background");

//style()->drawControl(QStyle::CE_CheckBox, &option, painter);

}

}

void MyQHeaderView::mousePressEvent(QMouseEvent *event)

{

//表头可控制,鼠标第一个列,鼠标在矩形范围内

if (isEnabled() && logicalIndexAt(event->pos()) == 0&&m_RectHeaderCheckBox.contains(event->pos()))

{

m_isOn = !m_isOn;

updateSection(0);//刷新表头第一列

emit headCheckBoxToggled(m_isOn);

}

else QHeaderView::mousePressEvent(event);

}

void MyQHeaderView::mouseMoveEvent(QMouseEvent *event)

{

//保存鼠标的位置

m_mousePoint = event->pos();

if (m_RectHeaderCheckBox.contains(m_mousePoint))

{

updateSection(0);//重绘表头复选框

}

QHeaderView::mouseMoveEvent(event);

}

(2)   Qdesign中加入QTablewidget,并添加表头字段,第一个为空,用于添加选择复选框。

(3)   在主界面类中new一个表头对象,设置到QtableWidget

//new表头对象

MyQHeaderView*myHeader = new MyQHeaderView(Qt::Horizontal, ui.tableWidget);

myHeader->setStretchLastSection(true);

myHeader->setStyleSheet("alignment: left;");

//连接单击信号槽,在槽函数中

QObject::connect(myHeader, &MyQHeaderView::headCheckBoxToggled, this, &AlarmCenter::SetAlarmListCheckState);

ui.tableWidget->setHorizontalHeader(myHeader);//设置表头

(4)   至于QTableWidget表格中数据前面的复选框则是用CheckBox

QCheckBox *CheckBox = new QCheckBox(ui.tableWidget);

QSize size(39, 35);

CheckBox->setFixedSize(size);

CheckBox->setCheckState(Qt::Unchecked);

//创建单击选中的信号槽连接

QObject::connect(CheckBox, &QCheckBox::clicked,this, [=]()

{

AlarmTableItemChoosed(row, 0);

});

ui.tableWidget->setCellWidget(row, 0, CheckBox);//row行,0列

QTableWidget自定义表头QHeaderView加全选复选框的更多相关文章

  1. ExtJS中,将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  2. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  3. WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...

  4. java freemarker导出word时添加或勾选复选框

    最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...

  5. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  6. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  7. iOS开发-UITableView单选多选/复选实现1

    TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...

  8. jQuery实现一个全选复选框联动效果

    类似邮件列表里的复选框 要求双向联动 ☛ [实现]: <body> <div> <input type="checkbox" name="c ...

  9. 织梦/dedecms 当文章转载时不需要设置图片水印的设置,取消’图片是否加水印‘的复选框,并且修改如下文件即可生效

    当想添加水印是选中“图片是否加水印”复选框即可. 找到include/helpers/image.helper.php这个文件,在里面找到中的if( isset($GLOBALS['needwater ...

随机推荐

  1. Docker学习笔记之搭建Docker运行环境

    0x00 概述 既然 Docker 是一款实用软件,我们就不得不先从它的安装说起,只有让 Docker 运行在我们的计算机上,才能更方便我们对 Docker 相关知识和使用方式的学习.得益于与商业性的 ...

  2. hihocoder [Offer收割]编程练习赛8

    第一次做这种比赛,被自己坑的好惨... A.这道题的关键其实是如果有k和n满足kD+F>nL>kD则不能走无限远,分支看似难整理,其实比较简单,F>L根本就不用算了,明摆着就是Bsi ...

  3. vue2.0之element table的使用

    说明: 1.改变表头居中问题:    需要在el-table-column中添加  header-align="center" <el-table :data="t ...

  4. 20145204张亚军——web安全基础实践

    web安全基础实践 实验后回答问题 1.SQL注入原理,如何防御 SQL注入:就是通过把SQL命令插入到"Web表单递交"或"输入域名"或"页面请求& ...

  5. Codeforces 581F Zublicanes and Mumocrates - 树形动态规划

    It's election time in Berland. The favorites are of course parties of zublicanes and mumocrates. The ...

  6. 【python003-变量】

    变量 一.在使用变量之前,需要先对其进行赋值 二.变量命名的规则:可以包含字母,数字,下划线,但是不能以数字开头 三.字符串: 1.引号内的一切东西 2.python的字符串是要在两边加上引号,对于单 ...

  7. SVM学习笔记4-核函数和离群点的处理

    核函数在svm里,核函数是这样定义的.核函数是一个n*n(样本个数)的矩阵,其中:$K_{ij}=exp(-\frac{||x^{(i)}-x^{(j)}||^{2}}{2\sigma ^{2}})$ ...

  8. Oracle为表或字段添加备注

    comment on column TableName.ColumnName is ‘备注名’; comment on table TableName is '备注名';

  9. Python3 tkinter基础 Checkbutton anchor for生成多个控件并西对齐

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. Nodejs学习笔记2

    在linux中, 个人用户的文件, 通常是放在 自己的 家目录中的, root用户放在 /root中. root用户根其他普通用户不同, root用户是专门放在 /root目录中的, 而普通用户的文件 ...