From 5221c5bc63713114fbfb35909515bca9215bfb84 Mon Sep 17 00:00:00 2001
From: zhuzichu <zhuzichu520@gmail.com>
Date: Thu, 28 Sep 2023 14:41:24 +0800
Subject: [PATCH] update

---
 example/qml-Qt6/page/T_TableView.qml          | 117 ++++++++++++------
 example/qml/page/T_TableView.qml              | 117 ++++++++++++------
 .../FluentUI/Controls/FluTableView.qml        |  52 +++++---
 .../FluentUI/Controls/FluTableView.qml        |  55 +++++---
 4 files changed, 237 insertions(+), 104 deletions(-)

diff --git a/example/qml-Qt6/page/T_TableView.qml b/example/qml-Qt6/page/T_TableView.qml
index 6fa63aae..d193bb43 100644
--- a/example/qml-Qt6/page/T_TableView.qml
+++ b/example/qml-Qt6/page/T_TableView.qml
@@ -7,7 +7,9 @@ import "qrc:///example/qml/component"
 
 FluContentPage{
 
+    id:root
     title:"TableView"
+    signal checkBoxChanged
 
     Component.onCompleted: {
         loadData(1,1000)
@@ -15,7 +17,6 @@ FluContentPage{
 
     Component{
         id:com_checbox
-
         Item{
             FluCheckBox{
                 anchors.centerIn: parent
@@ -24,10 +25,10 @@ FluContentPage{
                 clickListener: function(){
                     modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
                     tableModel.setRow(row,modelData)
+                    checkBoxChanged()
                 }
             }
         }
-
     }
 
     Component{
@@ -55,41 +56,44 @@ FluContentPage{
         }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text:"全选"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === options.checked
+                    enableAnimation: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        var checked = !options.checked
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            var rowData = tableModel.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            tableModel.setRow(i,rowData)
+                        }
+                    }
+                }
+                Connections{
+                    target: root
+                    function onCheckBoxChanged(){
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            if(false === tableModel.getRow(i).checkbox.options.checked){
+                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
+                                return
+                            }
+                        }
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
+                    }
+                }
+            }
         }
-        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];
-        }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                checkbox: table_view.customItem(com_checbox,{checked:true}),
-                                checked:true,
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action: table_view.customItem(com_action)
-                            })
-        }
-        table_view.dataSource = dataSource
     }
 
     Component{
@@ -127,11 +131,11 @@ FluContentPage{
         anchors.topMargin: 20
         columnSource:[
             {
-                title: '选取',
+                title: table_view.customItem(com_column_checbox,{checked:true}),
                 dataIndex: 'checkbox',
                 width:80,
                 minimumWidth:80,
-                maximumWidth:80
+                maximumWidth:80,
             },
             {
                 title: '姓名',
@@ -194,4 +198,41 @@ FluContentPage{
                 table_view.resetPosition()
             }
     }
+
+    function loadData(page,count){
+        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];
+        }
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                checkbox: table_view.customItem(com_checbox,{checked:true}),
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                action: table_view.customItem(com_action)
+                            })
+        }
+        table_view.dataSource = dataSource
+    }
+
 }
diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index 3c4fa21b..07d60ce9 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -8,7 +8,9 @@ import "../component"
 
 FluContentPage{
 
+    id:root
     title:"TableView"
+    signal checkBoxChanged
 
     Component.onCompleted: {
         loadData(1,1000)
@@ -16,7 +18,6 @@ FluContentPage{
 
     Component{
         id:com_checbox
-
         Item{
             FluCheckBox{
                 anchors.centerIn: parent
@@ -25,10 +26,10 @@ FluContentPage{
                 clickListener: function(){
                     modelData.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
                     tableModel.setRow(row,modelData)
+                    checkBoxChanged()
                 }
             }
         }
-
     }
 
     Component{
@@ -56,41 +57,44 @@ FluContentPage{
         }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text:"全选"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === options.checked
+                    enableAnimation: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        var checked = !options.checked
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            var rowData = tableModel.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            tableModel.setRow(i,rowData)
+                        }
+                    }
+                }
+                Connections{
+                    target: root
+                    function onCheckBoxChanged(){
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            if(false === tableModel.getRow(i).checkbox.options.checked){
+                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
+                                return
+                            }
+                        }
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
+                    }
+                }
+            }
         }
