QML TableView從特定單元格中獲取數據（選定行+特定列）

Question

我有QML TableView和QSqlQueryModel。我需要選擇任意行並從表格的每一列中獲取數據以分開TextField。

這裏是abonentstable.h：

#pragma once 

#include <QObject> 
#include <QSqlQueryModel> 

class AbonentsSqlModel : public QSqlQueryModel 
{ 
    Q_OBJECT 

public: 
    explicit AbonentsSqlModel(QObject *parent = 0); 

    void setQuery(const QString &query, const QSqlDatabase &db = QSqlDatabase()); 
    QVariant data(const QModelIndex &index, int role) const; 
    QHash<int, QByteArray> roleNames() const { return m_roleNames; } 

private: 
    void generateRoleNames(); 
    QHash<int, QByteArray> m_roleNames; 
}; 

abonentstable.cpp：

#include "abonentstable.h" 

#include <QSqlRecord> 
#include <QSqlField> 

AbonentsSqlModel::AbonentsSqlModel(QObject *parent) : QSqlQueryModel(parent) 
{ 
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 
    db.setDatabaseName("data_base.sqlite"); 
    db.open(); 
} 

void AbonentsSqlModel::setQuery(const QString &query, const QSqlDatabase &db) 
{ 
    QSqlQueryModel::setQuery(query, db); 
    generateRoleNames(); 
} 

void AbonentsSqlModel::generateRoleNames() 
{ 
    m_roleNames.clear(); 
    for(int i = 0; i < record().count(); i ++) { 
     m_roleNames.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8()); 
    } 
} 

QVariant AbonentsSqlModel::data(const QModelIndex &index, int role) const 
{ 
    QVariant value; 

    if(role < Qt::UserRole) { 
     value = QSqlQueryModel::data(index, role); 
    } 

    else { 
     int columnIdx = role - Qt::UserRole - 1; 
     QModelIndex modelIndex = this->index(index.row(), columnIdx); 
     value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole); 
    } 

    return value; 
} 

Table.qml：

TableView { 
    id: table 

    model: abonents 

    .... 

    TableViewColumn { 
     delegate: Text { 
      text: " " + model.name + " " + model.surname 
      font.pointSize: 20 
     }  
     width: 575 
    } 

    TableViewColumn { 
     delegate: Text { 
      text: " " + model.phone 
      font.pointSize: 20 
     }  
     width: 575 
    } 

    TableViewColumn { 
     delegate: Text { 
      text: " " + model.ip_address 
      font.pointSize: 20 
     }  
     width: 525 
    } 
} 

和一些文字字段：

TextField { 
    id: leftText 
} 

TextField { 
    id: centerText 
} 

TextField { 
    id: rightText 
} 

這個sqlite表有4列，我需要從選定的行中獲取數據到這些文本字段：左2列，中心1和右1。

Answer 1

當用戶點擊一個有效的行時，它會發出clicked(int row)信號。然後，您可以獲取row的值，根據您的要求設置文本的格式，並將值設置爲三個TextField。例如，你的情況：

TableView { 
    id: table 

    model: abonents 

    ... (your TableViewColumn components) ...  

    onClicked: { 
     leftText.text = abonents.get(row).name + " " + libraryModel.get(row).surname; 
     centerText.text = abonents.get(row).phone; 
     rightText.text = abonents.get(row).ip_address; 
    } 
} 

請讓我請用我的own answer向您展示一個完整的例子：

import QtQuick 2.2 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 

ApplicationWindow { 
    id: window 
    visible: true 
    title: "Table View Example" 

    TableView { 
     y: 70 
     width: 500 

     TableViewColumn { 
      role: "title" 
      title: "Title" 
      width: 100 
     } 
     TableViewColumn { 
      role: "author" 
      title: "Author" 
      width: 100 
     } 

     TableViewColumn{ 
      width: 300 
      delegate: Text { 
       text: model.title + " " + model.author 
       font.family: "Courier New" 
       font.pixelSize: 18 
       color: "red" 
      } 
     } 

     onClicked: { 
      leftText.text = libraryModel.get(row).title + " " + libraryModel.get(row).author; 
      centerText.text = libraryModel.get(row).title; 
      rightText.text = libraryModel.get(row).author; 
     } 

     model: libraryModel 

     ListModel { 
      id: libraryModel 
      ListElement { 
       title: "A Masterpiece" 
       author: "Gabriel" 
      } 
      ListElement { 
       title: "Brilliance" 
       author: "Jens" 
      } 
      ListElement { 
       title: "Outstanding" 
       author: "Frederik" 
      } 
     } 
    } 

    TextField { 
     id: leftText 
    } 

    TextField { 
     id: centerText 
     anchors.left: leftText.right 
    } 

    TextField { 
     id: rightText 
     anchors.left: centerText.right 
    } 
}