1

so in my project I'm using a tableview which has model: tableModel fopm Qt.labs.qmlmodels 1.0; so I want sort it using some methods , I find the class QAbsructProxyModel , I dont know if I used it well but I found problems on filtring and sorting here is below my code, thanks in advance` neeed help please

    import QtQuick 2.15
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.15
import QtQml.Models 2.15

import org.qtproject.example 1.0

ApplicationWindow {
    width: 1000
    height: 400
    visible: true

     header: ToolBar {
        TextField {
            id: searchBox


            placeholderText: "Search..."
            inputMethodHints: Qt.ImhNoPredictiveText

            //width: window.width / 5 * 2
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }



    TableView {
        id:tableView
        anchors.fill: parent
        //sortIndicatorVisible: true

        //anchors.topMargin: 30
        columnSpacing: 1
        rowSpacing: 3
        anchors.topMargin:30
        //boundsBehavior: Flickable.StopAtBounds



        model:SortFilterProxyModel {
            id: proxyModel
            source: sourceModel.rowCount> 0 ? sourceModel : null
            onSourceChanged: console.log(source+" source")

            sortOrder: Qt.AscendingOrder//tableView.sortIndicatorOrder

            sortCaseSensitivity: Qt.CaseInsensitive
            sortRole: sourceModel.rowCount > 0 ? " nomdetrame": ""
            onSortRoleChanged: console.log(" role")
            filterString: "*" + searchBox.text + "*"
            //onFilterStringChanged: console.log(filterString)
            filterSyntax: SortFilterProxyModel.Wildcard
            filterCaseSensitivity: Qt.CaseInsensitive
        }

            TableModel {
            id:sourceModel


            TableModelColumn{ display: " teta"}
            TableModelColumn { display: "visibilite" }
            TableModelColumn { display: "couleur" }
            TableModelColumn{ display: "chaine_can"}
            TableModelColumn{ display: "nomdetrame" }
            TableModelColumn{ display: "nondusignal"}
            TableModelColumn { display: "valeurDec" }
            TableModelColumn { display: "valeurHex" }
            TableModelColumn { display: "TxouRx" }


            // Each row is one type of fruit that can be ordered
            rows: [
                {
                    // Each property is one cell/column.
                    teta:"+",
                    visibilite: false,
                    couleur: "red",
                    chaine_can: "CAN 4",
                    nomdetrame: "rRX",
                    nondusignal: "1.50",
                    valeurDec: "CAN 4",
                    valeurHex: "rRX",
                    TxouRx: "Tx"
                },
                {   teta:"+",
                    visibilite: false,
                    couleur: "grey",
                    chaine_can: "CAN 1",
                    nomdetrame: "rRX",
                    nondusignal: "1.5",
                    valeurDec: "CAN 4",
                    valeurHex: "rRX",
                    TxouRx: "Rx"
                },
                {   teta:"+",
                    visibilite: true,
                    couleur: "black",
                    chaine_can: "CAN 2",
                    nomdetrame: "rRX",
                    nondusignal: "1",
                    valeurDec: "CAN 4",
                    valeurHex: "RXE",
                    TxouRx: "Tx"
                }
            ]



        }





        delegate:  DelegateChooser {

            DelegateChoice{
                column: 0
                //width: 100
            delegate:Button{
                    id:teta
                    text:"+"
                    //anchors.fill: parent
                    onClicked:{tableView.sourceModel.appendRow({
                                                   // Each property is one cell/column.
                                                   teta:"+",
                                                   visibilite: false,
                                                   couleur: "red",
                                                   chaine_can: "CAN 4",
                                                   nomdetrame: "rRX",
                                                   nondusignal: "1.50",
                                                   valeurDec: "CAN 4",
                                                   valeurHex: "rRX",
                                                   TxouRx: "Tx"
                                               }
                                               )}

                }
                //z: -1
            }

            DelegateChoice{
                column: 1
            delegate:Rectangle{
                border.color: "black"
                implicitWidth: 80
                CheckBox{
                //anchors.fill: parent
                    anchors.centerIn: parent
                checked: model.display


            }
        }
            }
            DelegateChoice{
                column: 2
            delegate:Rectangle {
                implicitWidth: 80
                //anchors.fill: parent
                 border.color: "black"
                color: model.display
                //z: -1
            }
        }
            DelegateChoice{
                column: 3
            delegate:Rectangle{
                border.color:"black"
                implicitWidth: 80

                Button{
                    anchors.fill: parent
                    onClicked: console.log(currentIndex)
//                    TextInput {
//                        //textRole: "display"
//                    anchors.fill: parent
//                    text:model.display
//                    //z: -1
//                }
                }


        }
            }
            DelegateChoice{
                column: 4
           delegate:Rectangle{
               border.color: "black"
               implicitWidth: 80
               TextInput {
                //anchors.fill: parent
                   anchors.centerIn: parent
                text:model.display
                //z: -1
            }
        }
            }
            DelegateChoice{
                column: 5
            delegate:Rectangle{
                border.color: "black"
                implicitWidth: 80
                TextInput {
                //anchors.fill: parent
                    anchors.centerIn: parent
                text:model.display
                //z: -1
            }
        }
            }
            DelegateChoice{
                column: 6
            delegate:Rectangle{
                implicitWidth: 80
                border.color: "black"
                TextInput {
//                anchors.fill: parent
                    anchors.centerIn: parent
                text:model.display
                //z: -1
            }
        }
            }
            DelegateChoice{
                column: 7
            delegate:Rectangle{
                implicitWidth: 80
                border.color: "black"

                TextInput {
                //anchors.fill: parent
                    anchors.centerIn: parent
                text:model.display
                //z: -1
            }
        }
            }
            DelegateChoice{
                column: 8
            delegate:Rectangle{
                implicitWidth: 80
                border.color: "black"
                TextInput {
                //anchors.fill: parent
                    anchors.centerIn: parent
                text:model.display

                //z: -1
            }
            }
        }


    }
        Component.onCompleted: {
            console.log(searchBox.text)
            //console.log(tableView.model.getRow(0).couleur)}

}
    }
    HorizontalHeaderView{
        id:headerView
        anchors.left: tableView.left
      syncView: tableView
      model:[" ","Visible","Couleur","Chaine_Can","NomTrame","NomSignal","ValeurDec","ValeurHex","TX/RX"]





        MouseArea{
            id:ms
            anchors.fill: parent
            hoverEnabled: true


        }

    }




}

c++ code:

include "sortfilterproxymodel.h"
#include <QtDebug>
#include <QtQml>

SortFilterProxyModel::SortFilterProxyModel(QObject *parent) : QSortFilterProxyModel(parent), m_complete(false)
{
    connect(this, &QSortFilterProxyModel::rowsInserted, this, &SortFilterProxyModel::countChanged);
    connect(this, &QSortFilterProxyModel::rowsRemoved, this, &SortFilterProxyModel::countChanged);
    qDebug()<<"je suis entré chez moi";
}

int SortFilterProxyModel::count() const
{
    return rowCount();
}

QObject *SortFilterProxyModel::source() const
{
    return sourceModel();
}

void SortFilterProxyModel::setSource(QObject *source)
{
    setSourceModel(qobject_cast<QAbstractItemModel *>(source));
    emit sourceChanged();
}

QByteArray SortFilterProxyModel::sortRole() const
{
    return m_sortRole;
}

void SortFilterProxyModel::setSortRole(const QByteArray &role)
{
    if (m_sortRole != role) {
        m_sortRole = role;
        if (m_complete)
            QSortFilterProxyModel::setSortRole(roleKey(role));
    }
}

void SortFilterProxyModel::setSortOrder(Qt::SortOrder order)
{
    QSortFilterProxyModel::sort(0, order);
}

QByteArray SortFilterProxyModel::filterRole() const
{
    return m_filterRole;
}

void SortFilterProxyModel::setFilterRole(const QByteArray &role)
{
    if (m_filterRole != role) {
        m_filterRole = role;
        if (m_complete)
            QSortFilterProxyModel::setFilterRole(roleKey(role));
    }
}

QString SortFilterProxyModel::filterString() const
{
    return filterRegExp().pattern();
}

void SortFilterProxyModel::setFilterString(const QString &filter)
{

    setFilterRegExp(QRegExp(filter, filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(filterSyntax())));
    emit filterStringChanged();
}


SortFilterProxyModel::FilterSyntax SortFilterProxyModel::filterSyntax() const
{
    return static_cast<FilterSyntax>(filterRegExp().patternSyntax());
}

void SortFilterProxyModel::setFilterSyntax(SortFilterProxyModel::FilterSyntax syntax)
{
    setFilterRegExp(QRegExp(filterString(), filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(syntax)));
}

QJSValue SortFilterProxyModel::get(int idx) const
{
    QJSEngine *engine = qmlEngine(this);
    QJSValue value = engine->newObject();
    if (idx >= 0 && idx < count()) {
        QHash<int, QByteArray> roles = roleNames();
        for (auto it = roles.cbegin(), end = roles.cend(); it != end; ++it)
            value.setProperty(QString::fromUtf8(it.value()), data(index(idx, 0), it.key()).toString());
    }
    return value;
}

void SortFilterProxyModel::classBegin()
{
}

void SortFilterProxyModel::componentComplete()
{
    m_complete = true;

    if (!m_sortRole.isEmpty())
        QSortFilterProxyModel::setSortRole(roleKey(m_sortRole));

    if (!m_filterRole.isEmpty())
        QSortFilterProxyModel::setFilterRole(roleKey(m_filterRole));

}

int SortFilterProxyModel::roleKey(const QByteArray &role) const
{
    return roleNames().key(role, -1);

}

QHash<int, QByteArray> SortFilterProxyModel::roleNames() const
{
    qDebug()<<"RoleNames";
    if (QAbstractItemModel *source = sourceModel()){
        qDebug()<<"RoleNames";
        //qDebug()<< source->roleNames();
                    //qDebug()<<roleNames().key(0)<< " keys";
        return source->roleNames();}
    return QHash<int, QByteArray>();
}

bool SortFilterProxyModel::filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const
{
    QRegExp rx = filterRegExp();
    if (rx.isEmpty())
        return true;
    QAbstractItemModel *model = sourceModel();
    if (filterRole().isEmpty()) {
        QHash<int, QByteArray> roles = roleNames();
        for (auto it = roles.cbegin(), end = roles.cend(); it != end; ++it) {
            QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
            QString key = model->data(sourceIndex, it.key()).toString();
            if (key.contains(rx))
                return true;
        }
        return false;
    }
    QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
    if (!sourceIndex.isValid())
        return true;
    QString key = model->data(sourceIndex, roleKey(filterRole())).toString();
    qDebug()<<rx;
    return key.contains(rx);
}
Abdelhamid Cheikh
  • 13
  • 4

2 Answers2

1

I could not able to run your code. Since I am using older version of Qt. So I make a simple working proto with reimplemented QSortFilterProxyModel class and used it in qml for filtering and sorting. My source model is a listview, in your case that's a table view. other things are the same.

The probable part of the code needs to check. 1. Reimplementation of filterAcceptsRow 2. Reimplementation of lessThan 3. Ensure making a call to invalidateFilter while changing the search text 4. Ensure making a call to default sort function while changing sortOrder

============ Sample code here ============

************** main.qml **************
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

import SortFilter 1.0

Window {
    id: rootId
    width: 320
    height: 568
    visible: true

    SortFilterProxy {
        id: sortFilterProxyModelId
        sourceModel: fruitModel
        sortRole: Qt.DisplayRole
        searchString: ""
        sortOrder: Qt.AscendingOrder
    }

    ListModel {
        id: fruitModel
        ListElement { name: "Apple" }
        ListElement { name: "Orange" }
        ListElement { name: "Banana" }
    }

    Column {
        anchors.fill: parent

        TextField {
            id: searchIpId
            height: 40
            width: parent.width
            focus: true
            placeholderText: "Enter search text"
            onTextChanged: sortFilterProxyModelId.searchString = text

            Button {
                id: sortButtonId
                height: parent.height - 10
                width: 60
                text: "sort"
                anchors.rightMargin: 10
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    // call proxy
                    if(sortFilterProxyModelId.sortOrder == Qt.AscendingOrder)
                        sortFilterProxyModelId.sortOrder = Qt.DescendingOrder
                    else
                        sortFilterProxyModelId.sortOrder = Qt.AscendingOrder
                    searchIpId.forceActiveFocus()
                }
            }
        }

        ListView {
            width: parent.width
            height: parent.height - searchIpId.height
            model: sortFilterProxyModelId // change to proxy output
            delegate: Rectangle {
                width: parent.width
                height: 40
                color: index % 2 == 0 ? "white" : "#C0C0C0"
                Label {
                    anchors.fill: parent
                    anchors.margins: 10
                    text: name
                }
            }
        }
    }
}


