Javascript 如何制作动态表

Javascript 如何制作动态表,javascript,list,qt,qml,tableview,Javascript,List,Qt,Qml,Tableview,我的问题是,我需要从一个数组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; i

我的问题是,我需要从一个数组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
}
}

}

不要过度使用字符串连接,因为它可能会混淆处理,相反,您可以使用组件的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()
}
我建议使用QML