与自定义代表的TableView编辑QstandardEmmodel

Question

我有一个通过qml表视图显示的qstandarditemmodel。

这是模型：

class mystandardmodel: public QStandardItemModel
{
public:
    mystandardmodel();
    enum Role {
         role1=Qt::UserRole,
         role2
     };
     explicit mystandardmodel(QObject * parent = 0): QStandardItemModel(parent){}
     //explicit mystandardmodel( int rows, int columns, QObject * parent = 0 )
     //    : QStandardItemModel(rows, columns, parent){}
     QHash<int, QByteArray> roleNames() const{
          QHash<int, QByteArray> roles;
          roles[role1] = "one";
          roles[role2] = "two";
          return roles;
 }
};

这就是使用自定义代表显示模型的方式：

    TableView {
        id: tableView2
        x: 69
        y: 316
        width: 318
        height: 150
        TableViewColumn {
            title: "Parameter Name"
            role: "one"
        }
        TableViewColumn {
            title: "Value"
            role: "two"
            delegate: myDelegate
        }
        model: myTestModel
    }
    Component {
        id: myDelegate
        Loader {
            property var roleTwo: model.two
            sourceComponent: if(typeof(roleTwo)=='boolean') {
                                 checkBoxDelegate}
                             else { stringDelegate}
        }
    }
    Component {
        id: checkBoxDelegate
        CheckBox{text: roleTwo}
    }
    Component {
        id: stringDelegate
        TextEdit {text: roleTwo}
    }

我填充了这样的模型：

 mystandardmodel* mysmodel=new mystandardmodel(0);
 QStandardItem* it = new QStandardItem();
 it->setData("data1", mystandardmodel::role1);
 it->setData(true, mystandardmodel::role2);
 it->setCheckable(true);
 it->setEditable(true);
 mysmodel->appendRow(it);
 QStandardItem* it2 = new QStandardItem();
 it2->setData("data2",mystandardmodel::role1);
 it2->setData("teststring",mystandardmodel::role2);
 mysmodel->appendRow(it2);

如何使模型可编辑，以便使用复选框或编辑文本转移回模型？

