QML TableView表格控件分享

表格控件具备功能及属性：

1.根据数据模型（ListModel形式）动态生成TableViewColunm，自动设置该表格共有几列。（使用控件暴露出的inputModelName属性）
2.可以设置每页需要显示的行数，具备按键翻页功能。（使用控件属性rowNumber，该属性默认值：8）。默认下每行的宽度为父项目宽度均分，在设置控件属性columnWidthSetAble为真后，便可以通过属性columnWidthArray自由设置每列宽度，该属性输入数组形式。
3.可通过属性titleNameArray命名表头，即TableViewColunm中的title属性，该属性输入数组形式，数组中若有缺失则表头默认命名为rolename。通过控件属性titleHeight可设置表头高度，默认值：48
4.左右分栏显示功能（注：部分尚未完全完成，且思路有问题，仅供简单使用），设置partBreakable可以使表格分为左右两侧同时显示，每页行数仍是rowNumber设置值，但显示数据量为原先2倍。如下图所示。这里分栏的想法是根据原先ListModel和每页行数，生成一个与分栏显示数据相对应的新ListModel，其实不应该这样，这样只是便于实现显示功能。

控件中还有字体，颜色等属性没有暴露出来，如有需要可以自行添加。控件中定义有一些乱，可以自行修改。TableViewColunm的宽度接受INT数据，自动生成时也使用了parseInt函数，所以当父对象宽度无法整除列数时，两侧可能回产生缝隙。代码中可能还处在BUG，但近期无法在修改，所以先贴出来供使用和参考。希望大家把BUG和缺陷在评论说出，一起进步。

Form控件代码

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2

