宣城公司网站建设,石家庄网站开发公司电话,做照片用的视频模板下载网站,校园网站建设价格自定义实现的Table控件#xff0c;支持跨qt版本#xff0c;兼容qt5,qt6#xff01;
截图如下所示: 黑色风格如下所示#xff1a; 视频演示入口#xff1a;Qt QML QianWindowV2.5(新增曲线综合示例、QML最全Table交互示例、支持qt5/qt6)_哔哩哔哩_bilibili 1.示例页面入口…自定义实现的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, 列伸展索引号比如对某列进行拉伸,未拖拽时的值为-1dragContentBackColor: 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 YaheionTriggered: {table.columnfixedEnable truetable.columnfixedNum table.headerMenuColumnIdx 1}}MenuItem {text: ← 左侧插入新列font.pixelSize: 14implicitWidth: 103height: visible ? 28 : 0visible: table.headerMenuColumnIdx ! 0font.family: Microsoft YaheionTriggered: {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 YaheionTriggered: {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 YaheionTriggered: {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 YaheionTriggered: {// ...}}} 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才能进行交互,否则会被编辑委托占用。