-        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];
-        }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                checkbox: table_view.customItem(com_checbox,{checked:true}),
-                                checked:true,
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action: table_view.customItem(com_action)
-                            })
-        }
-        table_view.dataSource = dataSource
     }
 
     Component{
@@ -128,11 +132,11 @@ FluContentPage{
         anchors.topMargin: 20
         columnSource:[
             {
-                title: '选取',
+                title: table_view.customItem(com_column_checbox,{checked:true}),
                 dataIndex: 'checkbox',
                 width:80,
                 minimumWidth:80,
-                maximumWidth:80
+                maximumWidth:80,
             },
             {
                 title: '姓名',
@@ -195,4 +199,41 @@ FluContentPage{
                 table_view.resetPosition()
             }
     }
+
+    function loadData(page,count){
+        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];
+        }
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                checkbox: table_view.customItem(com_checbox,{checked:true}),
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                action: table_view.customItem(com_action)
+                            })
+        }
+        table_view.dataSource = dataSource
+    }
+
 }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
index e5e391ba..a31248c0 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
@@ -312,6 +312,19 @@ Rectangle {
         id:com_handle
         Item {}
     }
+
+    Component{
+        id:com_column_text
+        FluText {
+            id: column_text
+            text: modelData
+            anchors.fill: parent
+            font.bold: true
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
     TableView {
         id: header_horizontal
         model: TableModel{
@@ -330,9 +343,10 @@ Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
             property bool canceled: false
+            property int columnIndex: column
             readonly property var obj : columnSource[column]
-            implicitWidth: column_text.implicitWidth + (cellPadding * 2)
-            implicitHeight: Math.max(36, column_text.implicitHeight + (cellPadding * 2))
+            implicitWidth: item_column_loader.item.implicitWidth + (cellPadding * 2)
+            implicitHeight: Math.max(36, item_column_loader.item.implicitHeight + (cellPadding * 2))
             color:{
                 d.selectionFlag
                 if(column_item_control_mouse.pressed){
@@ -341,18 +355,6 @@ Rectangle {
                 return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
             }
             border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
-            FluText {
-                id: column_text
-                text: model.display
-                width: parent.width
-                height: parent.height
-                font.bold:{
-                    d.selectionFlag
-                    return true
-                }
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
             MouseArea{
                 id:column_item_control_mouse
                 anchors.fill: parent
@@ -372,6 +374,28 @@ Rectangle {
                         d.selectionFlag = !d.selectionFlag
                     }
             }
+            Loader{
+                id:item_column_loader
+                property var itemModel: model
+                property var modelData: model.display
+                property var tableView: table_view
+                property var tableModel: table_model
+                property var options:{
+                    if(typeof(modelData) == "object"){
+                        return modelData.options
+                    }
+                    return {}
+                }
+                property int column: column_item_control.columnIndex
+                width: parent.width
+                height: parent.height
+                sourceComponent: {
+                    if(typeof(modelData) == "object"){
+                        return modelData.comId
+                    }
+                    return com_column_text
+                }
+            }
             MouseArea{
                 property point clickPos: "0,0"
                 height: parent.height
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
index 6fbbd2cb..4cfe1990 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
@@ -338,6 +338,22 @@ Rectangle {
             }
         }
     }
+
+    Component{
+        id:com_column_text
+        FluText {
+            id: column_text
+            text: modelData
+            anchors.fill: parent
+            font.bold:{
+                d.selectionFlag
+                return selection_model.columnIntersectsSelection(column)
+            }
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
     TableView {
         id: header_horizontal
         model: TableModel{
@@ -356,9 +372,10 @@ Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
             property bool canceled: false
+            property int columnIndex: column
             readonly property var obj : columnSource[column]
-            implicitWidth: column_text.implicitWidth + (cellPadding * 2)
-            implicitHeight: Math.max(36, column_text.implicitHeight + (cellPadding * 2))
+            implicitWidth: item_column_loader.item.implicitWidth + (cellPadding * 2)
+            implicitHeight: Math.max(36, item_column_loader.item.implicitHeight + (cellPadding * 2))
             color:{
                 d.selectionFlag
                 if(column_item_control_mouse.pressed){
@@ -370,18 +387,6 @@ Rectangle {
                 return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
             }
             border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
-            FluText {
-                id: column_text
-                text: model.display
-                width: parent.width
-                height: parent.height
-                font.bold:{
-                    d.selectionFlag
-                    return selection_model.columnIntersectsSelection(column)
-                }
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
             MouseArea{
                 id:column_item_control_mouse
                 anchors.fill: parent
@@ -407,6 +412,28 @@ Rectangle {
                         d.selectionFlag = !d.selectionFlag
                     }
             }
+            Loader{
+                id:item_column_loader
+                property var itemModel: model
+                property var modelData: model.display
+                property var tableView: table_view
+                property var tableModel: table_model
+                property var options:{
+                    if(typeof(modelData) == "object"){
+                        return modelData.options
+                    }
+                    return {}
+                }
+                property int column: column_item_control.columnIndex
+                width: parent.width
+                height: parent.height
+                sourceComponent: {
+                    if(typeof(modelData) == "object"){
+                        return modelData.comId
+                    }
+                    return com_column_text
+                }
+            }
             MouseArea{
                 property point clickPos: "0,0"
                 height: parent.height