自定义实现的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属性指定显示委托对象
如果只想显示不编辑,则设置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才能进行交互,否则会被编辑委托占用。
