Populate Listview from Database



  • I want to populate listview ( a specific page in my app ) from a database .

    Currently the page is static and look like this

    image: https://s32.postimg.org/vrsdrl2p1/man.png

    code

    import QtQuick 2.6
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 2.0
    
    
    Pane {
        padding: 0
    
        property var delegateComponentMap: {
            "page": itemDelegateComponent
    
        }
    
        Component {
            id: itemDelegateComponent
    
            ItemDelegate {
                text: labelText
                width: parent.width
            }
        }
    
    
    
    
    
    
        ColumnLayout {
            id: column
            spacing: 40
            anchors.fill: parent
            anchors.topMargin: 20
    
            Label {
                id: label1
                Layout.fillWidth: true
                wrapMode: Label.Wrap
                horizontalAlignment: Qt.AlignHCenter
                text: "Offline Pages "
            }
    
            ListView {
                id: listView
    
                Layout.fillWidth: true
                Layout.fillHeight: true
                clip: true
                model: ListModel {
                    ListElement { type: "ItemDelegate"; labelText: "page1" }
                    ListElement { type: "ItemDelegate"; labelText: "page2" }
                    ListElement { type: "ItemDelegate"; labelText: "page3" }
    
    
                }
                spacing: 5
    
                section.property: "type"
    
                delegate: Component{
    
                    Item{
                        id: aItem
                        width: listView.width //rowLayout.width. We got width from children elements before, now get width from listView
                        height: 30
    
                        RowLayout{
    
                            id: rowLayout
                            anchors.fill: parent
                            spacing: 10
    
                            Label{
                                id:page_name
                                padding: 10
                                text: labelText
                                Layout.fillWidth: true // !!! to fill most part of row width
    
                            }
    
    
                                Button{
    
                                    text: qsTr("Delete")
    
                                    id: delete_button
    
                                }
                                Button{
    
                                    text: qsTr("Update")
                                    id: update_button
                                }
    
    
    
                        }
                    }
                }
            }
    
    
    
    
    
    
    
    
    
            RowLayout{
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    
                Button{
                    text:"Update All"
    
    
                }
                Button{
                    text:"Delete All"
                }
            }
        }
    }
    

    my databse only has 2 entries ( looks like this )

    db : https://s32.postimg.org/jb4nhmoxh/image.png

    how should i approach this task ?



  • I think you might be looking for QSqlTableModel, I'm not sure though how to use it with a ListView.



  • Well, you need to connect to DB and execute SQL query in C++ code and pass the data to QML where you can display it. It's not like you can query DB right from QML.
    This might help you.



  • thanks @veryqtperson . I will try to implement it



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.