amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 13:27:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

update FluTableView

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-03-01 23:24:03 +08:00
parent 6a73ac97df
commit 72b777dec3
6 changed files with 428 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
example/qml-Qt6/page/T_TableView.qml
View File

@ -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,23 +44,25 @@ FluContentPage{
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
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
});
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
});
}else if(sortType === 2){
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
});
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
});
}
}
@ -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 item = table_view.getRow(i)
if(false === item.checkbox.options.checked){
data.push(item)
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);
}
}
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
},

147
example/qml/page/T_TableView.qml
View File

@ -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,23 +44,25 @@ FluContentPage{
if(sortType === 0){
table_view.sort()
}else if(sortType === 1){
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
});
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
});
}else if(sortType === 2){
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
});
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
});
}
}
@ -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 item = table_view.getRow(i)
if(false === item.checkbox.options.checked){
data.push(item)
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);
}
}
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
},

27
src/FluTableSortProxyModel.cpp
View File

@ -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{
return true;
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()));

4
src/FluTableSortProxyModel.h
View File

@ -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;
};

119
src/Qt5/imports/FluentUI/Controls/FluTableView.qml
View File

@ -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) {
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
}
syncView: header_horizontal
syncDirection: Qt.Horizontal
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){
if(order === undefined){
table_view.model = table_model
}else{
table_view.model = table_sort_model
table_sort_model.setSortComparator(function(left,right){
return order(table_model.getRow(left),table_model.getRow(right))
function sort(callback=undefined){
if(callback){
table_sort_model.setComparator(function(left,right){
return callback(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){

119
src/Qt6/imports/FluentUI/Controls/FluTableView.qml
View File

@ -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) {
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
}
syncView: header_horizontal
syncDirection: Qt.Horizontal
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){
if(order === undefined){
table_view.model = table_model
}else{
table_view.model = table_sort_model
table_sort_model.setSortComparator(function(left,right){
return order(table_model.getRow(left),table_model.getRow(right))
function sort(callback=undefined){
if(callback){
table_sort_model.setComparator(function(left,right){
return callback(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){