FluentUI/example/qml/page/T_TreeView.qml

157 lines
4.8 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-03-30 21:52:55 +08:00
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-03-07 00:05:27 +08:00
2023-04-06 17:32:21 +08:00
FluScrollablePage {
2023-03-10 18:08:32 +08:00
title:"TreeView"
2023-03-07 18:43:03 +08:00
2023-03-07 23:27:32 +08:00
function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
return names[Math.floor(Math.random() * names.length)]
}
function randomCompany() {
var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
return companies[Math.floor(Math.random() * companies.length)]
}
function randomDepartment() {
var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
return departments[Math.floor(Math.random() * departments.length)]
}
function createEmployee() {
var name = randomName()
return tree_view.createItem(name, false)
}
function createSubtree(numEmployees) {
var employees = []
for (var i = 0; i < numEmployees; i++) {
employees.push(createEmployee())
2023-03-07 18:43:03 +08:00
}
2023-03-07 23:27:32 +08:00
return tree_view.createItem(randomDepartment(), true, employees)
2023-03-07 18:43:03 +08:00
}
2023-03-07 23:27:32 +08:00
function createOrg(numLevels, numSubtrees, numEmployees) {
if (numLevels === 0) {
return []
}
var subtrees = []
for (var i = 0; i < numSubtrees; i++) {
subtrees.push(createSubtree(numEmployees))
}
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
}
2023-03-07 18:43:03 +08:00
2023-04-06 17:32:21 +08:00
FluArea{
id:layout_actions
Layout.fillWidth: true
Layout.topMargin: 20
height: 50
paddings: 10
RowLayout{
spacing: 14
FluDropDownButton{
id:btn_selection_model
Layout.preferredWidth: 140
text:"None"
2023-06-18 13:56:30 +08:00
FluMenuItem{
text:"None"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
2023-04-06 17:32:21 +08:00
}
2023-06-18 13:56:30 +08:00
}
FluMenuItem{
text:"Single"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
}
FluMenuItem{
text:"Muiltple"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Compact
}
}
2023-03-07 23:27:32 +08:00
}
2023-04-06 17:32:21 +08:00
FluFilledButton{
text:"获取选中的数据"
onClicked: {
if(tree_view.selectionMode === FluTreeView.None){
showError("当前非选择模式,没有选中的数据")
}
if(tree_view.selectionMode === FluTreeView.Single){
if(!tree_view.signleData()){
showError("没有选中数据")
return
}
showSuccess(tree_view.signleData().text)
}
if(tree_view.selectionMode === FluTreeView.Multiple){
if(tree_view.multipData().length===0){
showError("没有选中数据")
return
}
var info = []
tree_view.multipData().map((value)=>info.push(value.text))
showSuccess(info.join(","))
}
2023-03-07 23:27:32 +08:00
}
}
}
2023-04-06 17:32:21 +08:00
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
paddings: 10
height: 400
FluTreeView{
id:tree_view
width:240
anchors{
top:parent.top
left:parent.left
bottom:parent.bottom
2023-03-07 18:43:03 +08:00
}
2023-04-06 17:32:21 +08:00
onItemClicked:
(model)=>{
showSuccess(model.text)
}
2023-03-07 18:43:03 +08:00
2023-04-06 17:32:21 +08:00
Component.onCompleted: {
var org = createOrg(3, 3, 3)
createItem()
updateData(org)
2023-03-07 23:27:32 +08:00
}
}
2023-04-06 17:32:21 +08:00
}
2023-03-07 23:27:32 +08:00
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluTreeView{
id:tree_view
width:240
height:600
Component.onCompleted: {
var datas = []
datas.push(createItem("Node1",false))
datas.push(createItem("Node2",false))
datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
updateData(datas)
}
}
'
}
2023-03-07 23:27:32 +08:00
2023-03-07 00:05:27 +08:00
}