Using SortFilterModel to filter and sort our models, djangomodelfilter

Using SortFilterModel to filter and sort our models, djangomodelfilter

When we need to sort or filter the data in our Model, we need to use SortFilterModel. If you only want to filter our data, you can refer to the "Create an Ubuntu application from scratch-a small RSS reader" routine ". In my challenges, we can search for items in our XmlListModel to get a new ListModel. In this article, we will use SortFilterModel to filter and sort our Model, so as to display the data we need more accurately.

First, we create a relatively simple QML application and use the routines on our API page (some of which do not work). Here is a simple example:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItem/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "sortfiltermodel.liu-xiao-guo"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("sortfiltermodel")        ListModel {            id: movies            ListElement {                title: "Esign"                producer: "Chris Larkee"            }            ListElement {                title: "Elephants Dream"                producer: "Blender"            }            ListElement {                title: "Big Buck Bunny"                producer: "blender"            }        }        ListView {            model: movies            anchors.fill: parent            delegate: ListItem.Subtitled {                text: title                subText: producer            }            section.delegate: ListItem.Header { text: i18n.tr(section) }            section.property: "title"            section.criteria: ViewSection.FirstCharacter        }    }}

If SortFilterModel is not used, the following result is displayed:

If we add SortFilterModel:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItem/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "sortfiltermodel.liu-xiao-guo"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("sortfiltermodel")        ListModel {            id: movies            ListElement {                title: "Esign"                producer: "Chris Larkee"            }            ListElement {                title: "Elephants Dream"                producer: "Blender"            }            ListElement {                title: "Big Buck Bunny"                producer: "blender"            }        }        SortFilterModel {            id: sortedMovies            model: movies            sort.property: "title"            sort.order: Qt.DescendingOrder            filter.property: "producer"            filter.pattern: /blender/i        }        ListView {            model: sortedMovies            anchors.fill: parent            delegate: ListItem.Subtitled {                text: title                subText: producer            }            section.delegate: ListItem.Header { text: i18n.tr(section) }            section.property: "title"            section.criteria: ViewSection.FirstCharacter        }    }}

Note that the ListView model here is sortedMovies. SortedMovies data comes from movies. SortFilterModel sorts the data in movies in descending order of letters and matches the producer. If "blender" is included, it will be included in sortedMovies. The result is as follows:

It can be seen from the display that only blender items are displayed and arranged in reverse alphabetical order.

Source code for the entire project in: git clone https://gitcafe.com/ubuntu/sortfiltermodel.git