Back to Qt.io
Contact Us Blog Download Qt

TableModel QML Type

Kapselt ein einfaches Tabellenmodell. Mehr...

Import Statement: import Qt.labs.qmlmodels

Eigenschaften

Methoden

  • appendRow(object row)
  • clear()
  • variant data(QModelIndex index, string role)
  • object getRow(int rowIndex)
  • QModelIndex index(int row, int column)
  • insertRow(int rowIndex, object row)
  • moveRow(int fromRowIndex, int toRowIndex, int rows)
  • removeRow(int rowIndex, int rows)
  • bool setData(QModelIndex index, string role, variant value)
  • setRow(int rowIndex, object row)

Detaillierte Beschreibung

Der TableModel-Typ speichert JavaScript/JSON-Objekte als Daten für ein Tabellenmodell, das mit TableView verwendet werden kann. Er soll sehr einfache Modelle unterstützen, ohne dass eine eigene QAbstractTableModel -Unterklasse in C++ erstellt werden muss.

import QtQuick
import QtQuick.Window
import Qt.labs.qmlmodels

Window {
    width: 400
    height: 400
    visible: true

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model: TableModel {
            TableModelColumn { display: "checked" }
            TableModelColumn { display: "amount" }
            TableModelColumn { display: "fruitType" }
            TableModelColumn { display: "fruitName" }
            TableModelColumn { display: "fruitPrice" }

            // Each row is one type of fruit that can be ordered
            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate:  TextInput {
            text: model.display
            padding: 12
            selectByMouse: true

            onAccepted: model.display = text

            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }
    }
}

Die anfänglichen Zeilendaten des Modells werden entweder mit der Eigenschaft rows oder durch den Aufruf von appendRow() festgelegt. Jede Spalte im Modell wird durch Deklaration einer TableModelColumn Instanz spezifiziert, wobei die Reihenfolge jeder Instanz ihren Spaltenindex bestimmt. Sobald das Signal Component::completed() des Modells ausgegeben wurde, sind die Spalten und Rollen festgelegt und gelten für die gesamte Lebensdauer des Modells.

Um auf eine bestimmte Zeile zuzugreifen, kann die Funktion getRow() verwendet werden. Es ist auch möglich, über die Eigenschaft rows direkt auf die JavaScript-Daten des Modells zuzugreifen, aber es ist nicht möglich, die Modelldaten auf diese Weise zu ändern.

Um neue Zeilen hinzuzufügen, verwenden Sie appendRow() und insertRow(). Um bestehende Zeilen zu ändern, verwenden Sie setRow(), moveRow(), removeRow() und clear().

Es ist auch möglich, die Daten des Modells über den Delegaten zu ändern, wie im obigen Beispiel gezeigt:

        delegate:  TextInput {
            text: model.display
            padding: 12
            selectByMouse: true

            onAccepted: model.display = text

            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }

Wenn der Typ der Daten an der geänderten Rolle nicht mit dem Typ der eingestellten Daten übereinstimmt, werden sie automatisch über QVariant konvertiert.

Unterstützte Zeilendaten-Strukturen

TableModel ist für die Arbeit mit JavaScript/JSON-Daten konzipiert, bei denen jede Zeile ein einfaches Schlüsselpaar-Objekt ist:

{
    // Each property is one cell/column.
    checked: false,
    amount: 1,
    fruitType: "Apple",
    fruitName: "Granny Smith",
    fruitPrice: 1.50
},
// ...

Da die Modellmanipulation in Qt über Zeilen- und Spaltenindizes erfolgt und die Objektschlüssel ungeordnet sind, muss jede Spalte über TableModelColumn angegeben werden. Dies ermöglicht es, die in Qt eingebauten Rollen auf jede Eigenschaft in jedem Zeilenobjekt abzubilden.

Komplexe Zeilenstrukturen werden unterstützt, allerdings mit eingeschränkter Funktionalität. Da TableModel nicht weiß, wie jede Zeile strukturiert ist, kann es sie nicht manipulieren. Dies hat zur Folge, dass die Kopie der Modelldaten, die TableModel in rows gespeichert hat, nicht mit den Quelldaten, die in QML festgelegt wurden, synchronisiert wird. Aus diesen Gründen verlässt sich TableModel auf den Benutzer, um einfache Datenmanipulationen durchzuführen.

