在QML TableView中单击时编辑数据(如excel)

时间:2014-05-25 14:07:19

标签: qt qml qt5 qt5.2

我有一些代码

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2

Window {
    visible: true
    width: 538
    height: 360
ToolBar {
    id: toolbar
    width: parent.width

    ListModel {
        id: delegatemenu
        ListElement { text: "Shiny delegate" }
        ListElement { text: "Scale selected" }
        ListElement { text: "Editable items" }
    }

    ComboBox {
        id: delegateChooser
        model: delegatemenu
        width: 150
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.verticalCenter: parent.verticalCenter
    }
}

ListModel {
    id: largeModel
    Component.onCompleted: {
        for (var i=0 ; i< 50 ; ++i)
            largeModel.append({"name":"Person "+i , "age": Math.round(Math.random()*100), "gender": Math.random()>0.5 ? "Male" : "Female"})
    }
}


Item {
    anchors.fill: parent

    Component {
        id: editableDelegate
        Item {

            Text {
                width: parent.width
                anchors.margins: 4
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                elide: styleData.elideMode
                text: styleData.value !== undefined ? styleData.value : ""
                color: styleData.textColor
                visible: !styleData.selected
            }
            Loader { 
                id: loaderEditor
                anchors.fill: parent
                anchors.margins: 4
                Connections {
                    target: loaderEditor.item
                    onAccepted: {
                        if (typeof styleData.value === 'number')
                            largeModel.setProperty(styleData.row, styleData.role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
                        else
                            largeModel.setProperty(styleData.row, styleData.role, loaderEditor.item.text)
                    }
                }
                sourceComponent: styleData.selected ? editor : null
                Component {
                    id: editor
                    TextInput {
                        id: textinput
                        color: styleData.textColor
                        text: styleData.value
                        MouseArea {
                            id: mouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: textinput.forceActiveFocus()
                        }
                    }
                }
            }
        }
    }
    TableView {
        model: largeModel
        anchors.margins: 12
        anchors.fill:parent

        TableViewColumn {
            role: "name"
            title: "Name"
            width: 120
        }
        TableViewColumn {
            role: "age"
            title: "Age"
            width: 120
        }
        TableViewColumn {
            role: "gender"
            title: "Gender"
            width: 120
        }


            itemDelegate: {
                return editableDelegate;
            }
        }
    }
}

为什么当我点击并编辑数据时,有时我的更改无法保存? 也许有人有我的问题或代码的解决方案?我只想简单编辑表格(如Excel)。谢谢你的答复。

2 个答案:

答案 0 :(得分:0)

应该在onEditingFinished中实施

onAccepted处理程序,而不是Connections { target: loaderEditor.item ... }处理程序。使用onAccepted处理程序时,仅在按下Enter键时才会保存更改。

引自documentation

  

accepted()

     

按下Return或Enter键时会发出此信号。注意   如果在文本输入上设置了验证器或inputMask,则   只有在输入处于可接受状态时才会发出信号。

     

相应的处理程序是onAccepted。在原始变体中   更改仅保存

P.S。有必要澄清原始代码可以找到here

答案 1 :(得分:0)

@ artyom.stv是对的。我将在这里总结一下: 只使用onEditingFinished()并在此函数中使用ListModel.set(index,{property:value})来实际设置该单元格的值,然后保存您的更改。

阅读如何使用ListModel.set:QML ListModel.set