编辑：我尝试按照QML tableview中的建议遵循建议，然后单击编辑数据(如Excel(并使用集合模型：

Component {
    id: myDelegate
    Loader {
        property var roleTwo: model.two
        property int thisIndex: model.index
        sourceComponent: if(typeof(roleTwo)=='boolean') {
                             checkBoxDelegate}
                         else { stringDelegate}
    }
}
Component {
    id: checkBoxDelegate
    CheckBox{text: roleTwo
        onCheckedChanged: {
            myTestModel.setData(0,"two",false)
            console.log('called',thisIndex)
        }
    }
}
Component {
    id: stringDelegate
    TextEdit {text: roleTwo
        onEditingFinished: {
            myTestModel.setData(thisIndex,"two",text)
           console.log('called',thisIndex)
        }
    }
}

索引还可以，但是似乎没有效果(我添加了使用同一模型的第二个tableView，但是如果我在第一个tableview中进行编辑，那里的数据不会更新(

(

Answer 1

您可以将值直接设置为model.two，并且将自动调用setData，并以正确的角色和索引：

import QtQuick 2.10
import QtQuick.Controls 2.0 as QQC2
import QtQuick.Controls 1.4 as QQC1
import QtQuick.Layouts 1.3
QQC2.ApplicationWindow {
    visible: true
    width: 640
    height: 480
    ColumnLayout {
        anchors.fill: parent
        Repeater {
            model: 2
            QQC1.TableView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                QQC1.TableViewColumn {
                    title: "Parameter Name"
                    role: "one"
                }
                QQC1.TableViewColumn {
                    title: "Value"
                    role: "two"
                    delegate: Loader {
                        property var modelTwo: model.two
                        sourceComponent: typeof(model.two) ==='boolean' ? checkBoxDelegate : stringDelegate
                        function updateValue(value) {
                            model.two = value;
                        }
                    }
                }
                model: myModel
            }
        }
    }
    Component {
        id: checkBoxDelegate
        QQC1.CheckBox {
            text: modelTwo
            checked: modelTwo
            onCheckedChanged: {
                updateValue(checked);
                checked = Qt.binding(function () { return modelTwo; }); // this is needed only in QQC1 to reenable the binding
            }
        }
    }
    Component {
        id: stringDelegate
        TextEdit {
            text: modelTwo
            onTextChanged: updateValue(text)
        }
    }
}

，如果它仍然太冗长而对您的声明不足(对我来说(，您可以使用以下内容，其中大多数逻辑都在Loader中该值应设置并从以下方式更新：

delegate: Loader {
    id: loader
    sourceComponent: typeof(model.two) ==='boolean' ? checkBoxDelegate : stringDelegate
    Binding {
        target: loader.item
        property: "editProperty"
        value: model.two
    }
    Connections {
        target: loader.item
        onEditPropertyChanged: model.two = loader.item.editProperty
    }
}
//...
Component {
    id: checkBoxDelegate
    QQC1.CheckBox {
        id: checkbox
        property alias editProperty: checkbox.checked
        text: checked
    }
}
Component {
    id: stringDelegate
    TextEdit {
        id: textEdit
        property alias editProperty: textEdit.finishedText // you can even use a custom property
        property string finishedText
        text: finishedText
        onEditingFinished: finishedText = text
    }
}

Answer 2

使用 setData()可能是一个选项，但是它需要一个整数值，以指示在qml中无法访问的角色，或者不优雅。

一个更好的选择是创建一个新的Q_INVOKABLE。正如视图中给出的更新一样，除了引起奇怪事件外，没有必要通知它。

要获得该行，我们使用几何形状和TableView的rowAt()方法。

以下是一个示例：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QStandardItemModel>
class MyStandardModel: public QStandardItemModel
{
    Q_OBJECT
public:
    enum Role {
        role1=Qt::UserRole+1,
        role2
    };
    using QStandardItemModel::QStandardItemModel;
    QHash<int, QByteArray> roleNames() const{
        QHash<int, QByteArray> roles;
        roles[role1] = "one";
        roles[role2] = "two";
        return roles;
    }
    Q_INVOKABLE void updateValue(int row, QVariant value, const QString &roleName){
        int role = roleNames().key(roleName.toUtf8());
        QStandardItem *it = item(row);
        if(it){
            blockSignals(true);
            it->setData(value, role);
            Q_ASSERT(it->data(role)==value);
            blockSignals(false);
        }
    }
};
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    MyStandardModel model;
    for(int i=0; i< 10; i++){
        auto item = new QStandardItem;
        item->setData(QString("data1 %1").arg(i), MyStandardModel::role1);
        if(i%2 == 0)
            item->setData(true, MyStandardModel::role2);
        else {
            item->setData(QString("data2 %1").arg(i), MyStandardModel::role2);
        }
        model.appendRow(item);
    }
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("myTestModel", &model);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}
#include "main.moc"

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    TableView {
        id: tableView2
        anchors.fill: parent
        TableViewColumn {
            title: "Parameter Name"
            role: "one"
        }
        TableViewColumn {
            title: "Value"
            role: "two"
            delegate: myDelegate
        }
        model: myTestModel
    }
    Component {
        id: myDelegate
        Loader {
            property var roleTwo: model.two
            sourceComponent: typeof(roleTwo)=='boolean'? checkBoxDelegate: stringDelegate
        }
    }
    Component {
        id: checkBoxDelegate
        CheckBox{
            checked: roleTwo
            onCheckedChanged:{
                var pos = mapToGlobal(0, 0)
                var p = tableView2.mapFromGlobal(pos.x, pos.y)
                var row = tableView2.rowAt(p.x, p.y)
                if(row >= 0)
                    myTestModel.updateValue(tableView2.row, checked, "two")
            }
        }
    }
    Component {
        id: stringDelegate
        TextField {
            text: roleTwo
            onEditingFinished: {
                var pos = mapToGlobal(0, 0)
                var p = tableView2.mapFromGlobal(pos.x, pos.y)
                var row = tableView2.rowAt(p.x, p.y)
                if(row >= 0)
                    myTestModel.updateValue(tableView2.row, text, "two")
            }
        }
    }
}

完整的示例可以在以下链接中找到。