＜QML_JanQuickDemo＞四、人员管理-TableView的使用

已于 2022-10-09 15:56:11 修改
阅读量844 收藏 12
点赞数 9
分类专栏： JanQuickDemo 文章标签： qt qt5
于 2022-10-09 15:51:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aike_li/article/details/127226672
版权

目录

前言 

界面展示

界面结构 

代码结构

操作展示

数据展示

修改数据

删除数据

添加数据

EBaseTableView

Dialog

ETableModel

页面整体代码

DataHandleVM

源码地址

总结

前言 

        本篇介绍一下JanQuick_Demo的人员管理页面，主要是介绍TableView和QAbstractTableModel的使用，通过自定义model,delegate实现表格样式自定义和对表格的增删改查。展示的数据来源于本地文件，对表格进行增删改查时没有去改动本地文件，重启demo将恢复初始状态

        同样的，本篇的demo源码地址放在末尾，有需要的读者可以自取

界面展示

界面结构 

        本次的页面结构比较简单，Rectangle作为整体背景，一个TableView展示数据内容 

代码结构

       Rectangle作为根元素，下属三个子元素 : EBaseTableView 、Dialog 、ETableModel

        

操作展示

        数据展示

 

         修改数据

         删除数据

        添加数据

EBaseTableView

        该控件继承QtQuick.Controls 1中的TableView,对headerDelegate 、itemDelegate、rowDelegate的样式进行了自定义，具体代码如下：

EBaseTableView.qml

import QtQuick 2.13
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import Qt.labs.settings 1.0

import EUIpackage 1.0
import EControl 1.0
TableView{
    id:tableview
    frameVisible:false
    anchors.margins: 24
    signal rowHoveredChanged(var hovered,var row)
    property int currSelectedRow: -1
    headerDelegate: Rectangle{
        width: parent.width
        height: 50
        color: "white"
        Rectangle{
            width: 1
            height: 25
            color: EColor.borderColor(EColor.Border_3)
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
        }
        Rectangle{
            width: parent.width
            height: 1
            anchors.bottom: parent.bottom
            color: EColor.borderColor(EColor.Border_3)
        }
        Text {
            text: styleData.value
            color: EColor.textColor(EColor.Text_Main)
            font.pixelSize: 16
            width: parent.width
            height: contentHeight
            elide:Text.ElideRight
            anchors.left: parent.left
            anchors.leftMargin: 2
            anchors.verticalCenter: parent.verticalCenter
            font.family: EFont.textHanSansNormal
        }
    }

    rowDelegate:Rectangle{
        id:rowbg
        width: parent.width
        height: 48
        color: "transparent"
        border.width: 0
        property int currSelectedRow: tableview.currSelectedRow
        Rectangle{
            width: parent.width
            height: 1
            color: EColor.borderColor(EColor.Border_3)
            anchors.bottom: parent.bottom

        }
        onCurrSelectedRowChanged: {
            if(currSelectedRow ===styleData.row)
                rowbg.color = EColor.bgColor(EColor.BGColor_2)
            else
                rowbg.color = "transparent"
        }

        Connections{
            target: tableview
            onRowHoveredChanged:{
                if(row ===styleData.row && currSelectedRow !==styleData.row){
                    if(hovered)
                        rowbg.color = EColor.bgColor(EColor.BGColor_2)
                    else
                        rowbg.color = "transparent"
                }
            }
        }
    }

    itemDelegate: Item{
        id:itemdel
        width: parent.width
        height: 48
        clip: true
        property bool hovered: false
        onHoveredChanged: {
            tableview.rowHoveredChanged(hovered,styleData.row)
        }
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onEntered: itemdel.hovered= true
            onExited: itemdel.hovered = false
        }
        Text {
            text: styleData.value
            color: EColor.textColor(EColor.Text_Routine)
            font.pixelSize: 14
            width: parent.width
            height: contentHeight
            elide:Text.ElideRight
            anchors.verticalCenter: parent.verticalCenter
            font.family: EFont.textHanSansNormal
        }

    }
}

