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: 14implicitWidth: 103implicitHeight: 28font.family: "Microsoft Yahei"onTriggered: {table.columnfixedEnable = truetable.columnfixedNum = table.headerMenuColumnIdx + 1}}MenuItem {text: "← 左侧插入新列"font.pixelSize: 14implicitWidth: 103height: visible ? 28 : 0visible: table.headerMenuColumnIdx != 0font.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: 14implicitWidth: 103height: visible ? 28 : 0visible: table.headerMenuColumnIdx != table.headers.length-1font.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: 14implicitWidth: 103implicitHeight: 28font.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: 14implicitWidth: 103implicitHeight: 28font.family: "Microsoft Yahei"onTriggered: {// ...}}}

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

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

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

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

如果只想显示不编辑,则设置customEditEnable属性为false即可，customEditEnable默认为true。

如果我们需要设置为自定义显示委托,则设置cellDelegateType属性为CellDelegateTypeCustom，并给cellDelegateCustomShowItem属性设置一个基于Item子类的显示委托即可。

Table给显示委托提供了多个附加属性,常用的如下所示：

• modeldata: key或者keys对应的数据
• rowIdx: 行号
• columnIdx: 列号

6.重点概要

如果设置cellDelegateType属性为CellDelegateTypeCustom,并且customEditEnable为true时，假如未设置cellDelegateCustomEditItem编辑委托对象,那么编辑时默认为文本方式，可以参考Table组件界面下的成绩列：

如果我们想要设置显示为内置委托,编辑时为自定义委托，则设置cellDelegateCustomEditItem编辑委托对象即可,可以参考Table组件界面下的姓名列：

如果我们想设置编辑委托是一个弹出型窗口,设置cellDelegateCustomEditItem编辑委托对象的同时,还需要设置cellEditHideCellDelegateShowLayer为false,否则编辑时会自动隐藏掉显示委托,可以参考Table组件界面下的日期列：

如果我们编辑的内容需要进行审核确认,可以设置customEditConfirmCallback属性,比如Table组件界面下的成绩列限制用户只能输入0~100的值,对应的代码如下所示:

如果cellDelegateCustomShowItem显示委托属性是个交互性控件(比如是个button),那么我们需要设置customEditEnable为false才能进行交互,否则会被编辑委托占用。