1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!--
* AG-grid学习
* https://www.ag-grid.com/vue-data-grid/getting-started/
-->
<script setup lang="ts">
import { h, ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
import AgGridStudyCom from './AgGridStudyCom.vue';
import AgGridStudyYearFilter from './AgGridStudyYearFilter.vue';
/**
* filter 过滤器
* https://ag-grid.com/vue-data-grid/filtering/#provided-filters
*
* agNumberColumnFilter: 一个用于数字比较的过滤器
* agTextColumnFilter: 一个用于字符串比较的过滤器
* agDateColumnFilter: 一个用于日期比较的过滤器
* agSetColumnFilter: 一个受Microsoft Excel中过滤器工作方式影响的过滤器。这是一个AG网格企业的功能。
* **/
const defaultColDef = {
flex: 1,
filterParams: {
buttons: ['apply', 'reset', 'clear'],
// debounceMs: 0, // 当`apply`按钮存在时，`debounceMs`被忽略
},
floatingFilter: true,
};
const SimpleComp = {
setup(props: any) {
const { params } = props;
return () => h('span', { class: 'text-red' }, params.value);
},
};
const gridApi = ref<any>(null);
const savedFilterModel = ref<any>(null);
const state = reactive({
columnDefs: [
{ field: 'age', headerName: '年龄', filter: 'agNumberColumnFilter' },
// { field: 'year', filter: 'agSetColumnFilter' }, // 企业版 https://ag-grid.com/vue-data-grid/filter-set/
{
field: 'year',
headerName: '年份',
filter: AgGridStudyYearFilter,
filterParams: {
title: '标题',
},
},
{
field: 'date',
headerName: '日期',
filter: 'agDateColumnFilter',
// https://ag-grid.com/vue-data-grid/filter-date/#date-filter-comparator
// add extra parameters for the date filter
filterParams: {
// provide comparator function
comparator: (filterLocalDateAtMidnight: any, cellValue: any) => {
const dateAsString = cellValue;
if (dateAsString == null) {
return 0;
}
// In the example application, dates are stored as dd/mm/yyyy
// We create a Date object for comparison against the filter date
const dateParts = dateAsString.split('/');
const year = Number(dateParts[2]);
const month = Number(dateParts[1]) - 1;
const day = Number(dateParts[0]);
const cellDate = new Date(year, month, day);
// Now that both parameters are Date objects, we can compare
if (cellDate < filterLocalDateAtMidnight) {
return -1;
} else if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
return 0;
},
},
},
{
field: 'country',
headerName: '国家',
filter: 'agMultiColumnFilter', // 企业版 https://ag-grid.com/vue-data-grid/filter-multi/
cellRenderer: AgGridStudyCom,
cellRendererParams: {
config: {
color: 'primary',
textColor: 'white',
square: true,
},
},
},
{
field: 'sport',
headerName: '运动',
cellRenderer: SimpleComp,
},
{ field: 'gold', headerName: '金牌' },
{ field: 'silver', headerName: '银牌' },
{
field: 'bronze',
headerName: '铜牌',
cellRendererSelector: (data: any) => {
if (data.value < 2) {
return { component: SimpleComp };
} else {
return {
component: AgGridStudyCom,
params: { config: { square: true } },
};
}
},
},
],
rowData: [],
popupParent: document.body, // https://ag-grid.com/vue-data-grid/column-menu/#popup-parent
});
onMounted(() => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((result) => result.json())
.then((remoteRowData) => (state.rowData = remoteRowData));
});
function cellWasClicked(event: any) {
console.log('cellWasClicked >>>>', event);
}
function onGridReady(params: any) {
gridApi.value = params.api;
}
function deselectRows() {
gridApi.value.deselectAll();
}
function savaFilterState() {
const filterModel = gridApi.value.getFilterModel();
savedFilterModel.value = filterModel;
}
function applyFilterState() {
const filterModel = savedFilterModel.value;
gridApi.value.setFilterModel(filterModel);
}
</script>
<template>
<div class="box">
<div>
<q-btn label="取消选择行" color="primary" @click="deselectRows" />
<q-btn label="保存" color="primary" @click="savaFilterState" />
<q-btn label="应用" color="primary" @click="applyFilterState" />
</div>
<!--
rowSelection="multiple"：多选，按住control键多选；`control+shift+鼠标点击`可选中多行
animateRows=true：启用行动画
分组：https://ag-grid.com/vue-data-grid/grouping-group-panel/
`rowGroup: true` `enableRowGroup: true` `rowGroupPanelShow="always"`
-->
<div>
<ag-grid-vue
style="height: 500px"
class="ag-theme-alpine"
:localeText="AG_GRID_LOCALE"
:popupParent="state.popupParent"
:columnDefs="state.columnDefs"
:rowData="state.rowData"
:defaultColDef="defaultColDef"
:animateRows="true"
@cell-clicked="cellWasClicked"
@grid-ready="onGridReady"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped></style>