************** sortfilterproxymodel.h **************
#ifndef SORTPROXYMODEL_H
#define SORTPROXYMODEL_H

#include <QSortFilterProxyModel>

class SortFilterProxyModel : public QSortFilterProxyModel
{
    Q_OBJECT
    Q_PROPERTY(QString searchString READ searchString WRITE setSearchString NOTIFY searchStringChanged)
    Q_PROPERTY(Qt::SortOrder sortOrder READ sortOrder WRITE setSortOrder NOTIFY sortOrderChanged)
public:
    explicit SortFilterProxyModel(QObject* parent = nullptr);

    QString searchString() const
    {
        return _searchString;
    }
    Qt::SortOrder sortOrder() const
    {
        return _sortOrder;
    }
    void setSearchString(const QString &searchString);
    void setSortOrder(const Qt::SortOrder &sortOrder);

signals:
    void searchStringChanged(QString searchString);
    void sortOrderChanged(Qt::SortOrder sortOrder);

protected:
    bool lessThan(const QModelIndex &source_left, const QModelIndex &source_right) const;   // custom sort logic
    bool filterAcceptsRow(int sourceRow,const QModelIndex &sourceParent) const;             // custom filter logic

private:
    QString _searchString;
    Qt::SortOrder _sortOrder;
};