Nehmen wir zum Beispiel an, dass Sie mehrere Rollen pro Spalte haben möchten. Eine Möglichkeit, dies zu tun, ist eine Datenquelle zu verwenden, bei der jede Zeile ein Array und jede Zelle ein Objekt ist. Um diese Datenquelle mit TableModel zu verwenden, definieren Sie einen Getter und Setter:

TableModel {
    TableModelColumn {
        display: function(modelIndex) { return rows[modelIndex.row][0].checked }
        setDisplay: function(modelIndex, cellData) {
                rows[modelIndex.row][0].checked = cellData
            }
    }
    // ...

    rows: [
        [
            { checked: false, checkable: true },
            { amount: 1 },
            { fruitType: "Apple" },
            { fruitName: "Granny Smith" },
            { fruitPrice: 1.50 }
        ]
        // ...
    ]
}

Die obige Zeile ist ein Beispiel für eine komplexe Zeile.

Hinweis: Zeilenmanipulationsfunktionen wie appendRow(), removeRow() usw. werden bei der Verwendung von komplexen Zeilen nicht unterstützt.

Verwendung von DelegateChooser mit TableModel

Für die meisten realen Anwendungsfälle wird empfohlen, DelegateChooser als Delegaten eines TableView zu verwenden, der TableModel verwendet. Dies ermöglicht es Ihnen, spezifische Rollen in den relevanten Delegaten zu verwenden. Zum Beispiel kann das obige Snippet umgeschrieben werden, um DelegateChooser wie folgt zu verwenden:

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model: TableModel {
            TableModelColumn { display: "checked" }
            TableModelColumn { display: "amount" }
            TableModelColumn { display: "fruitType" }
            TableModelColumn { display: "fruitName" }
            TableModelColumn { display: "fruitPrice" }

            // Each row is one type of fruit that can be ordered
            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate: DelegateChooser {
            DelegateChoice {
                column: 0
                delegate: CheckBox {
                    checked: model.display
                    onToggled: model.display = checked
                }
            }
            DelegateChoice {
                column: 1
                delegate: SpinBox {
                    value: model.display
                    onValueModified: model.display = value
                }
            }
            DelegateChoice {
                delegate: TextField {
                    text: model.display
                    selectByMouse: true
                    implicitWidth: 140
                    onAccepted: model.display = text
                }
            }
        }
    }
}

Die spezifischsten Delegaten werden zuerst deklariert: Die Spalten im Index 0 und 1 haben die Datentypen bool und integer, also verwenden sie CheckBox bzw. SpinBox. Die verbleibenden Spalten können einfach TextField verwenden, so dass dieser Delegat zuletzt als Fallback deklariert wird.

Siehe auch TableModelColumn, TableView, und QAbstractTableModel.

Eigenschaft Dokumentation

columnCount : int [read-only]

Diese schreibgeschützte Eigenschaft enthält die Anzahl der Spalten im Modell.

Die Anzahl der Spalten ist für die Lebensdauer des Modells festgelegt, nachdem die Eigenschaft rows gesetzt oder appendRow() zum ersten Mal aufgerufen wurde.


rowCount : int [read-only]

Diese schreibgeschützte Eigenschaft enthält die Anzahl der Zeilen des Modells.

Dieser Wert ändert sich, wenn Zeilen zum Modell hinzugefügt oder aus ihm entfernt werden.


rows : object

Diese Eigenschaft enthält die Modelldaten in Form eines Arrays von Zeilen:

            rows: [
                {
                    // Each property is one cell/column.
                    checked: false,
                    amount: 1,
                    fruitType: "Apple",
                    fruitName: "Granny Smith",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "Orange",
                    fruitName: "Navel",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "Banana",
                    fruitName: "Cavendish",
                    fruitPrice: 3.50
                }
            ]

Siehe auch getRow(), setRow(), moveRow(), appendRow(), insertRow(), clear(), rowCount, und columnCount.


