102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程

自定义实现的Table控件，支持跨qt版本，兼容qt5,qt6！

截图如下所示:

黑色风格如下所示：

视频演示入口：Qt QML QianWindowV2.5(新增曲线综合示例、QML最全Table交互示例、支持qt5/qt6)_哔哩哔哩_bilibili

1.示例页面入口

源码已更新至QianWindow2.5版本中，位于Table交互分页里,如下图所示：

分页界面实现位于pages/QianTableTestPages/QianTableEditPage.qml,如下图所示：

2.Table新增属性-多列固定

多列固定用到columnfixedEnable使能属性和columnfixedNum固定列数属性，假如columnfixedEnable为true, columnfixedNum为3则表示固定前3列表头。

3.Table新增属性-行列拖拽

行列拖拽相关属性如下所示：

rowDragEnable: bool, 行拖拽使能,如果为false,则无法进行拖拽,并且行拖拽图标也不会显示
rowDragWidth, int, 行拖拽图标的宽度,一般默认值即可
rowDragIndex, int, 行拖拽索引号,未拖拽时的值为-1,如果正在拖拽则会实时更新值
columnDragEnable: bool, 列拖拽使能
columnDragIndex, int, 列拖拽索引号,未拖拽时的值为-1,如果正在拖拽则会实时更新值
columnDragStretchIndex: int, 列伸展索引号，比如对某列进行拉伸,未拖拽时的值为-1
dragContentBackColor: color, 拖拽源对象的背景色。
dragLineColor: color, 拖拽到目标位置的提示线颜色
signal rowDragMoved(int preRow, int crtRow) : 行拖拽信号,preRow是拖拽目标之前的行号, ctrRow是拖拽目标当前的行号

4.Table新增属性-标题菜单栏

标题菜单栏属性为headerMenu，当用户右击时就会调用headerMenu显示，并设置headerMenuColumnIdx为对应点击所在的列号

示例界面如下所示：

对应代码如下所示：

             headerMenu: Menu {
                id: _headerMenuContent 

                MenuItem {
                    text: "    表头固定至此列"
                    font.pixelSize: 14
                    implicitWidth: 103
                    implicitHeight: 28
                    font.family: "Microsoft Yahei"
                    onTriggered: {
                        table.columnfixedEnable = true
                        table.columnfixedNum = table.headerMenuColumnIdx + 1

                    }
                }

                MenuItem {
                    text: "← 左侧插入新列"
                    font.pixelSize: 14
                    implicitWidth: 103
                    height: visible ? 28 : 0
                    visible: table.headerMenuColumnIdx != 0
                    font.family: "Microsoft Yahei"
                    onTriggered: {
                        if (tableHeaderComp.status != Component.Ready) {
                            message('info', "加载失败：" + tableHeaderComp.errorString())
                            return;
                        }

                        let i = _headerMenuContent.getValidReserveColumnIdx();
                        if(i < 0) {
                            message('info', "已超出最大支持扩展")
                            return;
                        }
                       // ...

                        
                    }
                }
                MenuItem {
                    text: "→ 右侧插入新列"
                    font.pixelSize: 14
                    implicitWidth: 103
                    height: visible ? 28 : 0
                    visible: table.headerMenuColumnIdx != table.headers.length-1
                    font.family: "Microsoft Yahei"
                    onTriggered: {
                        if (tableHeaderComp.status != Component.Ready) {
                            message('info', "加载失败：" + tableHeaderComp.errorString())
                            return;
                        }

                        let i = _headerMenuContent.getValidReserveColumnIdx();
                        if(i < 0) {
                            message('info', "已超出最大支持扩展")
                            return;
                        }

                        //...
                    }
                }

                MenuItem {
                    text: "    重命名标题"
                    font.pixelSize: 14
                    implicitWidth: 103
                    implicitHeight: 28
                    font.family: "Microsoft Yahei"
                    onTriggered: {

                        let target = table.headers[table.headerMenuColumnIdx]

                        skinQianInputDialog.dialogOpen(`更改标题:`, table.headers[table.headerMenuColumnIdx].display, function(defaultInputText, text) {
                            if(!text.length) {
                                message('info', "更改标题不能为空");
                                return;
                            }
                            if(defaultInputText == text) {
                                return;
                            }
                            target.display = text
                        })

                    }
                }

                MenuItem {
                    text: "✕ 删除该列"
                    font.pixelSize: 14
                    implicitWidth: 103
                    implicitHeight: 28
                    font.family: "Microsoft Yahei"
                    onTriggered: {
                        // ...
                    }
                }
            }

5.单元格委托内置委托使用

每行每列对应某个数据都称为一个个单元格,由于Table每列的显示委托和编辑委托往往是一样的，所以最新Table的单元格委托存在TableHeader标题列类中。

内置委托相关属性介绍如下所示：

cellDelegateType: enum CellDelegateType,单元格委委托, 默认为文本委托,其它值如下所示：
- CellDelegateTypeText 文本委托,如下图所示：
- CellDelegateTypeColorComboBox 带颜色下拉框委托，如下图所示：
- CellDelegateTypeUsersComboBox 多用户下拉框委托,如下图所示：
- CellDelegateTypeCalendar 日期日历委托,如下图所示：
- CellDelegateTypeTime 时间委托,如下图所示:
- CellDelegateTypeCustom 自定义委托,如果设置为CellDelegateTypeCustom,则需要设置cellDelegateCustomShowItem属性指定显示委托对象