FluentUI/example/qml-Qt6/page/T_TableView.qml

588 lines
19 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
2024-01-25 17:26:50 +08:00
import "../component"
2023-08-24 15:50:37 +08:00
FluContentPage{
2023-09-28 14:41:24 +08:00
id:root
2023-08-24 15:50:37 +08:00
title:"TableView"
2023-09-28 14:41:24 +08:00
signal checkBoxChanged
2023-08-24 15:50:37 +08:00
2023-10-01 14:59:35 +08:00
property var dataSource : []
property int sortType: 0
2024-03-01 00:19:12 +08:00
property bool seletedAll: true
2024-03-01 23:24:03 +08:00
property string nameKeyword: ""
onNameKeywordChanged: {
table_view.filter(function(item){
if(item.name.includes(nameKeyword)){
return true
}
return false
})
}
2023-10-01 14:59:35 +08:00
2023-08-24 15:50:37 +08:00
Component.onCompleted: {
loadData(1,1000)
}
2024-03-01 00:19:12 +08:00
onCheckBoxChanged: {
for(var i =0;i< table_view.rows ;i++){
if(false === table_view.getRow(i).checkbox.options.checked){
root.seletedAll = false
return
}
}
root.seletedAll = true
}
2023-10-01 14:59:35 +08:00
onSortTypeChanged: {
table_view.closeEditor()
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
2024-03-01 23:24:03 +08:00
table_view.sort(
(l, r) =>{
var lage = Number(l.age)
var rage = Number(r.age)
if(lage === rage){
return l._key>r._key
}
return lage>rage
});
2023-10-01 14:59:35 +08:00
}else if(sortType === 2){
2024-03-01 23:24:03 +08:00
table_view.sort(
(l, r) => {
var lage = Number(l.age)
var rage = Number(r.age)
if(lage === rage){
return l._key>r._key
}
return lage<rage
});
2023-10-01 14:59:35 +08:00
}
}
2023-12-31 11:20:48 +08:00
FluContentDialog{
id:custom_update_dialog
2024-02-20 22:12:16 +08:00
property var text
2023-12-31 11:20:48 +08:00
property var onAccpetListener
title:"修改列名"
negativeText:"取消"
contentDelegate: Component{
Item{
2024-02-20 22:12:16 +08:00
implicitWidth: parent.width
implicitHeight: 60
2023-12-31 11:20:48 +08:00
FluTextBox{
id:textbox_text
anchors.centerIn: parent
2024-02-20 22:12:16 +08:00
onTextChanged: {
custom_update_dialog.text = textbox_text.text
2023-12-31 11:20:48 +08:00
}
}
2024-02-20 22:12:16 +08:00
Component.onCompleted: {
textbox_text.text = custom_update_dialog.text
textbox_text.forceActiveFocus()
}
2023-12-31 11:20:48 +08:00
}
}
positiveText:"确定"
onPositiveClicked:{
2024-02-20 22:12:16 +08:00
if(custom_update_dialog.onAccpetListener){
custom_update_dialog.onAccpetListener(custom_update_dialog.text)
2023-12-31 11:20:48 +08:00
}
}
2024-02-20 22:12:16 +08:00
function showDialog(text,listener){
custom_update_dialog.text = text
custom_update_dialog.onAccpetListener = listener
custom_update_dialog.open()
}
2023-12-31 11:20:48 +08:00
}
2024-03-01 23:24:03 +08:00
FluMenu{
id:pop_filter
width: 200
height: 89
contentItem: Item{
onVisibleChanged: {
if(visible){
name_filter_text.text = root.nameKeyword
name_filter_text.cursorPosition = name_filter_text.text.length
name_filter_text.forceActiveFocus()
}
}
FluTextBox{
id:name_filter_text
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: 10
rightMargin: 10
topMargin: 10
}
iconSource: FluentIcons.Search
}
FluButton{
text:"搜索"
anchors{
bottom: parent.bottom
right: parent.right
bottomMargin: 10
rightMargin: 10
}
onClicked: {
root.nameKeyword = name_filter_text.text
pop_filter.close()
}
}
}
function showPopup(){
table_view.closeEditor()
pop_filter.popup()
}
}
2023-09-28 12:31:20 +08:00
Component{
id:com_checbox
Item{
FluCheckBox{
anchors.centerIn: parent
checked: true === options.checked
enableAnimation: false
clickListener: function(){
2024-03-01 00:19:12 +08:00
var obj = table_view.getRow(row)
2023-10-01 15:27:38 +08:00
obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
2024-03-01 00:19:12 +08:00
table_view.setRow(row,obj)
2023-09-28 14:41:24 +08:00
checkBoxChanged()
2023-09-28 12:31:20 +08:00
}
}
}
}
2024-03-01 23:24:03 +08:00
Component{
id:com_column_filter_name
Item{
FluText{
text:"姓名"
anchors.centerIn: parent
}
FluIconButton{
width: 20
height: 20
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.Filter
iconColor: {
if("" !== root.nameKeyword){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
anchors{
right: parent.right
rightMargin: 3
verticalCenter: parent.verticalCenter
}
onClicked: {
pop_filter.showPopup()
}
}
}
}
2023-08-24 15:50:37 +08:00
Component{
id:com_action
Item{
RowLayout{
anchors.centerIn: parent
FluButton{
text:"删除"
onClicked: {
table_view.closeEditor()
2024-03-01 00:19:12 +08:00
table_view.removeRow(row)
2023-08-24 15:50:37 +08:00
}
}
FluFilledButton{
text:"编辑"
onClicked: {
2024-03-01 00:19:12 +08:00
var obj = table_view.getRow(row)
2023-09-28 12:31:20 +08:00
obj.name = "12345"
2024-03-01 00:19:12 +08:00
table_view.setRow(row,obj)
showSuccess(JSON.stringify(obj))
2023-08-24 15:50:37 +08:00
}
}
}
}
}
2023-09-28 14:41:24 +08:00
Component{
id:com_column_checbox
Item{
RowLayout{
anchors.centerIn: parent
FluText{
text:"全选"
Layout.alignment: Qt.AlignVCenter
}
FluCheckBox{
2024-03-01 00:19:12 +08:00
checked: true === root.seletedAll
2023-09-28 14:41:24 +08:00
enableAnimation: false
Layout.alignment: Qt.AlignVCenter
clickListener: function(){
2024-03-01 00:19:12 +08:00
root.seletedAll = !root.seletedAll
var checked = root.seletedAll
2023-09-28 14:41:24 +08:00
itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
2024-03-01 00:19:12 +08:00
for(var i =0;i< table_view.rows ;i++){
var rowData = table_view.getRow(i)
2023-09-28 14:41:24 +08:00
rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
2024-03-01 00:19:12 +08:00
table_view.setRow(i,rowData)
2023-09-28 14:41:24 +08:00
}
}
}
}
2023-08-24 15:50:37 +08:00
}
}
Component{
id:com_combobox
FluComboBox {
anchors.fill: parent
focus: true
currentIndex: display
editable: true
model: ListModel {
ListElement { text: 100 }
ListElement { text: 300 }
ListElement { text: 500 }
ListElement { text: 1000 }
}
Component.onCompleted: {
currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
selectAll()
}
onCommit: {
2024-03-01 00:19:12 +08:00
editTextChaged(editText)
2023-08-24 15:50:37 +08:00
tableView.closeEditor()
}
}
}
2023-10-01 14:59:35 +08:00
Component{
id:com_avatar
Item{
FluClip{
anchors.centerIn: parent
width: 40
height: 40
radius: [20,20,20,20]
Image{
anchors.fill: parent
source: {
if(options && options.avatar){
return options.avatar
}
return ""
}
sourceSize: Qt.size(80,80)
}
}
}
}
2023-12-31 11:20:48 +08:00
Component{
id:com_column_update_title
Item{
FluText{
id:text_title
text: {
if(options.title){
return options.title
}
return ""
}
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
}
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
custom_update_dialog.showDialog(options.title,function(text){
itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
})
}
}
}
}
2023-10-01 14:59:35 +08:00
Component{
id:com_column_sort_age
Item{
FluText{
text:"年龄"
anchors.centerIn: parent
}
ColumnLayout{
spacing: 0
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: 4
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronUp
iconColor: {
if(1 === root.sortType){
2023-11-02 15:33:59 +08:00
return FluTheme.primaryColor
2023-10-01 14:59:35 +08:00
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 1){
root.sortType = 0
return
}
root.sortType = 1
}
}
FluIconButton{
Layout.preferredWidth: 20
Layout.preferredHeight: 15
iconSize: 12
verticalPadding:0
horizontalPadding:0
iconSource: FluentIcons.ChevronDown
iconColor: {
if(2 === root.sortType){
2023-11-02 15:33:59 +08:00
return FluTheme.primaryColor
2023-10-01 14:59:35 +08:00
}
return FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
}
onClicked: {
if(root.sortType === 2){
root.sortType = 0
return
}
root.sortType = 2
}
}
}
}
}
2024-03-01 00:19:12 +08:00
FluArea{
id:layout_controls
anchors{
left: parent.left
right: parent.right
top: parent.top
topMargin: 20
}
height: 60
Row{
spacing: 5
anchors{
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
FluButton{
text:"清空"
onClicked: {
table_view.dataSource = []
}
}
FluButton{
text:"删除选中"
onClicked: {
var data = []
2024-03-01 23:24:03 +08:00
var rows = []
for (var i = 0; i < table_view.rows; i++) {
var item = table_view.getRow(i);
rows.push(item)
if (!item.checkbox.options.checked) {
data.push(item);
}
}
var sourceModel = table_view.sourceModel;
for (i = 0; i < sourceModel.rowCount; i++) {
var sourceItem = sourceModel.getRow(i);
const foundItem = rows.find(item=> item._key === sourceItem._key)
if (!foundItem) {
data.push(sourceItem);
2024-03-01 00:19:12 +08:00
}
}
table_view.dataSource = data
}
}
FluButton{
text:"添加一行数据"
onClicked: {
table_view.appendRow(genTestObject())
}
}
}
}
2023-08-24 15:50:37 +08:00
FluTableView{
id:table_view
anchors{
left: parent.left
right: parent.right
2024-03-01 00:19:12 +08:00
top: layout_controls.bottom
2023-08-24 15:50:37 +08:00
bottom: gagination.top
}
2024-03-01 00:19:12 +08:00
anchors.topMargin: 5
onRowsChanged: {
root.checkBoxChanged()
}
2023-08-24 15:50:37 +08:00
columnSource:[
2023-09-28 12:31:20 +08:00
{
2023-09-28 14:41:24 +08:00
title: table_view.customItem(com_column_checbox,{checked:true}),
2023-09-28 12:31:20 +08:00
dataIndex: 'checkbox',
width:80,
minimumWidth:80,
2024-02-20 22:12:16 +08:00
maximumWidth:80
2023-09-28 12:31:20 +08:00
},
2023-10-01 14:59:35 +08:00
{
2023-12-31 11:20:48 +08:00
title: table_view.customItem(com_column_update_title,{title:'头像'}),
2023-10-01 14:59:35 +08:00
dataIndex: 'avatar',
2024-02-20 22:12:16 +08:00
width:100
2023-10-01 14:59:35 +08:00
},
2023-08-24 15:50:37 +08:00
{
2024-03-01 23:24:03 +08:00
title: table_view.customItem(com_column_filter_name,{title:'姓名'}),
2023-08-24 15:50:37 +08:00
dataIndex: 'name',
2024-02-20 22:12:16 +08:00
readOnly:true
2023-08-24 15:50:37 +08:00
},
{
2023-10-01 14:59:35 +08:00
title: table_view.customItem(com_column_sort_age,{sort:0}),
2023-08-24 15:50:37 +08:00
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
minimumWidth:100,
maximumWidth:100
},
{
title: '住址',
dataIndex: 'address',
width:200,
minimumWidth:100,
maximumWidth:250
},
{
title: '别名',
dataIndex: 'nickname',
width:100,
minimumWidth:80,
maximumWidth:200
},
{
title: '长字符串',
dataIndex: 'longstring',
width:200,
minimumWidth:100,
maximumWidth:300
},
{
title: '操作',
dataIndex: 'action',
width:160,
minimumWidth:160,
maximumWidth:160
}
]
}
FluPagination{
id:gagination
anchors{
bottom: parent.bottom
left: parent.left
}
pageCurrent: 1
itemCount: 100000
pageButtonCount: 7
__itemPerPage: 1000
onRequestPage:
(page,count)=> {
table_view.closeEditor()
loadData(page,count)
table_view.resetPosition()
}
}
2023-09-28 14:41:24 +08:00
2024-03-01 00:19:12 +08:00
function genTestObject(){
var ages = ["100", "300", "500", "1000"];
2023-09-28 14:41:24 +08:00
function getRandomAge() {
2024-03-01 00:19:12 +08:00
var randomIndex = Math.floor(Math.random() * ages.length);
return ages[randomIndex];
2023-09-28 14:41:24 +08:00
}
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
function getRandomName(){
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
function getRandomNickname(){
var randomIndex = Math.floor(Math.random() * nicknames.length);
return nicknames[randomIndex];
}
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
function getRandomAddresses(){
var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex];
}
2023-10-01 14:59:35 +08:00
var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
function getAvatar(){
var randomIndex = Math.floor(Math.random() * avatars.length);
return avatars[randomIndex];
}
2024-03-01 00:19:12 +08:00
return {
checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
action: table_view.customItem(com_action),
_minimumHeight:50,
_key:FluTools.uuid()
}
}
function loadData(page,count){
root.seletedAll = true
2023-09-28 14:41:24 +08:00
const dataSource = []
for(var i=0;i<count;i++){
2024-03-01 00:19:12 +08:00
dataSource.push(genTestObject())
2023-09-28 14:41:24 +08:00
}
2023-10-01 14:59:35 +08:00
root.dataSource = dataSource
table_view.dataSource = root.dataSource
2023-09-28 14:41:24 +08:00
}
2023-08-24 15:50:37 +08:00
}