在Ubuntu平台中读取CSV文件并用table进行展示

在今天的这篇文章中，我们将介绍如何读取一个CSV文件，并使用一个table进行展示数据。我们知道在Ubuntu平台中目前没有移植TableView。那么我们怎么来展示一个Table的数据呢？ 答案是使用我们的ListItem。关于ListItem的更多的描述，大家可以参阅文章“浅叙Ubuntu.Components
1.2中的ListItem控件”。

首先，在Ubuntu桌面上，我们可以使用我们的LibreOffice来创建一个我们的数据表：



我们可以通过“Save as”菜单把我们的表格存为一个CSV的文件格式：



CSV格式的文件实际上是以分号分开的格式文件：

张三,1981.1.1,男,北京市,街道胡同号234567
李四,1982.2.2,男,南京市,街道胡同号234567
王红,1990.5.20,女,深圳市,街道胡同号234567
王五兰,2000.10.1,男,成都市,街道胡同号234567
陈建东,1985.11.23,男,上海市,街道胡同号234567

我们可以创建一个最简单的qmlproject应用，并把我们刚才创建好的csv文件考入到项目的根目录中。

为了读取这个文件，我们定义一个自己的model来供我们的ListView来使用：

AppModel.qml

import QtQuick 2.0

Item {
property string source: ""

property ListModel model : ListModel { id: jsonModel }
property alias count: jsonModel.count

function createPerson(r) {
return {
"name": r[0],
"birthday":r[1],
"sex":r[2],
"city":r[3],
"address":r[4]
};
}

onSourceChanged: {
console.log("Loading " + source)

var xhr = new XMLHttpRequest;
xhr.open("GET", source);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var doc = xhr.responseText;
console.log("doc: " + doc);

var records = xhr.responseText.split('\n');

console.log("length: " + records.length)

for ( var i = 0; i < records.length; i++ ) {
console.log("record: " + i + " "  + records[i]);

var r = records[i].split(',');
if ( r.length === 5 )
jsonModel.append(createPerson(r));
}
}
}

xhr.send();
}
}

当我们的source被设置或发生改变时，onSourceChanged将被自动调用。我们使用XMLHttpRequest来读取本地的文件，并把解释好的数据放入到我们的ListModel中。

一旦有了数据，我们就可以通过我们的ListView来显示为我们的数据。尽管我们没有TableView这样的API供我们使用，我们可以通过ListItem来完成我们的相应的功能。

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.2

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "tableview.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

// Removes the old toolbar and enables new features of the new header.
//    useDeprecatedToolbar: false

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("tableview")

AppModel {
id: appmodel
source: "file.csv"
}

ListView {
id: listview
anchors.fill: parent
model: appmodel.model

delegate: ListItem {
id: del
width: listview.width
height: layout.childrenRect.height + units.gu(1)

Rectangle {
anchors.fill: parent
color: index%2 == 0 ?  "Azure" : "Beige"
}

Column {
id: layout
width: listview.width
spacing: units.gu(1)

Item {
width: parent.width
height: name.height
Label { id: name; x: units.gu(1); text: model.name }
Label { id: birthday; x: del.ListView.view.width/4; text: model.birthday }
Label { id: sex; x: listview.width/2; text: model.sex }
Label { id: city; x: listview.width*3/4; text: model.city }
}

Label {
text: model.address
fontSize: "large"
anchors.right: parent.right
anchors.rightMargin: units.gu(1)
}
}
}
}
}
}

我们的显示也非常地简单。我们直接在ListItem中使用了一个二行的显示。第一行是四个Label，分别用于显示我们的数据表中的数据。同时我们在第二行中显示地址信息。这在标准的TableView中是没法实现的。从某种程度上讲，我们的ListItem是非常灵活的。

运行为我们的应用：





显然，我们使用ListView也同样很好地展示了我们的数据。

整个项目的源码在：https://github.com/liu-xiao-guo/tableview