Dialog

        

        该弹窗是用于新增项目和修改项目填写信息使用的，由于只使用了一次就没控件化了，代码如下：

Dialog{
        id:inputdialog
        anchors.centerIn: parent
        width: parent.width/2.5
        height: parent.height/4*3
        modal: true
        closePolicy: Popup.NoAutoClose
        property bool isNew: false
        property int currSelectedRow: -1
        background: Rectangle{
            radius: 4
            anchors.fill: parent
            border.width: 1
            border.color: EColor.borderColor(EColor.Border_1)
        }
        contentItem: Item{
            anchors.fill: parent
            Text {
                id: titleText
                text: inputdialog.isNew? "添加新成员" : "修改成员信息"
                anchors.top: parent.top
                anchors.topMargin: 12
                anchors.horizontalCenter: parent.horizontalCenter
                font.family: EFont.textHanSansMedium
                font.pixelSize: 26
                color: EColor.textColor(EColor.Text_Main)
                width: contentWidth
                height: contentHeight
            }
            Column{
                id:inputColumn
                width:  parent.width-40
                anchors.top: titleText.bottom
                anchors.topMargin: 22
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 22
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "姓        名"
                    placeholderText:"请输入姓名"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "国        家"
                    placeholderText:"请输入国家名"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "城        市"
                    placeholderText:"请输入城市名"
                }

                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "出生日期"
                    placeholderText:"请输入出生日期"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "联系方式"
                    placeholderText:"请输入联系方式"
                }
            }//end columm
            EBaseBtn{
                width: 100
                height: 40
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.margins: 20
                cusText:"取消"
                onClicked: {
                    inputdialog.close()
                }
            }
            EMainBtn{
                width: 100
                height: 40
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.margins: 20
                cusText:"确定"
                onClicked: {
                    var childrenList = inputColumn.children
                    if(childrenList[0].inputText === ""){
                        dialogToast.showToast("姓名不能为空",EToast.StyleEnum.ERROR)
                        return
                    }

                    if(inputdialog.isNew){
                        var dataList = []
                        for(var i = 0;i<childrenList.length;++i){
                            dataList.push(childrenList[i].inputText)
                        }
                        DataHandleVM.insertNewRow(etablemodel,dataList)
                    }
                    else{
                        var dataObj = {}
                        for(i = 0;i<etablemodel.roles.length;++i){
                            let role = etablemodel.roles[i]
                            dataObj[role] = childrenList[i].inputText.toString()
                        }
                        DataHandleVM.setRowData(etablemodel,inputdialog.currSelectedRow,dataObj)
                    }

                    inputdialog.close()
                    inputdialog.currSelectedRow =-1
                }
            }
            EToast{
                id:dialogToast
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
            }
        }//end Dialog.contenItem
    }//end Dialog

ETableModel

        该model继承 QAbstractTableModel，然后注册到qml使用，这里写成了一个比较通用的model，复用性较高。代码如下

ECusTableModel.h

#ifndef ECUSTABLEMODEL_H
#define ECUSTABLEMODEL_H
#include <QObject>
#include <QAbstractTableModel>

class ECusTableModel : public QAbstractTableModel
{
    Q_OBJECT
    Q_PROPERTY(QStringList roles READ roles WRITE setRoles)
public:
    ECusTableModel(QObject *parent = nullptr);
    ~ECusTableModel() override;

    //继承基类的函数
    QVariant data(const QModelIndex &index, int role) const override;
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    int columnCount(const QModelIndex &parent = QModelIndex()) const override;
    QHash<int, QByteArray> roleNames() const override;
    bool setData(const QModelIndex &index, const QVariant &value, int role = Qt::EditRole) override;

    //根据行和roleNmae获取数据
    QVariant rowData(const int row,const QString roleName);
    //根据行和roleName修改数据
    bool setRowData(const int row,const QString roleName,const QVariant newValue);
    //增加行到末尾
    void insertNewRowData(QVariantList dataList);
    //删除行
    void removeRowData(int row);

    QStringList roles() const;
    void setRoles(const QStringList roles);

    void loadData(QList<QVariantList> data);
signals:
private:
    QList<QVariantList> m_data;
    QStringList m_roles;
};