#endif // SORTPROXYMODEL_H


************** sortfilterproxymodel.cpp **************
 #include "sortfilterproxymodel.h"

SortFilterProxyModel::SortFilterProxyModel(QObject* parent) :
    QSortFilterProxyModel(parent)
{
    connect(this, &SortFilterProxyModel::searchStringChanged, this, &SortFilterProxyModel::invalidate); //
}

void SortFilterProxyModel::setSearchString(const QString &searchString)
{
    if (_searchString == searchString)
        return;

    _searchString = searchString;
    emit searchStringChanged(searchString); // connected with invalidateFilter, internally invalidateFilter makes call to filterAcceptsRow function
}

void SortFilterProxyModel::setSortOrder(const Qt::SortOrder &sortOrder)
{
    if(_sortOrder == sortOrder)
        return ;
    _sortOrder = sortOrder;
    sort(0, sortOrder);         // responsible call to make sorting, internally it will make a call to lessthan function
    emit sortOrderChanged(sortOrder);
}

bool SortFilterProxyModel::lessThan(const QModelIndex &source_left, const QModelIndex &source_right) const
{
    QVariant left = sourceModel()->data(source_left);
    QVariant right = sourceModel()->data(source_right);

    if(left.isValid() && right.isValid())
    {
        return left.toString() > right.toString();
    } else
    {
        return false;
    }
}

