QML类型：TableModel

一、描述

TableModel 类型将 JavaScript/JSON 对象存储为可与 TableView一起使用的表模型的数据。它旨在支持非常简单的模型，而无需在 C++ 中创建自定义 QAbstractTableModel子类。

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0

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

            rows:
            [
                {
                    checked: false,
                    amount: 1,
                    fruitType: "苹果",
                    fruitName: "苹果类",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "橘子",
                    fruitName: "橙类",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "香蕉",
                    fruitName: "香芽蕉",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate : TextInput
        {
            text: model.display
            padding: 12
            selectByMouse: true
            onAccepted: model.display = text
            Rectangle
            {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }
    }
}

二、将 DelegateChooser 与 TableModel 结合使用

对于大多数实际用例，建议使用 DelegateChooser作为使用 TableModel 的 TableView 的委托。 这允许在相关委托中使用特定角色。

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.5

Window
{
    width: 800
    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" }

            rows:
            [
                {
                    checked: false,
                    amount: 1,
                    fruitType: "苹果",
                    fruitName: "苹果类",
                    fruitPrice: 1.50
                },
                {
                    checked: true,
                    amount: 4,
                    fruitType: "橘子",
                    fruitName: "橙类",
                    fruitPrice: 2.50
                },
                {
                    checked: false,
                    amount: 1,
                    fruitType: "香蕉",
                    fruitName: "香芽蕉",
                    fruitPrice: 3.50
                }
            ]
        }
        delegate: DelegateChooser
        {
            DelegateChoice
            {
                column: 0
                delegate: CheckBox
                {
                    implicitWidth: 140
                    implicitHeight:40
                    checked: model.display
                    onToggled: model.display = checked
                }
            }
            DelegateChoice
            {
                column: 1
                delegate: SpinBox
                {
                    implicitWidth: 140
                    implicitHeight:40
                    value: model.display
                    onValueModified: model.display = value
                }
            }
            DelegateChoice
            {
                delegate: TextField
                {
                    text: model.display
                    selectByMouse: true
                    implicitWidth: 140
                    implicitHeight:40
                    onAccepted: model.display = text
                }
            }
        }
    }
}

三、属性成员

1、columnCount: int

      rowCount: int

只读属性，模型的行数、列数。

2、rows: object

此属性以行数组的形式保存模型数据。

四、成员函数

1、appendRow(object row)

在模型的末尾添加一个新行，其中包含行中的值（单元格）。

    MouseArea
    {
        anchors.fill: parent
        onPressed:
        {
            var data = {
                'checked': "true",
                'amount': "1",
                'fruitType': "芒果",
                'fruitName': "土芒果",
                'fruitPrice': "1.50"}
            model.appendRow(data)

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

 2、clear()

从模型中删除所有行。

3、variant data(QModelIndex index, string role)

从index索引处的表格单元格返回角色role的数据。

4、object getRow(int rowIndex)

返回模型中 rowIndex 处的行。

注意：返回的对象不能用于修改模型的内容，要修改内容使用 setRow() 。

    console.log(model.getRow(0).display);
    console.log(model.rows[0].fruitName);

5、QModelIndex index(int row, int column)

返回引用给定行和列的 QModelIndex 对象，该对象可以传递给 data() 函数以从该单元格获取数据，或传递给 setData() 以编辑该单元格的内容。

6、insertRow(int rowIndex, object row)

将新行添加到位于 rowIndex 位置的列表模型中。

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

7、moveRow(int fromRowIndex, int toRowIndex, int rows)

将 rows 行从 fromRowIndex 处的索引移动到 toRowIndex 处的索引。

from 和 to 范围必须存在。

例如，要将前 3 个项目移动到列表的末尾：

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

8、removeRow(int rowIndex, int rows = 1)

从模型中删除 rowIndex 处的 rows 行。

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

在 index 处插入或更新表单元格中由 role 命名的数据字段的值。返回更新或插入结果。

10、setRow(int rowIndex, object row)

使用 row 更改模型中 rowIndex 处的行。所有列/单元格必须以正确的顺序排列在行中。

如果 rowIndex 等于 rowCount()，则向模型追加一个新行。否则，rowIndex 必须指向模型中的现有行。

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