#endif // ECUSTABLEMODEL_H

 ECusTableModel.cpp

#include "ECusTableModel.h"
#include <QDebug>

ECusTableModel::ECusTableModel(QObject *parent)
{
    Q_UNUSED(parent)
}

ECusTableModel::~ECusTableModel()
{
    qDebug()<<__FUNCTION__;
}

QVariant ECusTableModel::data(const QModelIndex &index, int role) const
{
    if (role == Qt::DisplayRole) {
        return m_data[index.row()].at(index.column());
    }
    else
    {
        int columnIndex = role - Qt::UserRole - 1;
        QModelIndex modelIndex = this->index(index.row(), columnIndex);
        return m_data[modelIndex.row()].at(modelIndex.column());
    }
}

int ECusTableModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent)
    return m_data.size();
}

int ECusTableModel::columnCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent)
    if(m_data.isEmpty())
        return 0;
    return m_data.at(0).size();
}

QHash<int, QByteArray> ECusTableModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    for(int i = 0;i < m_roles.size();i++)
    {
        roles[Qt::UserRole+i+1] = m_roles.at(i).toLocal8Bit();
    }
    return roles;
}

bool ECusTableModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
    if(index.isValid() && role > Qt::UserRole){
        int row = index.row();
        int column = index.column();
        m_data[row][column] = value;
        emit dataChanged(index,index);
        return  true;
    }
    return false;
}

QVariant ECusTableModel::rowData(const int row, const QString roleName)
{
    int role = roleNames().key(roleName.toUtf8());
    int column = role-Qt::UserRole-1;
    if(!this->index(row,column).isValid()){
        return false;
    }
    QVariant value = this->data(this->index(row,column),role);
    return value;
}

bool ECusTableModel::setRowData(const int row, const QString roleName, const QVariant newValue)
{
    int role = roleNames().key(roleName.toUtf8());
    int column = role-Qt::UserRole-1;
    if(!this->index(row,column).isValid()){
        return false;
    }
    bool ret = this->setData(this->index(row,column),newValue,role);
    return  ret;
}

void ECusTableModel::insertNewRowData(QVariantList dataList)
{
    beginInsertRows(QModelIndex(),rowCount(),rowCount());
    m_data.push_back(dataList);
    this->insertRow(rowCount());
    endInsertRows();
}

void ECusTableModel::removeRowData(int row)
{
    beginRemoveRows(QModelIndex(),row,row);
    m_data.removeAt(row);
    endRemoveRows();
}

QStringList ECusTableModel::roles() const
{
    return m_roles;
}

void ECusTableModel::setRoles(const QStringList roles)
{
    if(!roles.isEmpty()){
        m_roles = roles;
    }
}

void ECusTableModel::loadData(QList<QVariantList> data)
{
    beginResetModel();
    m_data = data;
    endResetModel();
}

页面整体代码

import QtQuick 2.13
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import Qt.labs.settings 1.0

import EUIpackage 1.0
import EControl 1.0

import "./"
import "../demoControl"