bool SortFilterProxyModel::filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const
{
    QModelIndex index = sourceModel()->index(sourceRow, 0, sourceParent);
    QString data = sourceModel()->data(index, Qt::DisplayRole).value<QString>();

    if(_searchString.isEmpty() || _searchString.isNull())
        return true;

    if(data.contains(_searchString, Qt::CaseInsensitive))
        return true;

    return false;
}
Ramkumar R
  • 497
  • 5
  • 11
0

I recently had great success with DelegateModel and sorting ListModels. Instead of TableView, I use ListView, but, I mock up my delegate to make it look like a TableView. Below has 5 cities and offers four permutations of sorting based on the user clicking on the column headers:

  • City ascending
  • City descending
  • Country ascending + City ascending
  • Country descending + City ascending
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15

Page {
    anchors.fill: parent
    header: Frame {
        RowLayout {
            width: parent.width
            Text {
                text: qsTr("#")
            }
            Text {
                Layout.fillWidth: true
                Layout.preferredWidth: 200
                text: sortDelegateModel.sortCompare === sortDelegateModel.orderByCityAsc && qsTr("City ^")
                || sortDelegateModel.sortCompare === sortDelegateModel.orderByCityDesc && qsTr("City v")
                || qsTr("City")
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (sortDelegateModel.sortCompare !== sortDelegateModel.orderByCityAsc)
                            sortDelegateModel.sortCompare = sortDelegateModel.orderByCityAsc;
                        else
                            sortDelegateModel.sortCompare = sortDelegateModel.orderByCityDesc;
                    }
                }
            }
            Text {
                Layout.fillWidth: true
                Layout.preferredWidth: 200
                text: sortDelegateModel.sortCompare === sortDelegateModel.orderByCountryAsc && qsTr("Country ^")
                || sortDelegateModel.sortCompare === sortDelegateModel.orderByCountryDesc && qsTr("Country v")
                || qsTr("Country")
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (sortDelegateModel.sortCompare !== sortDelegateModel.orderByCountryAsc)
                            sortDelegateModel.sortCompare = sortDelegateModel.orderByCountryAsc;
                        else
                            sortDelegateModel.sortCompare = sortDelegateModel.orderByCountryDesc;
                    }
                }
            }
        }
    }
    ListView {
        anchors.fill: parent
        model: DelegateModel {
            id: sortDelegateModel
            model: cities
            property var orderByCountryAsc: (a, b) => a.country.localeCompare(b.country) || a.city.localeCompare(b.city)
            property var orderByCountryDesc: (a, b) => -a.country.localeCompare(b.country) || a.city.localeCompare(b.city)
            property var orderByCityAsc: (a, b) => a.city.localeCompare(b.city)
            property var orderByCityDesc: (a, b) => -a.city.localeCompare(b.city)
            property var sortCompare: orderByCountryAsc
            onSortCompareChanged: Qt.callLater(sort)
            property int sortIndex: 0
            groups: [
                DelegateModelGroup {
                    id: visibleItems
                    name: "visible"
                    includeByDefault: true
                    onCountChanged: {
                        if (!visibleItems.count) Qt.callLater(sortDelegateModel.sort, 0);
                        if (visibleItems.count) Qt.callLater(sortDelegateModel.sort, sortDelegateModel.sortIndex);
                    }
                }]
            filterOnGroup: "visible"
            delegate: Frame {
                id: frame
                width: ListView.view.width
                background: Rectangle {
                    color: (frame.DelegateModel.visibleIndex & 1) ? "#f0f0f0" : "#e0e0e0"
                    border.color: "#c0c0c0"
                }
                RowLayout {
                    width: parent.width
                    Text {
                        text: (frame.DelegateModel.visibleIndex + 1)
                    }
                    Text {
                        Layout.fillWidth: true
                        Layout.preferredWidth: 200
                        text: city
                    }
                    Text {
                        Layout.fillWidth: true
                        Layout.preferredWidth: 200
                        text: country
                    }
                }
            }
            function getVisibleItem(index) {
                return visibleItems.get(index).model;
            }
            function findInsertIndex(item, head, tail) {
                if (head >= count) return head;
                let cmp = sortCompare(item, getVisibleItem(head));
                if (cmp <= 0) return head;
                cmp = sortCompare(item, getVisibleItem(tail));
                if (cmp === 0) return tail;
                if (cmp > 0) return tail + 1;
                while (head + 1 < tail) {
                    let mid = (head + tail) >> 1;
                    cmp = sortCompare(item, getVisibleItem(mid));
                    if (cmp === 0) return mid;
                    if (cmp > 0) head = mid; else tail = mid;
                }
                return tail;
            }
            function sort(startIndex) {
                startIndex = startIndex ?? 0;
                if (startIndex < 0) return;
                if (startIndex >= visibleItems.count) {
                    sortIndex = visibleItems.count;
                    return;
                }
                sortIndex = startIndex;
                for (let ts = Date.now(); sortIndex < visibleItems.count && Date.now() < ts + 50; sortIndex++) {
                    if (!sortIndex) continue;
                    let newIndex = findInsertIndex(getVisibleItem(sortIndex), 0, sortIndex - 1);
                    if (newIndex === sortIndex) continue;
                    visibleItems.move(sortIndex, newIndex, 1);
                }
                if (sortIndex < visibleItems.count) Qt.callLater(sort, sortIndex);
            }
            Component.onCompleted: Qt.callLater(sort)
        }
    }

    ListModel {
        id: cities
        ListElement {
            country: "USA"; city:"California"
        }
        ListElement {
            country: "USA"; city:"New York"
        }
        ListElement {
            country: "AUS"; city:"Victoria"
        }
        ListElement {
            country: "AUS"; city:"New South Wales"
        }
        ListElement {
            country: "AUS"; city:"ACT"
        }
    }
}

You can try it online!

I have the above refactored as a SortDelegateModel which is a wrapper on DelegateModel here:

Stephen Quan
  • 21,481
  • 4
  • 88
  • 75