Skip to content

Commit 51914a3

Browse files
flagmanAndrewflagmanAndrew
committed
vue
1 parent 7cdf4aa commit 51914a3

File tree

8 files changed

+404
-415
lines changed

8 files changed

+404
-415
lines changed

‎Vue/src/assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
-moz-osx-font-smoothing: grayscale;
55
color: #2c3e50;
66
margin: 50px 50px;
7-
width: 90vh;
7+
width: 90vw;
88
}

‎Vue/src/components/HomeContent.vue‎

Lines changed: 174 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,177 @@
1-
<script setup lang="ts">
2-
import { computed, ref } from 'vue';
3-
4-
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
5-
import DxButton from 'devextreme-vue/button';
6-
7-
const props = defineProps({
8-
text: {
9-
type: String,
10-
default: 'count',
11-
},
12-
});
13-
const count = ref(0);
14-
const buttonText = computed<string>(
15-
() => `Click ${props.text}: ${count.value}`
16-
);
17-
function clickHandler() {
18-
count.value += 1;
19-
}
20-
</script>
211
<template>
22-
<div>
23-
<DxButton
24-
:text="buttonText"
25-
@click="clickHandler"
26-
/>
2+
<div class="tables">
3+
<div class="column">
4+
<DxDataGrid
5+
:data-source="dataSource"
6+
key-expr="ID"
7+
:show-borders="true"
8+
:height="440"
9+
v-model:selected-row-keys="selectedRowKeys"
10+
@content-ready="onMainGridReady"
11+
@option-changed="mainGridOptionChanged"
12+
>
13+
<DxPaging
14+
:enabled="true"
15+
v-model:page-size="pageSize"
16+
v-model:page-index="pageIndex"
17+
/>
18+
<DxPager
19+
:visible="true"
20+
:show-page-size-selector="true"
21+
:allowed-page-sizes="allowedPageSizes"
22+
:show-info="true"
23+
/>
24+
<DxFilterRow :visible="true"/>
25+
<DxSelection mode="single"/>
26+
27+
<DxColumn
28+
data-field="CompanyName"
29+
v-model:selected-filter-operation="columnSelectedFilterOps.CompanyName"
30+
v-model:filter-value="columnFilterValues.CompanyName"
31+
/>
32+
<DxColumn
33+
data-field="City"
34+
v-model:selected-filter-operation="columnSelectedFilterOps.City"
35+
v-model:filter-value="columnFilterValues.City"
36+
/>
37+
<DxColumn
38+
data-field="State"
39+
v-model:selected-filter-operation="columnSelectedFilterOps.State"
40+
v-model:filter-value="columnFilterValues.State"
41+
/>
42+
<DxColumn
43+
data-field="Phone"
44+
v-model:selected-filter-operation="columnSelectedFilterOps.Phone"
45+
v-model:filter-value="columnFilterValues.Phone"
46+
/>
47+
<DxColumn
48+
data-field="Fax"
49+
v-model:selected-filter-operation="columnSelectedFilterOps.Fax"
50+
v-model:filter-value="columnFilterValues.Fax"
51+
/>
52+
</DxDataGrid>
53+
</div>
54+
<div class="column">
55+
<DxDataGrid
56+
ref="dependentGridRef"
57+
:data-source="dataSource"
58+
key-expr="ID"
59+
:show-borders="true"
60+
:height="440"
61+
:selected-row-keys="selectedRowKeys"
62+
@content-ready="onDependentGridReady"
63+
>
64+
<DxPaging
65+
:enabled="true"
66+
:page-size="pageSize"
67+
:page-index="pageIndex"
68+
/>
69+
<DxPager
70+
:visible="true"
71+
:show-page-size-selector="true"
72+
:allowed-page-sizes="allowedPageSizes"
73+
:show-info="true"
74+
/>
75+
<DxFilterRow :visible="true"/>
76+
<DxSelection mode="single"/>
77+
78+
<DxColumn
79+
data-field="CompanyName"
80+
:selected-filter-operation="columnSelectedFilterOps.CompanyName"
81+
:filter-value="columnFilterValues.CompanyName"
82+
:sort-order="columnSortOpts.CompanyName"
83+
/>
84+
<DxColumn
85+
data-field="City"
86+
:selected-filter-operation="columnSelectedFilterOps.City"
87+
:filter-value="columnFilterValues.City"
88+
:sort-order="columnSortOpts.City"
89+
/>
90+
<DxColumn
91+
data-field="State"
92+
:selected-filter-operation="columnSelectedFilterOps.State"
93+
:filter-value="columnFilterValues.State"
94+
:sort-order="columnSortOpts.State"
95+
/>
96+
<DxColumn
97+
data-field="Phone"
98+
:selected-filter-operation="columnSelectedFilterOps.Phone"
99+
:filter-value="columnFilterValues.Phone"
100+
:sort-order="columnSortOpts.Phone"
101+
/>
102+
<DxColumn
103+
data-field="Fax"
104+
:selected-filter-operation="columnSelectedFilterOps.Fax"
105+
:filter-value="columnFilterValues.Fax"
106+
:sort-order="columnSortOpts.Fax"
107+
/>
108+
</DxDataGrid>
109+
</div>
27110
</div>
28111
</template>
112+
<script setup lang="ts">
113+
import { DxDataGrid, DxColumn, DxPager, DxPaging, DxFilterRow, DxSelection } from 'devextreme-vue/data-grid';
114+
import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
115+
import { ref, reactive } from 'vue';
116+
import service, { Customer } from '../data';
117+
import type { DxScrollViewTypes } from 'devextreme-vue/scroll-view';
118+
119+
interface ColumnOptions {
120+
[key: string]: any;
121+
}
122+
123+
const allowedPageSizes = [5, 10, 20];
124+
125+
const dataSource: Customer[] = service.getCustomers();
126+
const columnFilterValues = reactive<ColumnOptions>({});
127+
const columnSelectedFilterOps = reactive<ColumnOptions>({});
128+
const columnSortOpts = reactive<ColumnOptions>({});
129+
const selectedRowKeys = ref<number[]>([]);
130+
const pageSize = ref(5);
131+
const pageIndex = ref(0);
132+
133+
const dependentGridRef = ref<InstanceType<typeof DxDataGrid> | null>(null);
134+
let dependentScrollable: DxDataGridTypes.Scrollable | null = null;
135+
136+
const onMainGridReady = (e: DxDataGridTypes.ContentReadyEvent) => {
137+
const scrollable = e.component.getScrollable();
138+
scrollable.on('scroll', (scrollEvent: DxScrollViewTypes.ScrollEvent) => {
139+
if (dependentScrollable) {
140+
dependentScrollable.scrollTo(scrollEvent.scrollOffset);
141+
}
142+
});
143+
};
144+
145+
const onDependentGridReady = (e: DxDataGridTypes.ContentReadyEvent) => {
146+
dependentScrollable = e.component.getScrollable();
147+
};
148+
149+
const mainGridOptionChanged = (e: DxDataGridTypes.OptionChangedEvent) => {
150+
if (e.fullName.includes('sortOrder')) {
151+
const match = /\[(\d+)\]/.exec(e.fullName);
152+
const colIdx = match ? parseInt(match[1], 10) : null;
153+
if (colIdx !== null) {
154+
const dataField = e.component.columnOption(colIdx, 'dataField');
155+
dependentGridRef.value?.instance?.columnOption(dataField, 'sortOrder', e.value);
156+
Object.keys(columnSortOpts).forEach(key => columnSortOpts[key] = null);
157+
columnSortOpts[dataField] = e.value;
158+
}
159+
}
160+
};
161+
162+
</script>
163+
<style scoped>
164+
.tables {
165+
display: flex;
166+
}
167+
168+
.column:first-child {
169+
width: 50%;
170+
padding-right: 15px;
171+
}
172+
173+
.column:last-child {
174+
width: 50%;
175+
padding-left: 15px;
176+
}
177+
</style>

0 commit comments

Comments
 (0)