QT: QML TableView演示代码

最新推荐文章于 2024-08-24 15:32:26 发布
最新推荐文章于 2024-08-24 15:32:26 发布
阅读量1k 收藏 13
点赞数
分类专栏： QT 文章标签： qt html 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FristLineCode/article/details/128872182
版权

效果图

在这里插入图片描述
右侧扩展功能可以上下翻页、上下移动选定的行、行上移下移的操作。 删除行、新增行等等。

在这里插入图片描述
可以直接在表中修改数据。
在这里插入图片描述
扩展栏鼠标悬停有提示，按下背景动画变灰。
实测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)
            }
        }
    }
萌哒兽
关注
专栏目录
Qt QML TableView 学习
TechInk的博客
08-15 877
它可以取值为 TableView.NoSelection、TableView.SingleSelection、TableView.MultiSelection、TableView.ExtendedSelection。要填充 TableView 数据，我们需要定义一个适当的数据模型。通过本文的学习，读者可以更好地掌握 TableView 组件的使用技巧，并为自己的应用程序开发带来更高效、更灵活的数据操作功能。在 TableView 组件中，我们可以设置许多属性，用于控制 TableView 的外观和行为。
qml tableview
Wite_Chen
08-03 856
qml tableview
QT Quick QML 实例之定制 TableView
最新发布
火山上的企鹅
08-24 1224
视图（如ListView）中请求模型的数据时，视图会调用 data() 函数，并传递相应的 QModelIndex 和 role， data() 函数会根据这些参数返回对应的数据。编辑数据: 当用户在视图中编辑数据（如在表格单元格中输入文本或选择复选框）时，视图会调用 setData() 函数，模型根据提供的新数据更新相应的项。：setData() 用于更新数据，而 data() 则用于获取数据。headerData() 通常与 data() 一起使用，前者用于表头的显示，后者用于表格中具体单元格的显示。
QML类型：TableView
友善啊，朋友的博客
10-16 7962
一、描述 TableView 显示从内置 QML 类型（如 ListModel 和 XmlListModel）创建的模型中的数据，这些模型仅填充 TableView 中的第一列。要创建具有多列的模型，请使用 TableModel或继承 QAbstractItemModel 的 C++ 模型。 TableView 继承了 Flickable。这意味着虽然模型可以有任意数量的行和列，但在视口内通常只能看到表格的一部分。 一旦轻弹，新的行和列就会进入视口，而旧的会退出并从视口中移除。 移出的行和列被重新用于.
QML TableView 自定义与使用（QtQuick.Controls 2、标题绘制）
Jane_Yih的博客
02-06 2746
QML QtQuick.Controls 2 TableView的使用，自定义TableView控件(MyTableView)，涉及model/view、表头绘制、表头冻结拖拽、表头跟随表格内容移动、表格内容显示、拖拽表头调节表格行列宽度高度、滚动条显示等功能
QML QtQuick 2 TableView的使用：展示表格数据
热门推荐
龚建波
12-16 1万+
在Qt5.12中，QtQuick 2 添加了 TableView 组件，功能和 QtQuick Control 1 中的 TableView 类似，但是接口大不一样（QtQuick Control 1已经处于弃用状态，不建议使用）。Qt Creator中有两个 QtQuick 2 TableView 的示例，但是都不是数据类型的，参考起来不大方便，我也是别人的 Demo 以及 Qt 文档学习了下（参考链接文本主要是用代码演示TableView的基本操作，即数据的展示和编辑。
QML TableView Demo演示示例
06-09
Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。...
QML TableView 使用详解
u013873761的博客
05-31 1万+
目录 一、—个简单的TableView实例 二、TableViewColumn 属性讲解 三、定制表格外观 3.1 itemDelegate 3.2 rowDelegate 3.3 headerDelegate 3.4 定制表格外观后的示例 四、动态增删改查 TabelView TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。 TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸
qml 表格TableView 创建
anshshivi的博客
04-11 3059
qml 表格TableView 创建 1.自动生成表格，函数调用如下： //自动生成表格 function updateColumn(arrayData) { if(arrayData.length < 3){ console.log("输入表格数据错误！"); return; } ...
QML model/view 模型实现TableView显示
chu553576656的博客
04-27 593
【代码】QML model/view 模型实现TableView显示。
102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程
抵抗时间扭曲，坚持做一件有意义的事
07-12 851
qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互、使用教程
qml tableview 表格
01-06
作者，QQ1284524409。 预览， deploy.pri HEADERS += \ $$PWD/deploy.h SOURCES += \ $$PWD/deploy.cpp  deploy.h #ifndef DEPLOY_H #define DEPLOY_H #include #include class Deploy : public QObject{ Q_OBJECT public: explicit Deploy(QObject *parent = nullptr); ~Deploy(); public slots: void
qml 动态创建TableView
wanghualin033的博客
10-08 1万+
在qml应用开发中，经常会用到TableView来显示数据，而有时表格又不是固定的，需要根据不同的情况来变换表格的标题和内容。 本次博客将会介绍怎样在qml中动态的创建TableView。
QML实现自定义滚动条（ScrollBar）的TableView
草上爬的博客
02-03 7774
一.效果 这里将国产水果标识为红色 二.代码实现 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 1.5 import QtQuick.Controls 2.5 import QtQuick.Controls.Styles 1.4 Window { visible: true width: 400 height: 300 title: qsTr("TableView")
QmlTableView
zhengtianzuo的博客
10-19 4894
使用QtQuick的MVC模式 新建c++类继承于QAbstractTableModel, 并实现几个重要方法:CPP中:class QmlTableViewModel : public QAbstractTableModel { Q_OBJECT public: explicit QmlTableViewModel(); int rowCount(const QModel
qml----TableView
lvmengzou的专栏
04-03 2087
　tableview与Listview相似，只不过是多了滚动条、挑选以及可调节尺寸等功能，它的数据也是通过Model来实现的，可以用listModel、XmlListModel或者c++中的AbstractItemModel和QAbstractTableModel等继承实现的model下面看一个简单的例子，代码如下： 　　 import QtQuick 2.0 import QtQuic...
Qt qml TableView 表格编辑器
武威的涛哥-博客
08-03 1万+
简介：这是一个使用Qt + qml制作的一个表格编辑器。主要是为了展示如何用qml中的TableView控件制作一个表格编辑器。工程是从工作的项目里面单独扣出来的，内容上有些汽车行业相关的文字，请忽略。效果图：功能： 从特定格式JSON文件导入数据 从表格导出数据到JSON文件 从表格独立创建数据 表格列的定制（不同的列用不同的组件和数据类型） 编辑表格内容，包括以行为单位的增、删、改、查 对行的增
【QML Model-View】TableView 使用
m0_60259116的博客
03-06 1400
【QML Model-View】TableView 使用
qt5 qml tableview增加表头并加粗
06-08
在Qt5 QML TableView中增加表头，并加粗可以通过自定义表头样式来实现。下面是一个示例代码，展示如何实现这个功能： ``` TableView { id: tableView width: 400 height: 300 model: myModel style: ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值