在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