Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Tableview: How to correlate checkbox click and table selection



  • I use TableView,listmodel,itemdelegate,rowdelegate and headerdelegate to create a table. The first column is checkbox. There is a question: when I click checkbox, the corresponding row won't be selected;and when i click one row, the corresponding checkbox won't be selected. I want to correlate (synchronize) checkbox click and table selection.

    Code:

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.2
    import QtQuick.LocalStorage 2.0
    import "Database.js" as JS

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Table")

    Rectangle{
        id: root
        //anchors.fill: parent
        width:600
        height:300
        anchors.centerIn:parent
    
        property var background: "#d7e3bc"
        property var alterBackground: "white"
        property var highlight: "#e4f7d6"
        property var normalG: Gradient{
            GradientStop{position: 0.0; color: "#c7d3ac"}
            GradientStop{position: 1.0; color: "#F0F0F0"}
        }
        property var hoverG: Gradient{
            GradientStop{position: 0.0; color: "white"}
            GradientStop{position: 1.0; color: "#d7e3bc"}
        }
        property var pressG: Gradient{
            GradientStop{position: 0.0; color: "#d7e3bc"}
            GradientStop{position: 1.0; color: "white"}
        }
    
        TableView{  //定义table的显示,包括定制外观
            id: studyBrowserTable
            anchors.fill: parent
            focus: true
            selectionMode: SelectionMode.MultiSelection
    

    // onSelectionChanged: {

    // studyBrowserTable.selection.forEach( function(rowIndex) { } )
    // //studyBrowserTable.currentRow
    // }

            TableViewColumn {
                id:checkcolumn1
                role: "check"
                title: ""
                width:50
                delegate: Item {
    
                    anchors.fill: parent
                    CheckBox {
                        id:checkbox
                        //anchors.fill:parent
    
                        anchors.centerIn: parent
                        checked: true
    

    // onClicked: {

    // }

                    }
                }
            }
    
            TableViewColumn{role: "patiendID"; title: "Patiend ID"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "patientName"; title: "Patient Name"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "dob";title: "DOB"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "sex";title: "Sex"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "scanningTime";title: "Scanning Time"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "examStatus";title: "Exam Status"; width: 100; elideMode: Text.ElideRight;}
            TableViewColumn{role: "dicomExportStatus";title: "DICOM Exported Status"; width: 150; elideMode: Text.ElideRight;}
            TableViewColumn{role: "importedTime";title: "Imported Time"; width: 100; elideMode: Text.ElideRight;}
    
            itemDelegate: Rectangle{
                id:itemdelegate
    
                border.color: "black"
                border.width: 1
                color: styleData.selected? root.highlight :"white"
                Text{
                    anchors.centerIn : parent
                    text: styleData.value
                    color: styleData.selected ? "red" : "black"
                    elide: Text.ElideRight
            }
    
    
    
            }
    
    
            rowDelegate: Rectangle{
                height: 40
                border.color: "black"
                border.width: 1
    

    // MouseArea {
    // anchors.fill: parent
    // onClicked: studyBrowserModel.setProperty(studyBrowserTable.selection, "check", checkbox.checked=!(checkbox.checked) )
    // }

            }
    
            headerDelegate: Rectangle{
                implicitWidth: 100
                implicitHeight: 40
                border.color: "black"
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: styleData.value
                    color: styleData.pressed ?"red" : "blue"
                    font.bold: true
                }
            }//header delegate is end
    
            model: ListModel{
                id: studyBrowserModel
                Component.onCompleted: JS.dbReadAll()
                }//listmodel is end
    
        }
    
        Row{
            id:buttonGroup
            anchors.top:root.bottom
            anchors.topMargin: 20
            anchors.horizontalCenter: root.horizontalCenter
            spacing:80
    
    
            Button{
                id:read
                Text{
                    text:"Read"
                    anchors.centerIn: parent
    
                }
                onClicked:{
                    JS.dbInit()
                    JS.dbReadAll()
                }
            }
            Button{
                id:remove
                Text{
                    text:"Remove"
                    anchors.centerIn: parent
                }
    
                onClicked: {
    

    // JS.dbDeleteRow(studyBrowserTable.model.get(studyBrowserTable.currentRow).id)
    studyBrowserTable.model.remove(studyBrowserTable.currentRow, 1)
    if (studyBrowserTable.rowCount == 0) {
    // ListView doesn't automatically set its currentIndex to -1
    // when the count becomes 0.
    studyBrowserTable.currentRow = -1
    }
    }
    }
    Button{
    id:save
    Text{
    text:"Save"
    anchors.centerIn: parent
    }
    }
    Button{
    id:clear
    Text{
    text:"Clear"
    anchors.centerIn: parent
    }
    onClicked:{
    studyBrowserModel.clear()
    }
    }

        }
    }
    

    }

    The current result is showed in the following picture:0_1566466374706_result.png

    And what I want is:
    0_1566466482919_result1.png

    I'd appreciate it very much if someone can give me some suggestions.


Log in to reply