TableModel QML 类型

封装简单表格模型。更多...

import 语句：

import Qt.labs.qmlmodels

所有成员列表，包括继承成员

特性

columnCount : int
rowCount : int
rows : object

方法

appendRow (object row )
clear ()
variant data (QModelIndex index , string role )
对象 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 )

详细描述

The TableModel type stores JavaScript/JSON objects as data for a table model that can be used with TableView . It is intended to support very simple models without requiring the creation of a custom QAbstractTableModel subclass in C++.

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
            }
        }
    }
}

The model's initial row data is set with either the rows property or by calling appendRow (). Each column in the model is specified by declaring a TableModelColumn instance, where the order of each instance determines its column index. Once the model's Component::completed () signal has been emitted, the columns and roles will have been established and are then fixed for the lifetime of the model.

To access a specific row, the getRow () function can be used. It's also possible to access the model's JavaScript data directly via the rows property, but it is not possible to modify the model data this way.

To add new rows, use appendRow () 和 insertRow (). To modify existing rows, use setRow (), moveRow (), removeRow ()，和 clear ().

It is also possible to modify the model's data via the delegate, as shown in the example above:

        delegate:  TextInput {
            text: model.display
            padding: 12
            selectByMouse: true
            onAccepted: model.display = text
            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }

If the type of the data at the modified role does not match the type of the data that is set, it will be automatically converted via QVariant .

支持行数据结构

TableModel is designed to work with JavaScript/JSON data, where each row is a simple key-pair object:

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

As model manipulation in Qt is done via row and column indices, and because object keys are unordered, each column must be specified via TableModelColumn . This allows mapping Qt's built-in roles to any property in each row object.

Complex row structures are supported, but with limited functionality. As TableModel has no way of knowing how each row is structured, it cannot manipulate it. As a consequence of this, the copy of the model data that TableModel has stored in rows is not kept in sync with the source data that was set in QML. For these reasons, TableModel relies on the user to handle simple data manipulation.

For example, suppose you wanted to have several roles per column. One way of doing this is to use a data source where each row is an array and each cell is an object. To use this data source with TableModel, define a getter and 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 }
        ]
        // ...
    ]
}

The row above is one example of a complex row.

注意： Row manipulation functions such as appendRow (), removeRow (), etc. are not supported when using complex rows.

使用 DelegateChooser 同 TableModel

For most real world use cases, it is recommended to use DelegateChooser as the delegate of a TableView that uses TableModel. This allows you to use specific roles in the relevant delegates. For example, the snippet above can be rewritten to use DelegateChooser 像这样：

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
                }
            }
        }
    }
}

The most specific delegates are declared first: the columns at index 0 and 1 have bool and integer data types, so they use a CheckBox and SpinBox , respectively. The remaining columns can simply use a TextField , and so that delegate is declared last as a fallback.

另请参阅 TableModelColumn , TableView ，和 QAbstractTableModel .

特性文档编制

columnCount : int [read-only]

This read-only property holds the number of columns in the model.

The number of columns is fixed for the lifetime of the model after the rows property is set or appendRow () is called for the first time.

rowCount : int [read-only]

This read-only property holds the number of rows in the model.

This value changes whenever rows are added or removed from the model.

rows : 对象

This property holds the model data in the form of an array of rows:

            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
                }
            ]

另请参阅 getRow (), setRow (), moveRow (), appendRow (), insertRow (), clear (), rowCount ，和 columnCount .

方法文档编制

appendRow ( 对象 row )

Adds a new row to the end of the model, with the values (cells) in row .

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

另请参阅 insertRow (), setRow ()，和 removeRow ().

clear ()

Removes all rows from the model.

另请参阅 removeRow ().

variant data ( QModelIndex index , string role )

Returns the data from the table cell at the given index belonging to the given role .

另请参阅 setData () 和 index ().

对象 getRow ( int rowIndex )

Returns the row at rowIndex in the model.

Note that this equivalent to accessing the row directly through the rows 特性：

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

注意： the returned object cannot be used to modify the contents of the model; use setRow () 代替。

另请参阅 setRow (), appendRow (), insertRow (), removeRow ()，和 moveRow ().

QModelIndex index ( int row , int column )

返回 QModelIndex object referencing the given row and column , which can be passed to the data () function to get the data from that cell, or to setData () to edit the contents of that cell.

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))
        }
    }
}

另请参阅 QModelIndex and related Classes in QML and data ().

insertRow ( int rowIndex , 对象 row )

Adds a new row to the list model at position rowIndex , with the values (cells) in row .

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

The rowIndex must be to an existing item in the list, or one past the end of the list (equivalent to appendRow ()).

另请参阅 appendRow (), setRow (), removeRow ()，和 rowCount .

moveRow ( int fromRowIndex , int toRowIndex , int rows )

移动 rows from the index at fromRowIndex to the index at toRowIndex .

The from and to ranges must exist; for example, to move the first 3 items to the end of the list:

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

另请参阅 appendRow (), insertRow (), removeRow ()，和 rowCount .

removeRow ( int rowIndex , int rows = 1)

Removes a number of rows at rowIndex from the model.

另请参阅 clear () 和 rowCount .

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

Inserts or updates the data field named by role in the table cell at the given index with value . Returns true if sucessful, false if not.

另请参阅 data () 和 index ().

setRow ( int rowIndex , 对象 row )

Changes the row at rowIndex in the model with row .

All columns/cells must be present in row , and in the correct order.

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

若 rowIndex 等于 rowCount() , then a new row is appended to the model. Otherwise, rowIndex must point to an existing row in the model.

另请参阅 appendRow (), insertRow ()，和 rowCount .