Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

TableModel QML Type

Kapseln ein einfaches Tabellenmodell. Mehr...

Import Statement: import Qt.labs.qmlmodels

Eigenschaften

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 Typ „TableModel“ speichert JavaScript-/JSON-Objekte als Daten für ein Tabellenmodell, das mit „ TableView “ verwendet werden kann. Er ist dafür vorgesehen, sehr einfache Modelle zu unterstützen, ohne dass die Erstellung einer benutzerdefinierten Unterklasse von „ QAbstractTableModel “ in C++ erforderlich ist.

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 über die Eigenschaft „ rows “ oder durch den Aufruf von „ appendRow()“ festgelegt. Jede Spalte im Modell wird durch die Deklaration einer „ TableModelColumn “-Instanz festgelegt, wobei die Reihenfolge der einzelnen Instanzen den Spaltenindex bestimmt. Sobald das Signal „ Component::completed()“ des Modells ausgelöst wurde, sind die Spalten und Rollen festgelegt und bleiben für die gesamte Lebensdauer des Modells unverändert.

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

Um neue Zeilen hinzuzufügen, verwenden Sie „ appendRow()“ und „ insertRow()“. Um vorhandene 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 Stelle nicht mit dem Typ der festgelegten Daten übereinstimmt, erfolgt eine automatische Konvertierung über QVariant.

Unterstützte Datenstrukturen für Zeilen

„TableModel“ ist für die Verwendung mit JavaScript-/JSON-Daten ausgelegt, wobei jede Zeile eine Liste einfacher Schlüssel-Wert-Paare darstellt:

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

Da die Modellbearbeitung in Qt über Zeilen- und Spaltenindizes erfolgt und Objekt-Schlüssel ungeordnet sind, muss jede Spalte über ` TableModelColumn` angegeben werden. Dies ermöglicht die Zuordnung der in Qt integrierten Rollen zu beliebigen Eigenschaften in jedem Zeilenobjekt.

Komplexe Zeilenstrukturen werden unterstützt, allerdings mit eingeschränkter Funktionalität. Da TableModel keine Möglichkeit hat, die Struktur der einzelnen Zeilen zu erkennen, kann es diese nicht bearbeiten. Infolgedessen wird die Kopie der Modelldaten, die TableModel unter ` rows ` gespeichert hat, nicht mit den in QML festgelegten Quelldaten synchronisiert. Aus diesen Gründen wird die Bearbeitung der Daten nicht unterstützt.

Angenommen, Sie möchten eine Datenquelle verwenden, bei der jede Zeile ein Array und jede Zelle ein Objekt ist. Um diese Datenquelle mit TableModel zu nutzen, 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: Funktionen zurZeilenbearbeitung wie „ appendRow()“, „ removeRow()“ usw. werden bei der Verwendung komplexer Zeilen nicht unterstützt.

Verwendung von „DelegateChooser“ mit „TableModel“

Für die meisten Anwendungsfälle in der Praxis wird empfohlen, ` DelegateChooser ` als Delegat eines ` TableView ` zu verwenden, das TableModel nutzt. Dies ermöglicht es Ihnen, bestimmte Rollen in den entsprechenden Delegaten zu nutzen. Beispielsweise lässt sich der obige Codeausschnitt so umschreiben, dass ` DelegateChooser ` verwendet wird:

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 mit den Indizes „ 0 “ und „ 1 “ haben die Datentypen „ bool “ und „ integer “, daher verwenden sie jeweils „ CheckBox “ und „ SpinBox “. Die übrigen Spalten können einfach „ TextField “ verwenden, weshalb dieser Delegat als Fallback zuletzt deklariert wird.

Verwendung des TableModel mit externen JSON-Quellen

Wenn die Struktur der Daten in einem JSON-Objekt mit der vom TableModel definierten Struktur übereinstimmt, kann sie über die Eigenschaft „rows“ direkt dem Modell zugewiesen werden. Alle Zeilen in den Daten müssen den vom Modell definierten Spalten entsprechen.

Wenn das Modell beispielsweise wie folgt definiert ist:

            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 verfügt zwar über die erforderlichen Daten, jedoch nicht unbedingt in der erforderlichen Struktur. In diesem Fall können Sie die Daten herunterladen, in ein Format umwandeln, das der vom Modell definierten Struktur entspricht, 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. Ein Beispiel hierfür finden Sie in der Dokumentation zu „ TreeModel “.

Warnung: Stellen Sie sicher , dass die JSON-Daten aus einer vertrauenswürdigen Quelle stammen. Da das Modell seine Zeilen dynamisch auf Basis der Eingabe füllt, können fehlerhafte oder nicht vertrauenswürdige JSON-Daten zu unerwartetem Verhalten oder Leistungsproblemen führen.

Siehe auch TableModelColumn, TableView und QAbstractTableModel.

Dokumentation zu den Eigenschaften

columnCount : int [read-only]

Diese schreibgeschützte Eigenschaft gibt die Anzahl der Spalten im Modell an.

Die Anzahl der Spalten ist für die gesamte Lebensdauer des Modells festgelegt, nachdem die Eigenschaft „ rows “ gesetzt oder die Methode „ 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, sobald Zeilen zum Modell hinzugefügt oder daraus entfernt werden.

rows : var

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

            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.

Methodendokumentation

void appendRow(var row)

Fügt am Ende des Modells eine neue Zeile mit den Werten (Zellen) aus row hinzu.

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)

Gibt die Daten aus der Tabellenzelle an der angegebenen Koordinate index zurück, die zur angegebenen Spalte 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 zum Ändern des Inhalts des Modells verwendet werden; 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 abzurufen, 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 sowie „ data()“.

void insertRow(int rowIndex, var row)

Fügt dem Modell an der Position rowIndex eine neue Zeile hinzu, deren Werte (Zellen) in row enthalten sind.

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

rowIndex muss auf ein vorhandenes Element in der Tabelle verweisen oder auf ein Element hinter dem Ende der Tabelle (entspricht appendRow()).

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

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

Verschiebt „ rows “ vom Index fromRowIndex zum Index toRowIndex.

Die Quell- und Zielbereiche müssen vorhanden sein; um beispielsweise die ersten 3 Elemente 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 unter role genannte Datenfeld in die Tabellenzelle unter der angegebenen Koordinate index mit dem Wert value ein bzw. aktualisiert es. Gibt bei Erfolg „true“ zurück, andernfalls „false“.

Siehe auch data() und index().

void setRow(int rowIndex, var row)

Ändert die Zeile unter rowIndex im Modell durch row.

Alle Spalten/Zellen müssen in „ row “ vorhanden sein und in der richtigen Reihenfolge stehen.

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

Wenn „ rowIndex “ gleich „ rowCount() “ ist, wird dem Modell eine neue Zeile angehängt. Andernfalls muss „ rowIndex “ auf eine bereits vorhandene 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.