Item{
    id:mainItem
    width: parent.width
    height: parent.height

    property bool partBreakable: false
    property int partNumber: partBreakable? 2:1
    property int formMaxPage: getPage(inputModelName.count)
    property int formCurrentPage: 0
    property var inputModelName
    property var inputModelCell: Object.keys(inputModelName.get(0))
    property var objName: getObjName(inputModelName.get(0))
    property var roleName
    property var titleNameArray
    property var titleName
    property real columnWidth
    property var columnWidthArray
    property bool columnWidthSetAble:false
    property string strTestColumn:'import QtQuick 2.2; import QtQuick.Controls 1.2; TableViewColumn{id:aa;role:\''+roleName+'\';title:\''+titleName+'\'; width:'+columnWidth+'}'
    property var columnArray:partBreakable?{}:formSetting(inputModelCell,getTitleName)
    property int rowNumber:8
    property int titleHeight: 48
    property real rowHeight: (height - titleHeight - 48)/rowNumber
    property var getColumnWidthArray: getArray(columnWidthArray)
    property var getTitleName: getTitleArray(titleNameArray,inputModelCell)
    property int maxPage: parseInt(inputModelName.count/(rowNumber*2) + 1)
    property var twopartModel: getNewModel(inputModelName)
    property var length: Object.keys(twopartModel)
    property var partTitle:getPartTitle(getTitleName)

    function getPartTitle(array){
        var result = []
        for(var i = 0;i<array.length;i++){
            result[i] = array[i]
        }
        for(var j = 0;j<array.length;j++){
            result[j+array.length] = array[j ]
        }
        return result
    }

    function formSetting(object,title){
        var result = []
        var theWidth = 0
        for(var i=0;i<object.length;i++)
        {
            var num = object.length - i - 1
            roleName = object[num]
            titleName = title[i]
            theWidth = partBreakable? (width/partNumber):width
            columnWidth = columnWidthSetAble? getColumnWidthArray[i]:(parseInt((theWidth -2)/inputModelCell.length))
            result[i] = strTestColumn
        }
        return result
    }

    function getTitleArray(array,object)
    {
        var result = []
        var j = 0
        for(var i=0;i<inputModelCell.length;i++){
            if(array[i] !== '' && array[i] !== undefined){
                result[j] = array[i]
                j++
            }
            else{
                var num = object.length - i - 1
                result[j] = object[num]
                j++
            }
        }
        return result
    }

    function getArray(array){
        var result=[]
        var j = 0
        for(var i=0;i < array.length;i++){
            if(array[i]!==''&& array[i]!==undefined){
                result[j] = array[i]
                j++
            }
            else{
                result[j] = 100
                j++
            }
        }
        if(partBreakable == true)
        {
           for(var ii=0;ii<array.length;ii++){
            result[ii+array.length] = result[ii]
            console.log(ii+array.length)
           }
        }
        return result
    }

    function getPage(count){
        var page = parseInt((count-1)/rowNumber)
        return page
    }

    function getNewModel(model){
        var result = {}
        var maxone = parseInt(model.count/2 + 1)
        var judge = model.count % 2
        for(var i=0;i<maxPage;i++){
            for(var a = (0+i*rowNumber);a < (rowNumber+i*rowNumber);a++){
                var object = {}
                if(model.get(a+rowNumber+i*rowNumber) !== undefined){
                    for(var obj2 in model.get(a+rowNumber+i*rowNumber)){
                        var newName = obj2.toString() + '1'
                        object[newName] = model.get(a+rowNumber+i*rowNumber)[obj2]
                    }
                }
                else{
                    for(var obj1 in model.get(a+i*rowNumber )){
                        var newName1 = obj1.toString() + '1'
                        object[newName1] = ''
                    }
                }
                for(var obj in model.get(a+i*rowNumber )){
                    object[obj] = model.get(a+i*rowNumber )[obj]
                }
                result[a] = object
            }
        }
        return result
    }

    function getObjName(name){
        var result ={}
        for(var a in name){
            var indexString =  a.toString()
            result[indexString] = " "
        }
        return result
    }

    TableView{
        id:tableView
        frameVisible: true
        width: parent.width
        height: parent.height -47
        itemDelegate: Rectangle{
            border.width:1
            border.color: "yellow"
            color: "black"
            Text{
                anchors.fill: parent
                text: styleData.value
                color: styleData.selected ? "yellow" : "white"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.bold: true
                font.pointSize: 15
            }
        }
        rowDelegate: Rectangle{
            height: rowHeight
        }
        headerDelegate: Rectangle{
            id:headDelegate
            border.color: "yellow"
            border.width: 1
            color: "black"
            height: titleHeight
            Text{
                anchors.fill: parent
                text: styleData.value
                color: "yellow"
                font.bold: true
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 15
            }
        }
        model:ListModel{
            id:listModel
        }
        Component.onCompleted: {
            if(partBreakable == true){
                var inputModelCell1= Object.keys(inputModelName1.get(0))
                var getTitleName1= partTitle
                var columnArray11 = formSetting(inputModelCell1,getTitleName1)
                var objName1 = getObjName(inputModelName1.get(0))
                for(var j = 0;j<inputModelCell1.length;j++){
                    tableView.addColumn(Qt.createQmlObject(columnArray11[j],tableView,'firstObject'))
                }
                for(var i = 0;i<=(rowNumber-1);i++){
                    if(i<inputModelName1.count){
                        listModel.set(i,inputModelName1.get(i))
                    }
                    else
                    {
                        listModel.set(i,objName1)
                    }
                }
            }
            else{
                for(var jj = 0;jj<inputModelCell.length;jj++){
                    tableView.addColumn(Qt.createQmlObject(columnArray[jj],tableView,'firstObject'))
                }
                for(var ii = 0;ii<=(rowNumber-1);ii++){
                    if(ii<inputModelName.count){
                        listModel.set(ii,inputModelName.get(ii))
                    }
                    else
                    {
                        listModel.set(ii,objName)
                    }
                }
            }
        }
    }

    ListModel{
        id:inputModelName1
        Component.onCompleted: {
            for(var i=0;i<=length.length;i++)
            {
                inputModelName1.set(i,twopartModel[i])
            }
        }

    }

    Rectangle{
        id:buttonArea
        width: parent.width
        height: 47
        color: "black"
        border.color: "yellow"
        border.width: 1
        anchors.top: tableView.bottom
        anchors.horizontalCenter: mainItem.horizontalCenter
        Loader{
            id:rightButton
            sourceComponent: changePageButton
            x:parent.width-width-1;y:0
            height:parent.height
            width: 100
            onLoaded: {
                item.text="向后"
            }
            Connections{
                target: rightButton.item
                onButtonClick:{
                    if(partBreakable == true){
                        var objName1 = getObjName(inputModelName1.get(1))
                        if(formCurrentPage < maxPage - 1){
                            listModel.clear()
                            formCurrentPage += 1
                            for(var i = 0;i<=(rowNumber-1);i++){
                                if((i+formCurrentPage * rowNumber) <= (inputModelName1.count-1))
                                {listModel.set(i,inputModelName1.get(i +formCurrentPage * rowNumber))}
                                else
                                {listModel.set(i,objName1)}
                            }
                        }
                    }
                    else{
                        if(formCurrentPage < formMaxPage){
                            listModel.clear()
                            formCurrentPage += 1
                            for(var i = 0;i<=(rowNumber-1);i++){
                                if((i+formCurrentPage * rowNumber) <= (inputModelName.count-1))
                                {listModel.set(i,inputModelName.get(i +formCurrentPage * rowNumber))}
                                else
                                {listModel.set(i,objName)}
                            }
                        }
                    }
                }
            }
        }
        Loader{
            id:leftButton
            sourceComponent: changePageButton
            x:1;y:0
            height:parent.height
            width: 100
            onLoaded: {
                item.text="向前"
            }
            Connections{
                target: leftButton.item
                onButtonClick:{
                    if(partBreakable == true){
                        if(formCurrentPage > 0){
                            listModel.clear()
                            formCurrentPage -= 1
                            for(var i = 0;i<=(rowNumber-1);i++){
                                listModel.set(i,inputModelName1.get(i +formCurrentPage * rowNumber))
                            }
                        }
                    }
                    else{
                        if(formCurrentPage > 0){
                            listModel.clear()
                            formCurrentPage -= 1
                            for(var i = 0;i<=(rowNumber-1);i++){
                                listModel.set(i,inputModelName.get(i +formCurrentPage * rowNumber))
                            }
                        }
                    }

                }
            }
        }
    }

    Component{
        id:changePageButton
        Rectangle{
            property alias text:textArea.text
            signal buttonClick()
            id:changePageButtonArea
            color: "black"
            border.color: "yellow"
            border.width: 2
            Text {
                id:textArea
                text: qsTr(" ")
                color:"yellow"
                anchors.fill:parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 12
            }
            MouseArea{
                id:buttonMouseArea
                anchors.fill: parent
                onClicked:changePageButtonArea.buttonClick()
                onPressed:  {
                    changePageButtonArea.color = "red"
                    textArea.color="#0FF"
                }
                onReleased: {
                    changePageButtonArea.color = "balck"
                    textArea.color="yellow"
                }
            }
        }
    }
}

