QML TableView 动态 - Javascript

QML TableView提供了一种方便的方式来显示二维表格信息。但是，有时候需要根据动态数据来更新表格内容。这时候就需要结合Javascript来实现TableView的动态。

数据模型

一个TableView的关键是数据模型。QML提供了一个Model来存储数据。在本例中，我们将使用Javascript对象数组作为数据模型。

var myData = [
    {name: "Alice", age: 25, city: "New York"},
    {name: "Bob", age: 30, city: "Los Angeles"},
    {name: "Charlie", age: 35, city: "Chicago"}
];

定义TableView

我们需要在QML文件中使用TableView元素来显示表格内容。在这个例子中，我们使用一个Delegator来根据数据模型来动态生成表格行。

TableView {
    id: myTable
    anchors.fill: parent

    model: ListModel {}

    TableViewColumn {
        role: "name"
        title: "Name"
        width: myTable.width/3
    }
    TableViewColumn {
        role: "age"
        title: "Age"
        width: myTable.width/3
    }
    TableViewColumn {
        role: "city"
        title: "City"
        width: myTable.width/3
    }

    delegate: Rectangle {
        height: 50
        width: myTable.width

        Text {
            text: model.name // 从模型中获取名字数据
            height: parent.height
            width: parent.width/3
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: model.age // 从模型中获取年龄数据
            height: parent.height
            width: parent.width/3
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: model.city // 从模型中获取城市数据
            height: parent.height
            width: parent.width/3
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }
}

更新TableView

我们可以通过Javascript来动态更新TableView的数据。这里我们提供一个函数updateTable()来随机更新表格。

function updateTable() {
    myTable.model.clear();

    // 生成新数据
    for (var i = 0; i < 3; i++) {
        myData[i].age = Math.floor(Math.random()*10 + 20); // 年龄随机增加
    }

    // 添加新数据到模型里
    for (var i = 0; i < 3; i++) {
        myTable.model.append(myData[i]);
    }
}

这个函数首先清除表格的旧数据，然后随机更新数据模型里的年龄信息，最后添加新数据到模型里。运行函数就可以使TableView动态更新。

结论

QML TableView提供了一个方便易用的方式来显示二维表格信息。结合Javascript可以实现动态更新数据，使表格变得更加灵活高效。