【独家连载】Qt进阶003：像Excel一样在列标题中绘制过滤指...

baizy77

原创文章，转载请注明出处。

----------------------------------------------------------------------------

引言

----------------------------------------------------------------------------------------------------------------------

       使用Qt3的时候我们还用QTableWidget绘制表格，但是Qt的更高版本中提供了MVC支持，这为面向对象编程提供了更好的手段。在更高版本的Qt中，提供了QTableView来绘制表格，程序员只需为view设置Model就可以了，这极大简化了编程。但是单纯的表格展示有时候不满足我们的使用，有时候，我们也需要像Excel一样进行过滤并在列标题中绘制过滤指示符以便方便的展示哪些列可以过滤，哪些列已经执行了过滤，那么在Qt中该怎么做呢？

正文

----------------------------------------------------------------------------------------------------------------------

       QTableView提供行标题、列标题视图(QHeaderView)，也就是我们通常所说的表头。我们如果要进行过滤，一般会设置列的数据类型，然后根据数据类型进行过滤。为了简化起见，我们仅对标题的绘制部分进行着重介绍。

      // cheaderview.h

1. class CHeaderVieww : public QHeaderView {
   
2.        public:
   
3.    ........
   
4.        public:
   
5. 
   
6.     // 重置列
   
7.     void CHeaderView::resetColumnCount(int count);
   
8.     // 设置某列是否处于过滤状态
   
9.     void setFilterFlag(int column, bool bEnable);
   
10.     // 绘制列标题
    
11.     void PaintSection(QPainter* painter, const QRect& rect, int logicalIndex) const;
    
12. private:
    
13.     std::vector<bool> m_vFilterFlag;     /// 当前过滤状态
    
14. };

复制代码

   

    // cheaderview.cpp

1. void CHeaderView::resetColumnCount(int count) {
   
2.     m_vFilterFlag.resize(count);
   
3.     for (int i = 0; i < count; i++)    {
   
4.         m_vFilterFlag[i] = false;
   
5.     }
   
6. }

复制代码

                指定的列进入过滤状态，本接口由过滤选择界面调用:

1. void CHeaderView::setFilterFlag(int column, bool bEnable)
   
2. {
   
3.     if (column < m_vFilterFlag.size())
   
4.     {
   
5.         m_vFilterFlag[column] = bEnable;
   
6.     }
   
7.     viewport()->update();
   
8. }
   

复制代码

              绘制过滤指示符接口：

1. static const int c_nFilterButtonWidth= 20; // 过滤按钮宽度
   
2. static const int c_nAdjustLength = 5; // 光标改为调整列宽时的范围
   
3. 
   
4. void CHeaderView::paintSection(QPainter* painter, const QRect& rect, int logicalIndex) const {
   
5.     QRect rct = rect;
   
6.     rct.setWidth(rect.width() - c_nFilterButtonWidth - c_nAdjustLength);
   
7.     painter->save();
   
8. 
   
9.     // 需要先调用父类接口，再绘制自己的内容，否则自己的内容会被父类绘制的内容遮盖。
   
10.     CGPHeaderView::paintSection(painter, rct, logicalIndex);
    
11.     painter->restore();
    
12.     // 我们希望表格在视图中不要太突出，最好跟背景融为一体，这样比较协调。
    
13.     painter->setBrush(palette().background());
    
14. 
    
15.     QRect rectButton(rect.right() - c_nFilterButtonWidth - c_nAdjustLength, rect.y(),
    
16.         c_nFilterButtonWidth, rect.height());

复制代码

1.         QStyleOptionButton option;
   
2.         option.features = QStyleOptionButton::Flat;
   
3.         option.rect = rectButton;
   
4.         option.palette = palette();
   
5.         rectButton.adjust(0, 2, -1, -3);
   
6.         painter->drawRoundRect(rectButton, 2, 2);        
   
7. 
   
8.         if (m_vFilterFlag[logicalIndex]) // 绘制过滤标志
   
9.         {
   
10.                 QRectF rctStandard(0, 0, 18, 22);
    
11.                 rctStandard.moveCenter(rectButton.center());
    
12.                 QVector<QPointF> vPoints;
    
13.                 vPoints << QPointF(rctStandard.left() + 1 / 3.*rctStandard.width(), 1 / 4. * rctStandard.height() + rctStandard.top())
    
14.                         << QPointF(rctStandard.left() + 11 / 12.*rctStandard.width(), 1 / 4. * rctStandard.height() + rctStandard.top())
    
15.                         << QPointF(rctStandard.left() + 17 / 24. * rctStandard.width(), 1 / 2. * rctStandard.height() + rctStandard.top())
    
16.                         << QPointF(rctStandard.left() + 17 / 24. * rctStandard.width(), 3 / 4. * rctStandard.height() + rctStandard.top())
    
17.                         << QPointF(rctStandard.left() + 13 / 24. * rctStandard.width(), 3 / 4. * rctStandard.height() + rctStandard.top())
    
18.                         << QPointF(rctStandard.left() + 13 / 24. * rctStandard.width(), 1 / 2. * rctStandard.height() + rctStandard.top());
    
19.                 QPolygonF polygon(vPoints);
    
20.                 QBrush brsh(Qt::black, Qt::SolidPattern);
    
21.                 painter->setBrush(brsh);
    
22.                 QPen pn(Qt::NoPen);
    
23.                 painter->setPen(pn);
    
24.                 painter->drawPolygon(polygon);
    
25.                 vPoints.clear();
    
26.                 vPoints << QPointF(rctStandard.left() + 1 / 8.*rctStandard.width(), 5 / 8. * rctStandard.height() + rctStandard.top())
    
27.                         << QPointF(rctStandard.left() + 7 / 16. * rctStandard.width(), 5 / 8. * rctStandard.height() + rctStandard.top())
    
28.                         << QPointF(rctStandard.left() + 9 / 32. * rctStandard.width(), 13 / 16. * rctStandard.height() + rctStandard.top());
    
29.                 QPolygonF polygon1(vPoints);
    
30.                 painter->drawPolygon(polygon1);
    
31.         }   

复制代码

1. }

复制代码

    而为提供过滤功能，还需要像Excel一样在点击过滤指示符（小三角）时弹出过滤配置界面，这需要和QTableView的model结合起来共同实现。鉴于篇幅有限，过滤选择界面不在本节介绍。纸质教材或者视频教材会有配套的完整源代码可供参考。感兴趣的话可以关注。

结语

----------------------------------------------------------------------------------------------------------------------

       使用表格的过滤功能，可以为引用程序增加更多的功能和灵活性以及更好的交互手段，使数据的展示不再枯燥而是变得多样，也能为应用程序的展示加分。要知道，表格不仅能用在widget中，还能用在QGraphicsItem中哦，那样的话，可以把表格完美的嵌入我们的图形中进行展示，还可以支持交互，很不错的设计吧。

===========================================================

本教程的纸质书籍正在编写中，课程视频也在录制中，敬请关注。

===========================================================

baizy77

很抱歉，第一次提交的代码不全。