alphanumeric
alphanumeric

Reputation: 19379

How to alternate background color of a table view using QSS?

The example-code below creates a single QTableView.

enter image description here

Question: How to modify this code to make odd-numbered Items background color grey and even-numbered items black. Should CSS's alternate-background-color be used? With that flags?

import sys, os
from PyQt4 import QtCore, QtGui
app=QtGui.QApplication(sys.argv)

class TableModel(QtCore.QAbstractTableModel):
    def __init__(self):
        QtCore.QAbstractTableModel.__init__(self)        
        self.items=['One','Two','Three','Four','Five','Six','Seven']

    def rowCount(self, parent=QtCore.QModelIndex()):   
        return len(self.items)
    def columnCount(self, index=QtCore.QModelIndex()):
        return 1

    def data(self, index, role):
        if not index.isValid() or not (0<=index.row()<len(self.items)):
            return QtCore.QVariant()

        item=str(self.items[index.row()])

        if role==QtCore.Qt.UserRole:
            return item
        if role==QtCore.Qt.DisplayRole:
            return item
        if role==QtCore.Qt.TextColorRole:
            return QtCore.QVariant(QtGui.QColor(QtCore.Qt.white))

    def headerData(self, column, orientation, role=QtCore.Qt.DisplayRole):
        if role!=QtCore.Qt.DisplayRole:   return QtCore.QVariant()
        if orientation==QtCore.Qt.Horizontal: return QtCore.QVariant('My Column Name') 

class TableView(QtGui.QTableView):
    def __init__(self, parent=None):
        super(TableView, self).__init__(parent)
        self.horizontalHeader().setResizeMode(QtGui.QHeaderView.Stretch)
        self.horizontalHeader().setDefaultAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)        

        myModel=TableModel()
        self.setModel(myModel)      

        appStyle="""
        QTableView
        {   
            background-color: black;
            gridline-color:black;
            color: black;
            selection-color: black;
        }
        QTableView::item 
        {   
            color: white;
            background:black;            
        }
        QTableView::item:hover
        {   
            color: black;
            background:#ffaa00;            
        }
        QTableView::item:focus
        {   
            color: black;
            background:#0063cd;            
        }        
        """
        self.setStyleSheet(appStyle)

view=TableView()
view.show()   
sys.exit(app.exec_())

Upvotes: 1

Views: 3525

Answers (1)

alphanumeric
alphanumeric

Reputation: 19379

Here is how to control Item's background color using a model. CSS is used later for everything else:

import sys, os
from PyQt4 import QtCore, QtGui
app=QtGui.QApplication(sys.argv)

class TableModel(QtCore.QAbstractTableModel):
    def __init__(self):
        QtCore.QAbstractTableModel.__init__(self)        
        self.items=['One','Two','Three','Four','Five','Six','Seven']

    def rowCount(self, parent=QtCore.QModelIndex()):   
        return len(self.items)
    def columnCount(self, index=QtCore.QModelIndex()):
        return 1

    def data(self, index, role):
        if not index.isValid() or not (0<=index.row()<len(self.items)):
            return QtCore.QVariant()

        item=str(self.items[index.row()])

        if role==QtCore.Qt.UserRole:
            return item
        if role==QtCore.Qt.DisplayRole:
            return item
        if role==QtCore.Qt.TextColorRole:
            return QtCore.QVariant(QtGui.QColor(QtCore.Qt.white))
        if role == QtCore.Qt.BackgroundRole:
            if index.row()%2:
                return QtCore.QVariant(QtGui.QColor("#242424"))
            else:
                return QtCore.QVariant(QtGui.QColor(QtCore.Qt.black))

    def headerData(self, column, orientation, role=QtCore.Qt.DisplayRole):
        if role!=QtCore.Qt.DisplayRole:   return QtCore.QVariant()
        if orientation==QtCore.Qt.Horizontal: return QtCore.QVariant('My Column Name') 

class TableView(QtGui.QTableView):
    def __init__(self, parent=None):
        super(TableView, self).__init__(parent)
        self.horizontalHeader().setResizeMode(QtGui.QHeaderView.Stretch)
        self.horizontalHeader().setDefaultAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)        

        myModel=TableModel()
        self.setModel(myModel)      

        appStyle="""
        QTableView
        {   
            background-color: black;
            gridline-color:grey;
            color: black;
        }
        QTableView::item 
        {   
            color: white;         
        }
        QTableView::item:hover
        {   
            color: black;
            background: #ffaa00;            
        }
        QTableView::item:focus
        {   
            color: black;
            background: #0063cd;            
        }        
        """
        self.setStyleSheet(appStyle)

view=TableView()
view.show()   
sys.exit(app.exec_())

Upvotes: 2

Related Questions