TableModel QML Type

Kapselt ein einfaches Tabellenmodell. Mehr...

Import Statement: import Qt.labs.qmlmodels

Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

columnCount : int
rowCount : int
rows : var

Methoden

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

Ausführliche 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 eine Liste einfacher Schlüssel-Wert-Paare 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 nicht geordnet 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 wird die Manipulation der Daten nicht unterstützt.

Nehmen Sie zum Beispiel an, dass Sie eine Datenquelle verwenden möchten, bei der jede Zeile ein Array und jede Zelle ein Objekt ist. Um diese Datenquelle mit TableModel zu verwenden, definieren Sie einen Getter:

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

    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 restlichen Spalten können einfach einen TextField verwenden, und so wird dieser Delegat zuletzt als Fallback deklariert.

Verwendung des TableModel mit externen JSON-Quellen

Wenn die Struktur der Daten in einem JSON-Objekt mit der durch das TableModel definierten Struktur übereinstimmt, können sie direkt dem Model zugewiesen werden, indem die rows Eigenschaft verwendet wird. Alle Zeilen in den Daten müssen mit den durch das Model definierten Spalten übereinstimmen.

Zum Beispiel, wenn das Modell definiert ist als:

            model: TableModel {
                TableModelColumn { display: "driverId" }
                TableModelColumn { display: "code" }
                TableModelColumn { display: "url" }
                TableModelColumn { display: "givenName" }
                TableModelColumn { display: "familyName" }
                TableModelColumn { display: "dateOfBirth" }
                TableModelColumn { display: "nationality" }
            }

Die Quelle hat die erforderlichen Daten, aber nicht notwendigerweise in der erforderlichen Struktur, Sie können sie herunterladen und in ein Formular parsen, das der Struktur entspricht, die das Modell definiert, und das Ergebnis direkt zuweisen.

    function requestJson() {
        let doc = new XMLHttpRequest()
        doc.onreadystatechange = function() {
            if (doc.readyState === XMLHttpRequest.DONE) {
                var root = JSON.parse(doc.responseText)
                var race = root.MRData.RaceTable.Races[0]
                var raceResults = race.Results
                var drivers = []
                for (let i = 0; i < raceResults.length; ++i) {
                    drivers.push(raceResults[i].Driver)
                }
                tableView.model.rows = drivers
                print(JSON.stringify(drivers))
            }
        }

        doc.open("GET", "https://api.jolpi.ca/ergast/f1/2005/1/results.json")
        doc.send()
    }

und das Ergebnis kann direkt zugewiesen werden

    Component.onCompleted: requestJson()

Sie können das JSON-Objekt auch bereitstellen, indem Sie eine JavaScript-Datei als Modul importieren. In der Dokumentation zu TreeModel finden Sie ein Beispiel für diese Vorgehensweise.

Achtung! Stellen Sie sicher, dass die JSON-Daten aus einer vertrauenswürdigen Quelle stammen. Da das Modell seine Zeilen auf der Grundlage der Eingabe dynamisch auffüllt, kann fehlerhaftes oder nicht vertrauenswürdiges JSON zu unerwartetem Verhalten oder Leistungsproblemen führen.

Siehe auch TableModelColumn, TableView, und QAbstractTableModel.

Dokumentation der Eigenschaft

columnCount : int `[read-only]`

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

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

rowCount : int `[read-only]`

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

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

rows : var

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.

Dokumentation der Methode

void appendRow(var 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().

void clear()

Entfernt alle Zeilen aus dem Modell.

Siehe auch removeRow().

variant data(QModelIndex index, string role)

Liefert die Daten aus der Tabellenzelle an der angegebenen index, die zur angegebenen role gehört.

Siehe auch index() und setData().

var 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().

void insertRow(int rowIndex, var row)

Fügt dem Modell 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 auf ein bestehendes Element in der Tabelle oder auf ein Element hinter dem Ende der Tabelle verweisen (entspricht appendRow()).

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

void moveRow(int fromRowIndex, int toRowIndex, int rows)

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.

void 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, variant value, string role)

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 erfolgreich, false wenn nicht.

Siehe auch data() und index().

void setRow(int rowIndex, var row)

Ersetzt die Zeile rowIndex im Modell durch 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.

© 2026 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.

TableModel QML Type

Eigenschaften

Methoden

Ausführliche Beschreibung

Unterstützte Zeilendaten-Strukturen

Verwendung von DelegateChooser mit TableModel

Verwendung des TableModel mit externen JSON-Quellen

Dokumentation der Eigenschaft

columnCount : int [read-only]

rowCount : int [read-only]

rows : var

Dokumentation der Methode

void appendRow(var row)

void clear()

variant data(QModelIndex index, string role)

var getRow(int rowIndex)

QModelIndex index(int row, int column)

void insertRow(int rowIndex, var row)

void moveRow(int fromRowIndex, int toRowIndex, int rows)

void removeRow(int rowIndex, int rows = 1)

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

void setRow(int rowIndex, var row)

columnCount : int `[read-only]`

rowCount : int `[read-only]`