在 TableView 中使用复选框 [英] Using checkboes in TableView

问题描述

我正在创建一个带有自定义委托的 TableView 以在列中包含 checkboxes，并且我在以下方面取得了一些成功:

I am creating a TableView with custom delegate to have checkboxes in the columns and I have had some success with the following:

// TableViewCheckBoxColumn.qml
import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

TableViewColumn {
    title: ""
    role: "check"
    delegate: CheckBox {
        id: checkBox
    }
}

表实现如下:

import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    anchors.centerIn: parent

    ListModel {
        id: testModel
        ListElement {
            check1: true
            check2: true
            check3: false
            check4: false
            check5: false
        }
    }

    TableView {
        anchors.centerIn: parent
        TableViewCheckBoxColumn {
            id: checkedColumn1
        }

        TableViewCheckBoxColumn {
            id: checkedColumn2
        }

        TableViewCheckBoxColumn {
            id: checkedColumn3
        }

        TableViewCheckBoxColumn {
            id: checkedColumn4
        }

        TableViewCheckBoxColumn {
            id: checkedColumn5
        }
        model: testModel
    }
}

这至少会创建 TableView，其中包含 5 列，每列带有 checkboxes.但是，我无法弄清楚如何将列的检查状态从我的 testModel 传播到 TableView.

This, at least, creates the TableView with the 5 columns with checkboxes in each of them. However, I cannot figure out how to propagate the checked statuses of the columns from my testModel to the TableView.

推荐答案

好的，首先你需要匹配列的角色属性和模型的属性.然后，您可以使用属性styleData"访问该属性的值.价值'

Ok first you need to match the role property of the columns with the property of the the model. Then you can access to the value of the property using the property 'styleData. value'

ListModel {
    id: testModel

    ListElement {
        check1: true
        check2: true
        check3: false
        check4: false
        check5: false
    }
}


TableView {
    width: 1000; height: 500

    anchors.centerIn: parent
    TableViewColumn {
        role: "check1"

        delegate: CheckBox {
            checked: styleData.value
        }
    }

    TableViewColumn {
        role: "check2"

        delegate: CheckBox {
            checked: styleData.value
        }
    }

    TableViewColumn {
        role: "check3"

        delegate: CheckBox {
            checked: styleData.value
        }
    }

    TableViewColumn {
        role: "check4"

        delegate: CheckBox {
            checked: styleData.value
        }
    }

    TableViewColumn {
        role: "check5"

        delegate: CheckBox {
            checked: styleData.value
        }
    }

    model: testModel
}

这样更好:

TableView {
    width: 1000; height: 500

    anchors.centerIn: parent
    TableViewColumn {
        role: "check1"
    }

    TableViewColumn {
        role: "check2"
    }

    TableViewColumn {
        role: "check3"
    }

    TableViewColumn {
        role: "check4"
    }

    TableViewColumn {
        role: "check5"
    }

    model: testModel

    itemDelegate: CheckBox {
        checked: styleData.value
    }
}

这篇关于在 TableView 中使用复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！