QT: QML TableView演示代码

效果图

右侧扩展功能可以上下翻页、上下移动选定的行、行上移下移的操作。 删除行、新增行等等。

可以直接在表中修改数据。

扩展栏鼠标悬停有提示，按下背景动画变灰。
实测10万行数据流畅运行，极低的CPU消耗，比起QtQuick 1.2 的TableView 1版本有很大的提升

客户代码，这里只展示qml的相关的代码，有多余的代码和其他的交互的，忽略就好。。 C++后台代码不方便展示，可私信了解。

	    //C++数据模型
    TableModel{id: tb_model;}

    //表格总框
    Rectangle{
        x: 10; y:50
        id: tbFrame
        width: 480
        height: 350
        border.color: "steelblue"
        border.width: 1
        focus: true
    }
    //表头
    Rectangle{
        id: header
        anchors.top: tbFrame.top
        anchors.topMargin: tbFrame.border.width
        anchors.left: tbFrame.left
        anchors.leftMargin: tbFrame.border.width
        width: tbFrame.width-tbFrame.border.width*2-50
        height: 30
        Row{  //列
            spacing: 1
            Repeater{
                model: ['序号','X移动', 'Y移动', 'R旋转']
                Rectangle{
                    width: (header.width-3)/4
                    height: 30
                    color: "lightgreen"
                    Text {
                        anchors.centerIn: parent
                        text: modelData
                        font.pointSize: 12
                        font.bold: true
                    }
                }
            }
            Rectangle{width: 49;height: 30; color: "lightgreen"}
        }
    }
    //动作表
    TableView{
        property int mv: 0 //鼠标移动的行
        property int ms: 0 //鼠标选定的行
        readonly property real scroll_pos: scrol.position*rows //视图所在的行

        id: actTable
        anchors.top: header.bottom
        anchors.topMargin: 1
        anchors.left: header.left
        anchors.bottom: tbFrame.bottom
        anchors.bottomMargin: tbFrame.border.width

        width: header.width+scrol.width
        clip: true
        contentWidth: width
        model: tb_model
        focus: true
        delegate: Rectangle{
            implicitWidth: (parent.width-scrol.width)/actTable.columns
            implicitHeight: 30
            Rectangle{
                width: parent.width
                height: parent.height
                border.color: "#00AAAA"
                border.width: 1
                color: {
                    if(showTex.activeFocus)
                        return "#ccffff"
                    if(actTable.ms==row)
                        return "#00ccff"
                    else
                        return "white"
                }
                TextInput {
                    id: showTex
                    anchors.fill: parent
                    text: column==0 ? display : display.toFixed(2)
                    font.pixelSize: 20
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    selectByMouse: true
                    enabled: column==0 ? false : true
                    //readOnly: column==0 ? true : false
                    onTextChanged: {
                        var num = Number(text);
                        if(isNaN(num))
                            color = "red"
                        else
                            color = "black"
                    }
                    onEditingFinished: {
                        tb_model.setData(tb_model.index(row, column), text, 0);
                    }
                }
            }
        }
        //设置视图显示的行,参数： 行（显示在视图第一行）
        function setScrollPos(pos)
        {
            pos = pos/actTable.rows
            if(pos<0)
                pos = 0;
            scrol.position = pos
        }

        //垂直滚动条
        ScrollBar.vertical: ScrollBar{
            id: scrol
            width: 14
            height: 100
            contentItem: Rectangle {radius: 20;color: "lightgreen"}
        }
        MouseArea{
            anchors.fill: parent
            onPositionChanged:  {
                actTable.mv = Math.floor(mouseY/30)
            }
            onClicked: {
                focus = actTable
                actTable.ms = Math.floor(mouseY/30)
            }
        }
    }
    //右侧表格操作按钮
    Column{
        anchors.left: actTable.right
        anchors.leftMargin: 2
        anchors.verticalCenter: actTable.verticalCenter
        spacing: 5
        width: 50
        ImageButton{
            width: 30
            height: 30
            tip: "上一页"
            source: "icon/up_up.png"
            onClicked: {
                actTable.setScrollPos(actTable.scroll_pos-10)
                if(actTable.scroll_pos < 0)
                    actTable.setScrollPos(0);
            }
        }
        ImageButton{
            width: 30
            height: 30
            source: "icon/up.png"
            tip: "上一个"
            onClicked: {
                if(actTable.ms>0)
                    actTable.ms--;
                if(actTable.scroll_pos>actTable.ms || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms)
            }
        }
        ImageButton{
            width: 30
            height: 30
            tip: "向上移动"
            source: "icon/move_up.png"
            onClicked: {
                if(actTable.ms>0)
                {
                    tb_model.moveRow(actTable.ms, actTable.ms-1);
                    actTable.ms --;
                }
                if(actTable.scroll_pos>actTable.ms || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms)
            }
        }
        ImageButton{
            width: 30
            height: 30
            source: "icon/del.png"
            tip: "删除选定行"
            onClicked: {
                if(actTable.rows>1)
                {
                    tb_model.removeRow(actTable.ms)
                    if(actTable.ms)
                        actTable.ms--
                }
                else
                    tb_model.setData(0)
                if(actTable.scroll_pos>actTable.ms || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms)
            }
        }
        ImageButton{
            width: 30
            height: 30
            source: "icon/add.png"
            tip: "下方新增一行"
            onClicked: {
                tb_model.insertPos(actTable.ms);
                actTable.ms++;
                if(actTable.ms<actTable.scroll_pos || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms-9)
            }
        }
        ImageButton{
            width: 30
            height: 30
            tip: "向下移动"
            source: "icon/move_down.png"
            onClicked: {
                if(actTable.ms<actTable.rows)
                {
                    tb_model.moveRow(actTable.ms+1, actTable.ms);
                    actTable.ms ++;
                }
                if(actTable.ms<actTable.scroll_pos || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms-9)
            }
        }
        ImageButton{
            width: 30
            height: 30
            tip: "下一个"
            source: "icon/down.png"
            onClicked: {
                if(actTable.ms < actTable.rows)
                    actTable.ms++;
                //自动跳转到选择的位置
                if(actTable.ms<actTable.scroll_pos || actTable.ms>actTable.scroll_pos+9)
                    actTable.setScrollPos(actTable.ms-9)

            }
        }
        ImageButton{
            width: 30
            height: 30
            tip: "下一页"
            source: "icon/down_down.png"
            onClicked: {
                if(actTable.scroll_pos < actTable.rows-10)
                    actTable.setScrollPos(actTable.scroll_pos+10)
            }
        }
    }