FluentUI/example/qml/page/T_TableView.qml

178 lines
5.8 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-04-07 18:27:50 +08:00
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-04-07 18:27:50 +08:00
2023-06-20 18:32:10 +08:00
FluContentPage{
2023-04-07 18:27:50 +08:00
title:"TableView"
Component.onCompleted: {
2023-06-26 18:12:58 +08:00
loadData(1,1000)
2023-04-08 20:08:26 +08:00
}
2023-04-07 18:27:50 +08:00
2023-06-28 13:13:39 +08:00
Component{
id:com_action
Item{
RowLayout{
anchors.centerIn: parent
FluButton{
text:"删除"
onClicked: {
table_view.closeEditor()
tableModel.removeRow(row)
}
}
FluFilledButton{
text:"编辑"
onClicked: {
showSuccess(JSON.stringify(tableModel.getRow(row)))
}
}
}
}
2023-06-28 02:28:34 +08:00
}
2023-05-15 21:14:37 +08:00
function loadData(page,count){
2023-06-14 19:29:23 +08:00
var numbers = [100, 300, 500, 1000];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
}
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-05-15 21:14:37 +08:00
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
2023-06-14 19:29:23 +08:00
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
2023-06-26 18:12:58 +08:00
nickname: getRandomNickname(),
2023-06-29 22:30:15 +08:00
longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
2023-06-29 17:48:48 +08:00
height:46,
minimumHeight:46,
maximumHeight:300,
2023-06-28 13:13:39 +08:00
action:com_action
2023-05-15 21:14:37 +08:00
})
}
table_view.dataSource = dataSource
}
2023-06-20 18:32:10 +08:00
Component{
id:com_combobox
FluComboBox {
anchors.fill: parent
2023-06-25 23:17:44 +08:00
focus: true
2023-06-20 18:32:10 +08:00
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()
}
2023-06-25 23:17:44 +08:00
onCommit: {
2023-06-20 18:32:10 +08:00
display = editText
2023-06-25 23:17:44 +08:00
tableView.closeEditor()
2023-06-20 18:32:10 +08:00
}
}
}
FluTableView{
id:table_view
2023-06-26 19:59:28 +08:00
anchors{
left: parent.left
right: parent.right
top: parent.top
bottom: gagination.top
}
2023-06-20 18:32:10 +08:00
anchors.topMargin: 20
columnSource:[
{
title: '姓名',
dataIndex: 'name',
width:100,
2023-06-26 18:12:58 +08:00
minimumWidth:80,
2023-06-26 19:59:28 +08:00
maximumWidth:200,
readOnly:true
2023-06-20 18:32:10 +08:00
},
{
title: '年龄',
dataIndex: 'age',
editDelegate:com_combobox,
width:100,
minimumWidth:100,
2023-06-26 18:12:58 +08:00
maximumWidth:100
2023-06-20 18:32:10 +08:00
},
{
title: '住址',
dataIndex: 'address',
2023-06-26 18:12:58 +08:00
width:200,
minimumWidth:100,
maximumWidth:250
2023-06-20 18:32:10 +08:00
},
{
title: '别名',
dataIndex: 'nickname',
2023-06-26 18:12:58 +08:00
width:100,
minimumWidth:80,
maximumWidth:200
2023-06-28 13:13:39 +08:00
},
2023-06-29 17:48:48 +08:00
{
title: '长字符串',
dataIndex: 'longstring',
width:200,
minimumWidth:100,
maximumWidth:300
},
2023-06-28 13:13:39 +08:00
{
title: '操作',
dataIndex: 'action',
width:160,
minimumWidth:160,
maximumWidth:160
2023-06-20 18:32:10 +08:00
}
]
}
2023-06-26 19:59:28 +08:00
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-04-07 18:27:50 +08:00
}