SortFilterProxyModel

Allows to apply filter and sorting settings to QML ListModel items. More...

Import Statement: import VPlayApps 1.0
Since: V-Play 2.18.1

Properties

Methods

Detailed Description

SortFilterProxyModel is an implementation of QSortFilterProxyModel conveniently exposed for QML. You can use it to apply filter and sorting settings to your QML ListModel items.

The following relevant types are available:

Types

Filter

AllOf

Filter container accepting rows accepted by all its child filters

AnyOf

Filter container accepting rows accepted by at least one of its child filters

ExpressionFilter

Filters row with a custom filtering

Filter

Base type for the SortFilterProxyModel filters

IndexFilter

Filters rows based on their source index

RangeFilter

Filters rows between boundary values

RegExpFilter

Filters rows matching a regular expression

RoleFilter

Base type for filters based on a source model role

ValueFilter

Filters rows matching exactly a value

ProxyRole

ExpressionRole

A custom role computed from a javascript expression

JoinRole

Role made from concatenating other roles

ProxyRole

Base type for the SortFilterProxyModel proxy roles

SwitchRole

Role using Filter to conditionnaly compute its data

Sorter

ExpressionSorter

Sorts row with a custom sorting

RoleSorter

Sorts rows based on a source model role

Sorter

Base type for the SortFilterProxyModel sorters

StringSorter

Sorts rows based on a source model string role

For detailed information on the SortFilterProxyModel, please see the project on GitHub.

Example Usage

Simple Example

The folowing example shows the configured entries of the ListModel in a ListPage, and allows to sort the list using the name property:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
     ListElement {
       name: "Orange"
       cost: 3.25
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: fruitModel

     // configure sorters
     sorters: [
       StringSorter {
         id: nameSorter
         roleName: "name"
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppCheckBox {
         text: "Sort by name"
         checked: nameSorter.enabled
         updateChecked: false
         onClicked: nameSorter.enabled = !nameSorter.enabled
         anchors.horizontalCenter: parent.horizontalCenter
         height: dp(48)
       }
     } // ListPage
   } // NavigationStack
 } // App

Advanced Example

This example loads JSON data from a REST API, wraps it in a QML ListModel and uses SortFilterProxyModel to apply filter and sorting settings:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   // full data model, will be filled with data loaded from REST API in loadTodos()
   ListModel {
     id: todoModel
     Component.onCompleted: loadTodos()

     // load data via http request
     function loadTodos() {
       HttpRequest.get("https://jsonplaceholder.typicode.com/todos")
       .then(function(res){
         // map JSON to QML ListModel
         res.body.forEach(function(todo) {
           todoModel.append(todo)
         })
       })
     }
   }

   // filter settings are grouped in this item
   Item {
     id: filterSettings
     property bool sortByTitleActive: false
     property bool completedFilterActive: false
     property int userIdFilterValue: -1
   }

   // filtered model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: todoModel
     // configure filters
     filters: [
       ValueFilter {
         roleName: "completed"
         value: true
         enabled: filterSettings.completedFilterActive
       },
       ValueFilter {
         roleName: "userId"
         value: filterSettings.userIdFilterValue
         enabled: filterSettings.userIdFilterValue > 0
       }]
     // configure sorters
     sorters: [
       StringSorter {
         roleName: "title"
         enabled: filterSettings.sortByTitleActive
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: title
         detailText: "user: "+userId+", completed: "+completed+", id: "+id
         style.showDisclosure: false
       }

       // add UI for filter options as list header
       listView.header: Column {
         x: spacing
         width: parent.width - 2 * spacing
         spacing: dp(5)

         // top spacer
         Item { width: parent.width; height: px(1) }

         // completed filter
         AppCheckBox {
           text: "Completed only"
           checked: filterSettings.completedFilterActive
           updateChecked: false
           onClicked: filterSettings.completedFilterActive = !filterSettings.completedFilterActive
         }

         // user id filter
         Row {
           spacing: parent.spacing
           AppText {
             text: "User ID"
             anchors.verticalCenter: parent.verticalCenter
           }
           AppTextField {
             id: userFilterText
             anchors.verticalCenter: parent.verticalCenter
             inputMethodHints: Qt.ImhFormattedNumbersOnly
             onAccepted: {
               if(text === "")
                 filterSettings.userIdFilterValue = -1
               else {
                 userFilterText.text = parseInt(userFilterText.text)
                 filterSettings.userIdFilterValue = userFilterText.text
               }
               listPage.forceActiveFocus()
             }
           }
         }

         // sort by title
         AppCheckBox {
           text: "Sort by title"
           checked: filterSettings.sortByTitleActive
           updateChecked: false
           onClicked: filterSettings.sortByTitleActive = !filterSettings.sortByTitleActive
         }

         // bottom spacer
         Item { width: parent.width; height: px(1) }
       }
     } // ListPage
   } // NavigationStack
 } // App

Property Documentation

count : int

The number of rows in the proxy model (not filtered out the source model)


filters : list<Filter>

This property holds the list of filters for this proxy model. To be included in the model, a row of the source model has to be accepted by all the top level filters of this list.

See also Filter.


proxyRoles : list<ProxyRole>

This property holds the list of proxy roles for this proxy model. Each proxy role adds a new custom role to the model.

See also ProxyRole.


sortRoleName : string

The role name of the source model's data used for the sorting.

See also sortRole and roleForName.


sorters : list<Sorter>

This property holds the list of sorters for this proxy model. The rows of the source model are sorted by the sorters of this list, in their order of insertion.

See also Sorter.


sourceModel : QAbstractItemModel*

The source model of this proxy model


Method Documentation

variant get(int row, string roleName)

Return the data for the given roleNamte of the item at row in the proxy model. This allows the role data to be read (not modified) from JavaScript. This equivalent to calling data(index(row, 0), roleForName(roleName)).


object get(int row)

Return the item at row in the proxy model as a map of all its roles. This allows the item data to be read (not modified) from JavaScript.


int mapFromSource(int sourceRow)

Returns the row in the SortFilterProxyModel given the sourceRow from the source model. Returns -1 if there is no corresponding row.


QModelIndex mapFromSource(QModelIndex sourceIndex)

Returns the model index in the SortFilterProxyModel given the sourceIndex from the source model.


int mapToSource(int proxyRow)

Returns the source model row corresponding to the given proxyRow from the SortFilterProxyModel. Returns -1 if there is no corresponding row.


index mapToSource(index proxyIndex)

Returns the source model index corresponding to the given proxyIndex from the SortFilterProxyModel.


int roleForName(string roleName)

Returns the role number for the given roleName. If no role is found for this roleName, -1 is returned.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support