当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 23:38:24

自定义实现的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;}var dynamicObject =  tableHeaderComp.createObject(table,{ display: `文本 ${i}`,tableContainer: table,key: "reserveColumn"+i ,width: 98,miniWidth: 98 } );var arrAsArray = Array.from(table.headers);arrAsArray.splice(table.headerMenuColumnIdx,0, dynamicObject);table.headers = arrAsArray;}}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;}var dynamicObject =  tableHeaderComp.createObject(table,{ display: `文本 ${i}`,tableContainer: table,key: "reserveColumn"+i ,width: 98,miniWidth: 98 } );var arrAsArray = Array.from(table.headers);arrAsArray.splice(table.headerMenuColumnIdx+1,0, dynamicObject);table.headers = arrAsArray;}}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: {var arrAsArray = Array.from(table.headers);arrAsArray.splice(table.headerMenuColumnIdx,1);table.headers = arrAsArray;}}}

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

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

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

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