如何制作动态表

Posted 2023-02-16

【中文标题】如何制作动态表

【英文标题】：How to make a dynamic table

【发布时间】：2020-03-20 17:38:36

【问题描述】：

我的问题是我需要从一个数组 (tFields) 中读取表中的名称和列数，以及从第二个数组 (tRecords) 中读取元素数据。

我已经实现了列的读取和创建，请大家帮忙或者告诉我创建列表的问题在哪里。

代码如下：

function buildColumns() 
var rc = vConnection.recCount
var fc = vConnection.fldCount

for(var i = 0; i < fc; ++i)

    var str = 'import QtQuick 2.1; import QtQuick.Controls 1.0; import QtQuick.Layouts 1.0; TableViewColumn id: idColumn; role: '
    str += '"' + vConnection.tFields[i] + '"' + '; title: ' + '"' + vConnection.tFields[i] + '"' +  '; width: ' + (tblPage.width / vConnection.fldCount) +'; Component.onCompleted: console.log("YEY");'
    tbl.addColumn(Qt.createQmlObject(str, tbl))


for(var j = 0; j < rc; ++j)

    var str2 = 'import QtQuick 2.12; import QtQuick.Window 2.12; import QtQuick.Controls 2.4; import QtQuick.Controls.Imagine 2.3; import QtQuick.Templates 2.5; import QtQuick.Controls 1.4; ListElement  id: idColumn; '
    for(var f = 0; f < fc; ++f)
    
        str2 += vConnection.tFields[f] + ': "' + vConnection.tRecords[f + rc] + '"; '
    

    str2 += ''

    Qt.createQmlObject(str2, lmTable)



Component.onCompleted: 
    buildColumns();


TableView 
id: tbl
anchors.fill: parent

model: ListModel 
    id: lmTable

【问题讨论】：

我推荐使用QML doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

【参考方案1】：

不要过度使用字符串连接，因为处理起来会让人困惑，相反，您可以使用“组件”的 createObject 方法，该方法可以以更易读的方式分配属性。

要向模型添加项目，不必使用 X，而是使用 append 方法，您可以在其中传递字典，使代码更具可读性。

Page 
    id: tblPage
    title: qsTr("Table")

    Component
        id: columnComponent
        TableViewColumn
            Component.onCompleted: console.log("YEY")
        
    
    ListModel 
        id: lmTable
    
    function buildColumns() 
        var rc = vConnection.recCount
        var fc = vConnection.fldCount
        for(var i = 0; i < fc; ++i)
            var col = columnComponent.createObject(tbl, "role": vConnection.tFields[i],
                                                       "title": vConnection.tFields[i],
                                                       "width": (tblPage.width / vConnection.fldCount))
            tbl.addColumn(col)
        
        for(var j = 0; j < rc; ++j)
            var d = ;
            for(var f = 0; f < fc; ++f)
                d[vConnection.tFields[f]] = vConnection.tRecords[f + rc]
            
            lmTable.append(d)
        
    
    TableView 
        id: tbl
        anchors.fill: parent
        model: lmTable
    
    Component.onCompleted: buildColumns()