QML学习十七：TableView的简单使用

一、TableView

TableView是Qt Quick为表格式呈现数据提供的组件。

TableView与ListView类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性，数据也是通过Model来提供，此篇使用的是内建Model。

二、TableView简单例子

定义TableViewColumn,描述表格的每一列，这是必须的，否则表格无法显示。

代码

重写main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12
 
 
Window {
    id: window
    visible: true
    width: 600
    height: 480
    title: qsTr("QML自定义组件")
 
    TableView {
        id: phoneTable
 
        anchors.fill: parent
 
        TableViewColumn {
            role: "name"
            title: "Name"
            width: 100
            elideMode: Text.ElideRight
        }
        TableViewColumn {
            role: "cost"
            title: "Cose"
            width: 100
        }
        TableViewColumn {
            role: "manufacturer"
            title: "Manufacturer"
            width: 140
        }
 
 
        model: ListModel {
            id: phoneModel
 
            ListElement {
                name: "iphone 5"
                cost: "4900"
                manufacturer: "Apple"
            }
 
            ListElement {
                name: "iphone 8"
                cost: "4900"
                manufacturer: "Apple"
            }
 
            ListElement {
                name: "iphone 6"
                cost: "4900"
                manufacturer: "Apple"
            }
 
            ListElement {
                name: "iphone 7"
                cost: "4900"
                manufacturer: "Apple"
            }
        }
        focus: true
 
    }
}
 
 
 

编译结果：

 显示出来效果和ListView差不多， 但增加了头，而且有默认的样式，如果不喜欢还可以定制表格样式。

三、动态增删改查 TabelView

有时你可能会想给 TableView 添加一列（一个字段），这时可以使用addColumn()方法， 其参数是 TableViewColumn，指向一个 TableViewColumn 实例，你可以动态创建这个实例。

对于前两节的示例，第三列可以这样添加进去：

Component.onCompleted: {
	var col = Qt.createQmlObject("import QtQuick 2.2\nimport QtQuick.Controls 		 1.2\nTableViewColumn{ role: \"mamifacturer\"; title: \"Manufacturer\"; width: 140; }", phoneModel);
	phoneTable.addColumn( col );
}

要想在指定位置添加一列，可以使用insertColumn(index, column)方法，index 参数指定列的索引，column 参数与 addColumn() 的参数一样。

如果你想删除某列，可以使用removeColumn(index)方法，指定列索引即可。

TableView 还提供了moveColumn(from, to)，用于将一列从位置 from 移动到 to。

而如果你想给 TableView 动态添加数据，则可以通过调用 ListModel 的 append() 或 insert() 方法实现。删除数据通过 ListModel 的 clear() 或 remove() 方法实现。这些在前面介绍 ListView 的时候都已经介绍过了。

对于自定义的 Model，比如在 C++ 中实现的，则需要提供增、删、改数据的接口。