窗口程序（包含几组数据模型）

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2

ApplicationWindow {
    id:mainwindow
    visible: true
    width: 640
    height: 480 + tool1.height
    title: qsTr("表格")

    Form{
        id:form1
        inputModelName:model1
        partBreakable:true
        //columnWidthSetAble:true
        //columnWidthArray:[100,200,300,'',]
        rowNumber:8
        titleNameArray:['序号','名称','数值','测试4','']
        titleHeight:48
    }
    ListModel{
        id: model2
        ListElement{
            num: "1"
            name: "500"
            value: "0"
            text:"c"
        }
        ListElement{
            num: "2"
            name: "501"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "3"
            name: "502"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "4"
            name: "503"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "5"
            name: "504"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "6"
            name: "505"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "7"
            name: "506"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "8"
            name: "507"
            value: "50"
            text:"c"
        }
        ListElement{
            num: "9"
            name: "508"
            value: "50"
            text:"c"
        }

    }
    ListModel{
        id: model1
        ListElement{
            num: "1"
            name: "500"
            value: "0"
        }
        ListElement{
            num: "2"
            name: "501"
            value: "50"
        }
        ListElement{
            num: "3"
            name: "502"
            value: "50"
        }
        ListElement{
            num: "4"
            name: "503"
            value: "50"
        }
        ListElement{
            num: "5"
            name: "504"
            value: "50"
        }
        ListElement{
            num: "6"
            name: "505"
            value: "50"
        }
        ListElement{
            num: "7"
            name: "506"
            value: "50"
        }
        ListElement{
            num: "8"
            name: "507"
            value: "50"
        }
        ListElement{
            num: "9"
            name: "508"
            value: "50"
        }
        ListElement{
            num: "10"
            name: "509"
            value: "50"
        }
        ListElement{
            num: "11"
            name: "510"
            value: "50"
        }
        ListElement{
            num: "12"
            name: "511"
            value: "50"
        }
        ListElement{
            num: "13"
            name: "512"
            value: "50"
        }
        ListElement{
            num: "14"
            name: "513"
            value: "50"
        }
        ListElement{
            num: "15"
            //name: "514"
            value: "50"
        }
        ListElement{
            num: "16"
            name: "515"
            value: "50"
        }
        ListElement{
            num: "17"
            name: "516"
            value: "50"
        }
        ListElement{
            num: "18"
            name: "517"
            value: "50"
        }
        ListElement{
            num: "19"
            name: "518"
            value: "50"
        }
        ListElement{
            num: "20"
            name: "519"
            value: "50"
        }

        ListElement{
            num: "21"
            name: "520"
            value: "50"
        }
        ListElement{
            num: "22"
            name: "521"
            value: "50"
        }
        ListElement{
            num: "23"
            name: "522"
            value: "50"
        }
        ListElement{
            num: "24"
            name: "523"
            value: "50"
        }
        ListElement{
            num: "25"
            name: "524"
            value: "50"
        }
        ListElement{
            num: "26"
            name: "525"
            value: "50"
        }
        ListElement{
            num: "27"
            name: "526"
            value: "50"
        }
        ListElement{
            num: "28"
            name: "527"
            value: "50"
        }
        ListElement{
            num: "29"
            name: "528"
            value: "50"
        }
        ListElement{
            num: "1"
            name: "500"
            value: "0"
        }
        ListElement{
            num: "2"
            name: "501"
            value: "50"
        }
        ListElement{
            num: "3"
            name: "502"
            value: "50"
        }
        ListElement{
            num: "4"
            name: "503"
            value: "50"
        }
        ListElement{
            num: "5"
            name: "504"
            value: "50"
        }
        ListElement{
            num: "6"
            name: "505"
            value: "50"
        }
        ListElement{
            num: "7"
            name: "506"
            value: "50"
        }
        ListElement{
            num: "8"
            name: "507"
            value: "50"
        }
        ListElement{
            num: "9"
            name: "508"
            value: "50"
        }
        ListElement{
            num: "10"
            name: "509"
            value: "50"
        }
        ListElement{
            num: "11"
            name: "510"
            value: "50"
        }
        ListElement{
            num: "12"
            name: "511"
            value: "50"
        }
        ListElement{
            num: "13"
            name: "512"
            value: "50"
        }
        ListElement{
            num: "14"
            name: "513"
            value: "50"
        }
        ListElement{
            num: "15"
            name: "c"
            value: "50"
        }
        ListElement{
            num: "16"
            name: "515"
            value: "50"
        }
        ListElement{
            num: "17"
            name: "516"
            value: "50"
        }

    }

//    Window{
//        id:window2
//        width: 640
//        height: 480
//        Form{
//            id:form2
//            inputModelName: model2
//        }
//    }

    ListModel{
        id: model3
        ListElement{
            num: "一"
            name: "508"
            value: "50"
            num1: "rr"
            name2: "508"
            value3: "52"
        }
        ListElement{
            num: "二"
            name: "509"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "三"
            name: "510"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "四"
            name: "511"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "13"
            name: "512"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "14"
            name: "513"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "15"
            name: "514"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "16"
            name: "515"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "17"
            name: "516"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "18"
            name: "517"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50" }
        ListElement{
            num: "19"
            name: "518"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "20"
            name: "519"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "21"
            name: "520"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "22"
            name: "521"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "23"
            name: "522"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "24"
            name: "523"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "25"
            name: "524"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "26"
            name: "525"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "27"
            name: "526"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "28"
            name: "527"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
        ListElement{
            num: "29"
            name: "528"
            value: "50"
            num1: "一"
            name2: "508"
            value3: "50"}
    }

    Action{
        id:button1;text:"窗口1"
        onTriggered: window2.show()
    }

    toolBar: ToolBar{
        id:tool1
        width: parent.width
        Row{
            anchors.fill: parent
            ToolButton{action:button1}
        }
    }
}