一、描述
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,
})