Rectangle{
    color: "white"
    radius: 4

    EBaseTableView{
        id:tableview
        anchors.fill: parent
        model:etablemodel
        TableViewColumn {
            role: "name";
            title: "姓名";
            width: (parent.width-50)/5
        }
        TableViewColumn {
            role: "country";
            title: "国家";
            width: (parent.width-50)/5
        }
        TableViewColumn {
            role: "city";
            title: "城市";
            width: (parent.width-50)/5
        }
        TableViewColumn {
            role: "birthday";
            title: "出生日期";
            width: (parent.width-50)/5
        }
        TableViewColumn {
            role: "contact";
            title: "联系方式";
            width: (parent.width-50)/5
        }

        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.RightButton
            onClicked: {
                tableview.currSelectedRow = tableview.rowAt(mouseX,mouseY)
                menu.popup(mouseX,mouseY)
            }
        }
        CusMenu{
            id:menu
            Action{
                text: "修改员工信息"
                icon.name: "\uf044"
                onTriggered: {
                    //打开dialog清空输入
                    let childrenList = inputColumn.children
                    let name = DataHandleVM.getRowData(etablemodel,tableview.currSelectedRow,"name")
                    for(var i = 0;i<etablemodel.roles.length;++i){
                        let value = DataHandleVM.getRowData(etablemodel,tableview.currSelectedRow,etablemodel.roles[i])
                        childrenList[i].inputText =value.toString()
                    }
                    inputdialog.currSelectedRow = tableview.currSelectedRow
                    inputdialog.isNew = false
                    inputdialog.open()
                }
            }
            Action{
                text: "删除当前员工"
                icon.name: "\uf056"
                enabled: tableview.currSelectedRow >=0
                onTriggered: {
                    DataHandleVM.removeRow(etablemodel,tableview.currSelectedRow)
                }
            }
            Action{
                text: "添加新员工"
                icon.name: "\uf055"
                onTriggered: {
                    //打开dialog清空输入
                    var childrenList = inputColumn.children
                    for(var i = 0;i<childrenList.length;++i){
                        childrenList[i].inputText =""
                    }
                    inputdialog.isNew = true
                    inputdialog.open()
                }
            }
            onVisibleChanged: {
                if(!visible)
                     tableview.currSelectedRow = -1
            }
        }
    }

    Dialog{
        id:inputdialog
        anchors.centerIn: parent
        width: parent.width/2.5
        height: parent.height/4*3
        modal: true
        closePolicy: Popup.NoAutoClose
        property bool isNew: false
        property int currSelectedRow: -1
        background: Rectangle{
            radius: 4
            anchors.fill: parent
            border.width: 1
            border.color: EColor.borderColor(EColor.Border_1)
        }
        contentItem: Item{
            anchors.fill: parent
            Text {
                id: titleText
                text: inputdialog.isNew? "添加新成员" : "修改成员信息"
                anchors.top: parent.top
                anchors.topMargin: 12
                anchors.horizontalCenter: parent.horizontalCenter
                font.family: EFont.textHanSansMedium
                font.pixelSize: 26
                color: EColor.textColor(EColor.Text_Main)
                width: contentWidth
                height: contentHeight
            }
            Column{
                id:inputColumn
                width:  parent.width-40
                anchors.top: titleText.bottom
                anchors.topMargin: 22
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 22
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "姓        名"
                    placeholderText:"请输入姓名"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "国        家"
                    placeholderText:"请输入国家名"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "城        市"
                    placeholderText:"请输入城市名"
                }

                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "出生日期"
                    placeholderText:"请输入出生日期"
                }
                CusTipInput{
                    width: parent.width
                    height: 40
                    tiptext: "联系方式"
                    placeholderText:"请输入联系方式"
                }
            }//end columm
            EBaseBtn{
                width: 100
                height: 40
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.margins: 20
                cusText:"取消"
                onClicked: {
                    inputdialog.close()
                }
            }
            EMainBtn{
                width: 100
                height: 40
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.margins: 20
                cusText:"确定"
                onClicked: {
                    var childrenList = inputColumn.children
                    if(childrenList[0].inputText === ""){
                        dialogToast.showToast("姓名不能为空",EToast.StyleEnum.ERROR)
                        return
                    }

                    if(inputdialog.isNew){
                        var dataList = []
                        for(var i = 0;i<childrenList.length;++i){
                            dataList.push(childrenList[i].inputText)
                        }
                        DataHandleVM.insertNewRow(etablemodel,dataList)
                    }
                    else{
                        var dataObj = {}
                        for(i = 0;i<etablemodel.roles.length;++i){
                            let role = etablemodel.roles[i]
                            dataObj[role] = childrenList[i].inputText.toString()
                        }
                        DataHandleVM.setRowData(etablemodel,inputdialog.currSelectedRow,dataObj)
                    }

                    inputdialog.close()
                    inputdialog.currSelectedRow =-1
                }
            }
            EToast{
                id:dialogToast
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
            }
        }//end Dialog.contenItem
    }//end Dialog

    ETableModel{
        id:etablemodel
        roles:["name","country","city","birthday","contact"]
        Component.onCompleted: {
            DataHandleVM.loadPeopelModelData(etablemodel)
        }
    }
}

