update FluTableView

example/qml-Qt6/page/T_TableView.qml

@@ -14,6 +14,16 @@ FluContentPage{
     property var dataSource : []
     property int sortType: 0
     property bool seletedAll: true
+    property string nameKeyword: ""
+
+    onNameKeywordChanged: {
+        table_view.filter(function(item){
+            if(item.name.includes(nameKeyword)){
+                return true
+            }
+            return false
+        })
+    }
 
     Component.onCompleted: {
         loadData(1,1000)
@@ -34,7 +44,8 @@ FluContentPage{
         if(sortType === 0){
             table_view.sort()
         }else if(sortType === 1){
-            table_view.sort((l, r) =>{
+            table_view.sort(
+                        (l, r) =>{
                             var lage = Number(l.age)
                             var rage = Number(r.age)
                             if(lage === rage){
@@ -43,7 +54,8 @@ FluContentPage{
                             return lage>rage
                         });
         }else if(sortType === 2){
-            table_view.sort((l, r) => {
+            table_view.sort(
+                        (l, r) => {
                             var lage = Number(l.age)
                             var rage = Number(r.age)
                             if(lage === rage){
@@ -90,6 +102,57 @@ FluContentPage{
         }
     }
 
+    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()
+        }
+
+    }
+
     Component{
         id:com_checbox
         Item{
@@ -107,6 +170,38 @@ FluContentPage{
         }
     }
 
+    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()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
@@ -324,10 +419,20 @@ FluContentPage{
                 text:"删除选中"
                 onClicked: {
                     var data = []
-                    for(var i =0;i< table_view.rows ;i++){
+                    var rows = []
-                        var item = table_view.getRow(i)
+                    for (var i = 0; i < table_view.rows; i++) {
-                        if(false === item.checkbox.options.checked){
+                        var item = table_view.getRow(i);
-                            data.push(item)
+                        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);
                         }
                     }
                     table_view.dataSource = data
@@ -370,7 +475,7 @@ FluContentPage{
                 width:100
             },
             {
-                title: '姓名',
+                title: table_view.customItem(com_column_filter_name,{title:'姓名'}),
                 dataIndex: 'name',
                 readOnly:true
             },

example/qml/page/T_TableView.qml

@@ -14,6 +14,16 @@ FluContentPage{
     property var dataSource : []
     property int sortType: 0
     property bool seletedAll: true
+    property string nameKeyword: ""
+
+    onNameKeywordChanged: {
+        table_view.filter(function(item){
+            if(item.name.includes(nameKeyword)){
+                return true
+            }
+            return false
+        })
+    }
 
     Component.onCompleted: {
         loadData(1,1000)
@@ -34,7 +44,8 @@ FluContentPage{
         if(sortType === 0){
             table_view.sort()
         }else if(sortType === 1){
-            table_view.sort((l, r) =>{
+            table_view.sort(
+                        (l, r) =>{
                             var lage = Number(l.age)
                             var rage = Number(r.age)
                             if(lage === rage){
@@ -43,7 +54,8 @@ FluContentPage{
                             return lage>rage
                         });
         }else if(sortType === 2){
-            table_view.sort((l, r) => {
+            table_view.sort(
+                        (l, r) => {
                             var lage = Number(l.age)
                             var rage = Number(r.age)
                             if(lage === rage){
@@ -90,6 +102,57 @@ FluContentPage{
         }
     }
 
+    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()
+        }
+
+    }
+
     Component{
         id:com_checbox
         Item{
@@ -107,6 +170,38 @@ FluContentPage{
         }
     }
 
+    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()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
@@ -324,10 +419,20 @@ FluContentPage{
                 text:"删除选中"
                 onClicked: {
                     var data = []
-                    for(var i =0;i< table_view.rows ;i++){
+                    var rows = []
-                        var item = table_view.getRow(i)
+                    for (var i = 0; i < table_view.rows; i++) {
-                        if(false === item.checkbox.options.checked){
+                        var item = table_view.getRow(i);
-                            data.push(item)
+                        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);
                         }
                     }
                     table_view.dataSource = data
@@ -370,7 +475,7 @@ FluContentPage{
                 width:100
             },
             {
-                title: '姓名',
+                title: table_view.customItem(com_column_filter_name,{title:'姓名'}),
                 dataIndex: 'name',
                 readOnly:true
             },

src/FluTableSortProxyModel.cpp

@@ -8,12 +8,17 @@ FluTableSortProxyModel::FluTableSortProxyModel(QSortFilterProxyModel *parent)
     _model = nullptr;
     connect(this,&FluTableSortProxyModel::modelChanged,this,[=]{
         setSourceModel(this->model());
-        sort(0,Qt::AscendingOrder);
     });
 }
 
 bool FluTableSortProxyModel::filterAcceptsRow(int source_row, const QModelIndex &source_parent) const{
+    QJSValue filter = _filter;
+    if(filter.isUndefined()){
         return true;
+    }
+    QJSValueList data;
+    data<<source_row;
+    return filter.call(data).toBool();
 }
 
 bool FluTableSortProxyModel::filterAcceptsColumn(int source_column, const QModelIndex &source_parent) const{
@@ -22,7 +27,7 @@ bool FluTableSortProxyModel::filterAcceptsColumn(int source_column, const QModel
 
 bool FluTableSortProxyModel::lessThan(const QModelIndex &source_left, const QModelIndex &source_right) const{
     QJSValue comparator = _comparator;
-    if(comparator.isNull()){
+    if(comparator.isUndefined()){
         return true;
     }
     QJSValueList data;
@@ -36,14 +41,24 @@ bool FluTableSortProxyModel::lessThan(const QModelIndex &source_left, const QMod
     }
 }
 
-void FluTableSortProxyModel::setSortComparator(QJSValue comparator){
+void FluTableSortProxyModel::setComparator(QJSValue comparator){
+    int column = 0;
+    if(comparator.isUndefined()){
+        column = -1;
+    }
     this->_comparator = comparator;
     if(sortOrder()==Qt::AscendingOrder){
-        sort(0,Qt::DescendingOrder);
+        sort(column,Qt::DescendingOrder);
     }else{
-        sort(0,Qt::AscendingOrder);
+        sort(column,Qt::AscendingOrder);
     }
 }
+
+void FluTableSortProxyModel::setFilter(QJSValue filter){
+    this->_filter = filter;
+    invalidateFilter();
+}
+
 QVariant FluTableSortProxyModel::getRow(int rowIndex){
     QVariant result;
     QMetaObject::invokeMethod(_model, "getRow",Q_RETURN_ARG(QVariant, result),Q_ARG(int, mapToSource(index(rowIndex,0)).row()));

src/FluTableSortProxyModel.h

@@ -17,11 +17,13 @@ public:
     bool filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const override;
     bool filterAcceptsColumn(int sourceColumn, const QModelIndex &sourceParent) const override;
     bool lessThan(const QModelIndex &sourceLeft, const QModelIndex &sourceRight) const override;
-    Q_INVOKABLE void setSortComparator(QJSValue comparator);
     Q_INVOKABLE QVariant getRow(int rowIndex);
     Q_INVOKABLE void setRow(int rowIndex,QVariant val);
     Q_INVOKABLE void removeRow(int rowIndex,int rows);
+    Q_INVOKABLE void setComparator(QJSValue comparator);
+    Q_INVOKABLE void setFilter(QJSValue filter);
 private:
+    QJSValue _filter;
     QJSValue _comparator;
 };
 

src/Qt5/imports/FluentUI/Controls/FluTableView.qml

@@ -12,6 +12,9 @@ Rectangle {
     property alias columns: table_view.columns
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
+    property color selectedBorderColor: FluTheme.primaryColor
+    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property alias sourceModel: table_model
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
@@ -44,7 +47,7 @@ Rectangle {
             item_loader_layout.cellItem = cellItem
             item_loader_layout.x = table_view.contentX + cellPosition.x
             item_loader_layout.y = table_view.contentY + cellPosition.y
-            item_loader_layout.width = table_view.columnWidthProvider(column)
+            item_loader_layout.width = header_horizontal.columnWidthProvider(column)
             item_loader_layout.height = table_view.rowHeightProvider(row)
             item_loader.display = display
             var obj =columnSource[column].editDelegate
@@ -198,25 +201,8 @@ Rectangle {
                 ScrollBar.vertical: FluScrollBar{
                     id:scroll_bar_v
                 }
-                columnWidthProvider: function(column) {
+                syncView: header_horizontal
-                    var w = columnSource[column].width
+                syncDirection: Qt.Horizontal
-                    if(!w){
-                        w = columnSource[column].minimumWidth
-                    }
-                    if(!w){
-                        w = d.defaultItemWidth
-                    }
-                    if(item_loader_layout.cellItem){
-                        if(column === item_loader.column){
-                            item_loader_layout.width = w
-                        }
-                        if(column === item_loader.column-1){
-                            let cellPosition = item_loader_layout.cellItem.mapToItem(scroll_table, 0, 0)
-                            item_loader_layout.x = table_view.contentX + cellPosition.x
-                        }
-                    }
-                    return w
-                }
                 rowHeightProvider: function(row) {
                     if(row>=table_view.rows){
                         return 0
@@ -240,7 +226,7 @@ Rectangle {
                     }
                     return h
                 }
-                model: table_model
+                model: table_sort_model
                 clip: true
                 onRowsChanged: {
                     closeEditor()
@@ -276,23 +262,14 @@ Rectangle {
                             return false
                         }
                         color:{
+                            if(item_table.isRowSelected){
+                                return control.selectedColor
+                            }
                             if(d.rowHoverIndex === row || item_table.isRowSelected){
                                 return FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
                             }
                             return (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.015) : Qt.rgba(0,0,0,0.015))
                         }
-                        Rectangle{
-                            height: 18
-                            radius: 1.5
-                            color: FluTheme.primaryColor
-                            width: 3
-                            visible: item_table.isRowSelected && column === 0
-                            anchors{
-                                verticalCenter: parent.verticalCenter
-                                left: parent.left
-                                leftMargin: 3
-                            }
-                        }
                         MouseArea{
                             anchors.fill: parent
                             acceptedButtons: Qt.LeftButton
@@ -335,6 +312,36 @@ Rectangle {
                                 return com_text
                             }
                         }
+                        Item{
+                            anchors.fill: parent
+                            visible: item_table.isRowSelected
+                            Rectangle{
+                                width: 1
+                                height: parent.height
+                                anchors.left: parent.left
+                                color: control.selectedBorderColor
+                                visible: column === 0
+                            }
+                            Rectangle{
+                                width: 1
+                                height: parent.height
+                                anchors.right: parent.right
+                                color: control.selectedBorderColor
+                                visible: column === control.columns-1
+                            }
+                            Rectangle{
+                                width: parent.width
+                                height: 1
+                                anchors.top: parent.top
+                                color: control.selectedBorderColor
+                            }
+                            Rectangle{
+                                width: parent.width
+                                height: 1
+                                anchors.bottom: parent.bottom
+                                color: control.selectedBorderColor
+                            }
+                        }
                     }
                 }
             }
@@ -397,11 +404,29 @@ Rectangle {
         anchors.left: scroll_table.left
         anchors.top: parent.top
         visible: control.horizonalHeaderVisible
-        implicitWidth: syncView ? syncView.width : 0
+        implicitWidth: table_view.width
         implicitHeight: visible ? Math.max(1, contentHeight) : 0
-        syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
+        columnWidthProvider: function(column) {
+            var w = columnSource[column].width
+            if(!w){
+                w = columnSource[column].minimumWidth
+            }
+            if(!w){
+                w = d.defaultItemWidth
+            }
+            if(item_loader_layout.cellItem){
+                if(column === item_loader.column){
+                    item_loader_layout.width = w
+                }
+                if(column === item_loader.column-1){
+                    let cellPosition = item_loader_layout.cellItem.mapToItem(scroll_table, 0, 0)
+                    item_loader_layout.x = table_view.contentX + cellPosition.x
+                }
+            }
+            return w
+        }
         delegate: Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
@@ -524,7 +549,7 @@ Rectangle {
                             maximumWidth = 65535
                         }
                         columnObject.width = Math.min(Math.max(minimumWidth, w + delta.x),maximumWidth)
-                        table_view.forceLayout()
+                        header_horizontal.forceLayout()
                     }
             }
         }
@@ -687,14 +712,22 @@ Rectangle {
         o.options = options
         return o
     }
-    function sort(order){
+    function sort(callback=undefined){
-        if(order === undefined){
+        if(callback){
-            table_view.model = table_model
+            table_sort_model.setComparator(function(left,right){
-        }else{
+                return callback(table_model.getRow(left),table_model.getRow(right))
-            table_view.model = table_sort_model
-            table_sort_model.setSortComparator(function(left,right){
-                return order(table_model.getRow(left),table_model.getRow(right))
             })
+        }else{
+            table_sort_model.setComparator(undefined)
+        }
+    }
+    function filter(callback=undefined){
+        if(callback){
+            table_sort_model.setFilter(function(index){
+                return callback(table_model.getRow(index))
+            })
+        }else{
+            table_sort_model.setFilter(undefined)
         }
     }
     function setRow(rowIndex,obj){

src/Qt6/imports/FluentUI/Controls/FluTableView.qml

@@ -13,6 +13,9 @@ Rectangle {
     property alias columns: table_view.columns
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
+    property color selectedBorderColor: FluTheme.primaryColor
+    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property alias sourceModel: table_model
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
@@ -45,7 +48,7 @@ Rectangle {
             item_loader_layout.cellItem = cellItem
             item_loader_layout.x = table_view.contentX + cellPosition.x
             item_loader_layout.y = table_view.contentY + cellPosition.y
-            item_loader_layout.width = table_view.columnWidthProvider(column)
+            item_loader_layout.width = header_horizontal.columnWidthProvider(column)
             item_loader_layout.height = table_view.rowHeightProvider(row)
             item_loader.display = display
             var obj =columnSource[column].editDelegate
@@ -199,25 +202,8 @@ Rectangle {
                 ScrollBar.vertical: FluScrollBar{
                     id:scroll_bar_v
                 }
-                columnWidthProvider: function(column) {
+                syncView: header_horizontal
-                    var w = columnSource[column].width
+                syncDirection: Qt.Horizontal
-                    if(!w){
-                        w = columnSource[column].minimumWidth
-                    }
-                    if(!w){
-                        w = d.defaultItemWidth
-                    }
-                    if(item_loader_layout.cellItem){
-                        if(column === item_loader.column){
-                            item_loader_layout.width = w
-                        }
-                        if(column === item_loader.column-1){
-                            let cellPosition = item_loader_layout.cellItem.mapToItem(scroll_table, 0, 0)
-                            item_loader_layout.x = table_view.contentX + cellPosition.x
-                        }
-                    }
-                    return w
-                }
                 rowHeightProvider: function(row) {
                     if(row>=table_view.rows){
                         return 0
@@ -241,7 +227,7 @@ Rectangle {
                     }
                     return h
                 }
-                model: table_model
+                model: table_sort_model
                 clip: true
                 onRowsChanged: {
                     closeEditor()
@@ -277,23 +263,14 @@ Rectangle {
                             return false
                         }
                         color:{
+                            if(item_table.isRowSelected){
+                                return control.selectedColor
+                            }
                             if(d.rowHoverIndex === row || item_table.isRowSelected){
                                 return FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
                             }
                             return (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.015) : Qt.rgba(0,0,0,0.015))
                         }
-                        Rectangle{
-                            height: 18
-                            radius: 1.5
-                            color: FluTheme.primaryColor
-                            width: 3
-                            visible: item_table.isRowSelected && column === 0
-                            anchors{
-                                verticalCenter: parent.verticalCenter
-                                left: parent.left
-                                leftMargin: 3
-                            }
-                        }
                         MouseArea{
                             anchors.fill: parent
                             acceptedButtons: Qt.LeftButton
@@ -336,6 +313,36 @@ Rectangle {
                                 return com_text
                             }
                         }
+                        Item{
+                            anchors.fill: parent
+                            visible: item_table.isRowSelected
+                            Rectangle{
+                                width: 1
+                                height: parent.height
+                                anchors.left: parent.left
+                                color: control.selectedBorderColor
+                                visible: column === 0
+                            }
+                            Rectangle{
+                                width: 1
+                                height: parent.height
+                                anchors.right: parent.right
+                                color: control.selectedBorderColor
+                                visible: column === control.columns-1
+                            }
+                            Rectangle{
+                                width: parent.width
+                                height: 1
+                                anchors.top: parent.top
+                                color: control.selectedBorderColor
+                            }
+                            Rectangle{
+                                width: parent.width
+                                height: 1
+                                anchors.bottom: parent.bottom
+                                color: control.selectedBorderColor
+                            }
+                        }
                     }
                 }
             }
@@ -398,11 +405,29 @@ Rectangle {
         anchors.left: scroll_table.left
         anchors.top: parent.top
         visible: control.horizonalHeaderVisible
-        implicitWidth: syncView ? syncView.width : 0
+        implicitWidth: table_view.width
         implicitHeight: visible ? Math.max(1, contentHeight) : 0
-        syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
+        columnWidthProvider: function(column) {
+            var w = columnSource[column].width
+            if(!w){
+                w = columnSource[column].minimumWidth
+            }
+            if(!w){
+                w = d.defaultItemWidth
+            }
+            if(item_loader_layout.cellItem){
+                if(column === item_loader.column){
+                    item_loader_layout.width = w
+                }
+                if(column === item_loader.column-1){
+                    let cellPosition = item_loader_layout.cellItem.mapToItem(scroll_table, 0, 0)
+                    item_loader_layout.x = table_view.contentX + cellPosition.x
+                }
+            }
+            return w
+        }
         delegate: Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
@@ -525,7 +550,7 @@ Rectangle {
                             maximumWidth = 65535
                         }
                         columnObject.width = Math.min(Math.max(minimumWidth, w + delta.x),maximumWidth)
-                        table_view.forceLayout()
+                        header_horizontal.forceLayout()
                     }
             }
         }
@@ -688,14 +713,22 @@ Rectangle {
         o.options = options
         return o
     }
-    function sort(order){
+    function sort(callback=undefined){
-        if(order === undefined){
+        if(callback){
-            table_view.model = table_model
+            table_sort_model.setComparator(function(left,right){
-        }else{
+                return callback(table_model.getRow(left),table_model.getRow(right))
-            table_view.model = table_sort_model
-            table_sort_model.setSortComparator(function(left,right){
-                return order(table_model.getRow(left),table_model.getRow(right))
             })
+        }else{
+            table_sort_model.setComparator(undefined)
+        }
+    }
+    function filter(callback=undefined){
+        if(callback){
+            table_sort_model.setFilter(function(index){
+                return callback(table_model.getRow(index))
+            })
+        }else{
+            table_sort_model.setFilter(undefined)
         }
     }
     function setRow(rowIndex,obj){