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,
})
  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
QML中的TableModel是一种用于在QML视图中展示数据的数据模型。TableModel可以被绑定到一个QML视图组件,如TableView、ListView等,从而将数据呈现在界面上。 TableModel可以通过以下方式创建: ``` TableModel { id: myTableModel // 定义表格的列 TableModelColumn { display: "姓名"; role: "name" } TableModelColumn { display: "年龄"; role: "age" } TableModelColumn { display: "性别"; role: "gender" } // 定义数据 rows: [ { name: "张三", age: 18, gender: "男" }, { name: "李四", age: 20, gender: "女" }, { name: "王五", age: 22, gender: "男" } ] } ``` 在上面的代码中,我们定义了一个包含三列数据的TableModel,同时也定义了三行数据。 TableModel的列通过TableModelColumn来定义,其中display属性指定了该列的显示名称,role属性指定了该列在数据中的键名。 TableModel的数据通过rows属性来定义,rows是一个数组,包含了多个行数据。每一行数据都是一个对象,对象的属性名对应了TableModel中的列的role属性值,属性值对应了该列的具体数据。 在QML中,我们可以使用TableView、ListView等组件来展示TableModel的数据。 例如,下面的代码展示了如何使用TableView展示上面的TableModel: ``` TableView { model: myTableModel anchors.fill: parent TableViewColumn { role: "name" title: "姓名" } TableViewColumn { role: "age" title: "年龄" } TableViewColumn { role: "gender" title: "性别" } } ``` 在上面的代码中,我们使用TableView来展示myTableModel的数据,同时我们还定义了三个TableViewColumn来指定展示的列。每个TableViewColumn的role属性指定了需要展示的数据列。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值