DataHandleVM

        DataHadleVm是整个demo中处理业务逻辑的一个类，比如读取本地数据、加载数据、修改表格等。目的是为了使业务逻辑有统一的操作入口。在本次的人员管理的表格中，DataHandleVm中相关的业务处理函数如下，具体函数实现可以下载源码了解

源码地址

JanQuick_Demo

总结

本次分享就到这了，对你有帮助的话点个赞吧。

LongMAO丶
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
88.qt qml-TableView学习（一）
抵抗时间扭曲，坚持做一件有意义的事
05-25 2068
TableView继承于Flickable,默认支持拖拽,如果我们要设置拖拽只支持垂直的话,可以设置flickableDirection: Flickable.VerticalFlick。
qml tableview 滚动条加宽_【QML Model-View】TableView 使用
weixin_39975529的博客
12-20 1104
TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性。 它的数据也通过 Model 来提供，你可以使用 ListModel、XmlListModel，也可以使用 C++ 中从 QAbstractltemModel...
QML TableView Demo演示示例
06-09
QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。 博客介绍：https://blog.csdn.net/luoyayun361/article/details/122361571
QML学习十八：TableView的简单使用（使用C++Model)
最新发布
qq_35662333的博客
06-12 536
在QT下使用表格是想当的多，使用C++自定义Mode在TableView中显示方法和ListView操作方式类似，TableView下增加了很多表头等操作方便自定义表格。在此不涉及。本篇记录TableView显示C++的Model。
QML类型：TableView
友善啊，朋友的博客
10-16 7388
一、描述 TableView 显示从内置 QML 类型（如 ListModel 和 XmlListModel）创建的模型中的数据，这些模型仅填充 TableView 中的第一列。要创建具有多列的模型，请使用 TableModel或继承 QAbstractItemModel 的 C++ 模型。 TableView 继承了 Flickable。这意味着虽然模型可以有任意数量的行和列，但在视口内通常只能看到表格的一部分。 一旦轻弹，新的行和列就会进入视口，而旧的会退出并从视口中移除。 移出的行和列被重新用于.
QML TableView表格使用示例
luoyayun361的专栏
01-07 1万+
前言 QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。 正文 我们直接针
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的基本操作，即数据的展示和编辑。
QmlBook-In-Chinese.rar_QML教程_QmlBook-In-Chinese_qml_qml 官方教程_tal
07-14
QML结合了声明式编程和JavaScript的灵活性，使得开发人员可以轻松设计出响应式且视觉上引人入胜的应用程序。 QML的核心概念包括： 1. **声明式编程**：在QML中，UI元素及其属性是通过声明的方式定义的，而非传统的...
qml.zip_qml_qt qml_备忘录
09-19
【qml.zip_qml_qt qml_备忘录】是一个基于Qt QML技术开发的备忘录应用。QML是Qt框架的一部分，专门用于构建用户界面，它是一种声明式语言，使得UI设计变得直观且高效。这个备忘录应用的设计理念是模仿公告栏，为用户...
QML-src-ch01.rar_qml_qt qml
09-24
QML（Qt Meta Language）是Qt框架的一部分，用于构建用户界面。它是一种声明式语言，允许开发者用简洁、直观的方式定义UI元素和它们的行为。QML结合了XML的语法结构和JavaScript的动态特性，使得创建丰富的图形用户...
DMOS.rar_qml_qml 表盘_qml 仪表_udp qml_仪表QML
09-20
在本项目中，我们主要关注的是使用QML（Qt Quick Markup Language）开发的一款模拟仪表盘，它被设计用于赛车游戏的界面展示。QML是一种强大的声明式语言，用于构建具有高度交互性和动态用户界面的应用程序，尤其适用...
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
在本文中，我们将深入探讨如何在Qt框架下利用QML（Qt Quick）开发日历控件。QML是Qt提供的一种声明式语言，用于构建用户界面，它与C++结合，使得开发高效、灵活且美观的应用程序变得轻而易举。 标题"Qt-Qml-...
QT: QML TableView演示代码
FristLineCode的博客
02-03 1005
qml TableView
【QML Model-View】TableView 使用
m0_60259116的博客
03-06 1188
【QML Model-View】TableView 使用
QML学习十七：TableView的简单使用
06-18 3588
QML学习
QML TableView 自定义与使用（QtQuick.Controls 2、标题绘制）
Jane_Yih的博客
02-06 1957
QML QtQuick.Controls 2 TableView的使用，自定义TableView控件(MyTableView)，涉及model/view、表头绘制、表头冻结拖拽、表头跟随表格内容移动、表格内容显示、拖拽表头调节表格行列宽度高度、滚动条显示等功能
qt qml TableView如何设置无边框
weixin_42009376的博客
08-23 584
在上述示例中，通过自定义 `TableViewStyle` 的 `frame` 属性，将 `TableView` 的边框样式设置为透明，从而实现了无边框的效果。您可以根据需要调整颜色和其他样式属性。要在 qt QML 的 `TableView` 中设置无边框样式，您可以使用 `style` 属性来自定义 `TableViewStyle`。请注意，上述示例使用了 Qt Quick Controls 2.15 版本，如果您使用的是其他版本，请相应地进行调整。// 添加表格列和行。
TableView QML类型
aggs1990的专栏
09-24 445
提供项目的表视图，以显示模型中的数据。
div class="qml-stem"><p style=""><span style="font-family: 宋体;">读一读，猜一猜。</span></p><p style=""><span style="font-family: 宋体;">什么鸟跑得快，不爱树林爱沙漠？（<span style="font-family: 'Times New Roman'" qml-space-size="2"> </span>）</span></p><div class=" qml-og"><table class="qml-og" style="width:100%"><tr><td>A. <span class="qml-op"><span style="font-family: 宋体;">山椒鸟</span></span></td><td>B. <span class="qml-op"><span style="font-family: 宋体;">鸵鸟</span></span></td><td colspan="1">C. <span class="qml-op"><span style="font-family: 宋体;">犀鸟</span></span></td></tr></table></div></div> 这段html中使用java 正则判断是否有选项A
06-06
可以使用以下 Java 正则表达式进行匹配： ```java import java.util.regex.Matcher; import java.util.regex.Pattern; String html = "<div class=\"qml-stem\"><p style=\"\"><span style=\"font-family: 宋体;\">读一读，猜一猜。</span></p><p style=\"\"><span style=\"font-family: 宋体;\">什么鸟跑得快，不爱树林爱沙漠？（<span style=\"font-family: 'Times New Roman'\" qml-space-size=\"2\"> </span>）</span></p><div class=\" qml-og\"><table class=\"qml-og\" style=\"width:100%\"><tr><td>A. <span class=\"qml-op\"><span style=\"font-family: 宋体;\">山椒鸟</span></span></td><td>B. <span class=\"qml-op\"><span style=\"font-family: 宋体;\">鸵鸟</span></span></td><td colspan=\"1\">C. <span class=\"qml-op\"><span style=\"font-family: 宋体;\">犀鸟</span></span></td></tr></table></div></div>"; Pattern pattern = Pattern.compile("<td>A\\.\\s*<span.*?>(.*?)</span></td>"); Matcher matcher = pattern.matcher(html); if (matcher.find()) { String optionA = matcher.group(1); System.out.println(optionA); // 输出：山椒鸟 } else { System.out.println("没有选项A"); } ``` 该正则表达式的含义是匹配 `<td>` 标签中以大写字母 A 开头，以 `</td>` 结尾的内容（即选项 A）。使用 `\\s*` 匹配零个或多个空格。使用 `.*?` 匹配任意字符（包括换行符），直到后面的 `</span>` 结束标签。使用 `()` 捕获选项 A 的内容。使用 `Matcher.find()` 函数可以在字符串中搜索第一个匹配项。如果找到了匹配项，则使用 `matcher.group(1)` 获取第一个匹配的子串，即选项 A 的内容。如果没有找到匹配项，则说明没有选项 A。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值