如何在TableView里面实现全选功能？

我实现了一个TableView，
其中第一列是一个CheckBox
TableViewColumn {
                role :""
                title: ""
                width: 90
                delegate: Rectangle {
                    CheckBox {
                        anchors.centerIn: parent;
                        Connections {
                            target: alarmTable.headerRect.checkForAll;
                            onAllCheckChanged: {
                                console.log("---haha");
                            }
                        }
                }
            }

然后在TableView的headerDelegate里面实现表格头部第一列也是一个CheckBox:
headerDelegate: Rectangle {
                id: headerRect;
                height: 60
                color: "#B7B7B7"

                CheckBox {
                    id: checkForAll;
                    anchors.centerIn: parent;
                    visible: styleData.column === 0;

                    property bool myPressed: styleData.pressed;
                    onMyPressedChanged: {
                        if (myPressed) {
                            checked = !checked;
                        }
                    }
                }

                Text {
                    id: textItem
                    anchors.centerIn: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: styleData.textAlignment
                    anchors.leftMargin: 12
                    text: styleData.value
                    font.pixelSize: 20
                    elide: Text.ElideMiddle
                    color: "#333333"
                    renderType: Text.NativeRendering
                }
            }

我想在点击表头中checkForAll的时候，把表格中每一行的CheckBox都勾上，但是现在遇到困难：
1. 直接的办法就是找到每一个CheckBox把checked置为true，但是没有找到办法，可以遍历TableView中的每一行，然后取到其中的CheckBox控件；

2. 想用signal/slot的方法，但是在TableViewColumn中的CheckBox中绑定checkForAll的信号的时候，总是提示：
QML Connections: Cannot assign to non-existent property "onAllCheckChanged"
ReferenceError: checkForAll is not defined

请问这有什么好的处理办法吗？多谢。

expressw

2018-01-22 17:43

找到办法了：

数据model是在C++中定义的，model里面增加一个属性checked;
列的role设置为模式中的checked；
列的checkbox响应点击事件，同步修改model中的checked标记：
TableViewColumn {
                role :"checked"
                title: ""
                width: 90
                delegate: Rectangle {

                    CheckBox {
                        id: rowCheck;
                        anchors.centerIn: parent;
                        checked: styleData.value;
                        onPressed: {
                            alarmModel.setRowCheckState(styleData.row, !checked);
                        }
                    }

                }
            }

然后在表头的checkbox onMyPressedChanged事件里面，增加处理，把每一行的checked都同步设置就可以了。

kettong

2019-02-21 20:02

你好，我header的信号点击出发四次怎么回事啊？

headerDelegate: Item {
                height: 20
                anchors.left: parent.left
                anchors.right: parent.right

                CheckBox {
                    id: activateAllEvents
                    anchors.centerIn: parent

                    property bool myPressed: styleData.pressed
                    checked: true
                    visible: styleData.column === 4 // Show only in the 4th column
                    activeFocusOnPress: true
                    text: ""
                    onMyPressedChaged: {
                        if(myPressed)
                            checked = !checked;
                    }
                }
            }

查看完整版本: [-- 如何在TableView里面实现全选功能？ --] [-- top --]

Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled