QML Tableview: How to correlate checkbox click and table selection

[BigChuang]

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:

And what I want is:

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