Methode Dokumentation

appendRow(object row)

Fügt eine neue Zeile am Ende des Modells ein, mit den Werten (Zellen) in row.

model.appendRow({
    checkable: true,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

Siehe auch insertRow(), setRow(), und removeRow().


clear()

Entfernt alle Zeilen aus dem Modell.

Siehe auch removeRow().


variant data(QModelIndex index, string role)

Gibt die Daten aus der Tabellenzelle an der angegebenen index zurück, die zu der angegebenen role gehört.

Siehe auch setData() und index().


object getRow(int rowIndex)

Gibt die Zeile unter rowIndex im Modell zurück.

Beachten Sie, dass dies dem direkten Zugriff auf die Zeile über die Eigenschaft rows entspricht:

Component.onCompleted: {
    // These two lines are equivalent.
    console.log(model.getRow(0).display);
    console.log(model.rows[0].fruitName);
}

Hinweis: Das zurückgegebene Objekt kann nicht verwendet werden, um den Inhalt des Modells zu ändern; verwenden Sie stattdessen setRow().

Siehe auch setRow(), appendRow(), insertRow(), removeRow(), und moveRow().


QModelIndex index(int row, int column)

Gibt ein QModelIndex Objekt zurück, das auf die angegebenen row und column verweist. Dieses Objekt kann an die Funktion data() übergeben werden, um die Daten aus dieser Zelle zu erhalten, oder an setData(), um den Inhalt dieser Zelle zu bearbeiten.

import QtQml 2.14
import Qt.labs.qmlmodels 1.0

TableModel {
    id: model

    TableModelColumn { display: "fruitType" }
    TableModelColumn { display: "fruitPrice" }

    rows: [
        { fruitType: "Apple", fruitPrice: 1.50 },
        { fruitType: "Orange", fruitPrice: 2.50 }
    ]

    Component.onCompleted: {
        for (var r = 0; r < model.rowCount; ++r) {
            console.log("An " + model.data(model.index(r, 0)).display +
                        " costs " + model.data(model.index(r, 1)).display.toFixed(2))
        }
    }
}

Siehe auch QModelIndex und verwandte Klassen in QML und data().


insertRow(int rowIndex, object row)

Fügt dem Listenmodell eine neue Zeile an der Position rowIndex hinzu, mit den Werten (Zellen) in row.

model.insertRow(2, {
    checkable: true, checked: false,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

rowIndex muss sich auf ein bestehendes Element in der Liste beziehen oder auf ein Element hinter dem Ende der Liste (entspricht appendRow()).

Siehe auch appendRow(), setRow(), removeRow(), und rowCount.


moveRow(int fromRowIndex, int toRowIndex, int Zeilen)

Verschiebt rows vom Index auf fromRowIndex zum Index auf toRowIndex.

Die Bereiche "von" und "bis" müssen vorhanden sein, z. B. um die ersten 3 Einträge an das Ende der Liste zu verschieben:

model.moveRow(0, model.rowCount - 3, 3)

Siehe auch appendRow(), insertRow(), removeRow(), und rowCount.


removeRow(int rowIndex, int rows = 1)

Entfernt eine Reihe von rows unter rowIndex aus dem Modell.

Siehe auch clear() und rowCount.


bool setData(QModelIndex index, string role, variant value)

Fügt das durch role benannte Datenfeld in die Tabellenzelle an der angegebenen index mit value ein oder aktualisiert es. Gibt true zurück, wenn dies erfolgreich war, false wenn nicht.

Siehe auch data() und index().


setRow(int rowIndex, object row)

Ändert die Zeile unter rowIndex im Modell mit row.

Alle Spalten/Zellen müssen in row vorhanden sein, und zwar in der richtigen Reihenfolge.

model.setRow(0, {
    checkable: true,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

Wenn rowIndex gleich rowCount() ist, wird eine neue Zeile an das Modell angehängt. Andernfalls muss rowIndex auf eine bestehende Zeile im Modell verweisen.

Siehe auch appendRow(), insertRow(), und rowCount.


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.