Skip to content

V
vue3-quasar-ts-study01
Commit 6d0e800a authored by hcyhuchaoyue's avatar hcyhuchaoyue
Browse files
Options

feat:ag grid 表格树

parent 6bfb907f
Hide whitespace changes
Inline Side-by-side
Showing with 419 additions and 28 deletions
src/assets/no-data.svg
View file @ 6d0e800a
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 220 220" height="220px" width="220px">
<title>无数据</title>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" height="1024px" width="1024px">
<title>缺省页_暂无数据</title>
<defs>
<linearGradient id="linearGradient-1" y2="208.881283%" x2="50%" y1="0%" x1="50%">
<stop offset="0%" stop-color="#FBFBFB"></stop>
<stop offset="100%" stop-color="#D3DDFF"></stop>
<linearGradient id="linearGradient-1" y2="6.67281201%" x2="26.3000424%" y1="89.7882444%" x1="75.7748387%">
<stop offset="0%" stop-color="#DCE2EC"></stop>
<stop offset="100%" stop-color="#EEF1F5"></stop>
</linearGradient>
<linearGradient id="linearGradient-2" y2="69.5330218%" x2="64.1074764%" y1="0%" x1="4.61979528%">
<stop offset="0%" stop-color="#FBFBFB"></stop>
<stop offset="100%" stop-color="#D3DDFF"></stop>
<linearGradient id="linearGradient-2" y2="15.1239429%" x2="47.8357211%" y1="50%" x1="28.3311686%">
<stop offset="0%" stop-opacity="0" stop-color="#DCE2EC"></stop>
<stop offset="100%" stop-color="#DCE2EC"></stop>
</linearGradient>
<linearGradient id="linearGradient-3" y2="69.5330218%" x2="63.4436892%" y1="0%" x1="6.75503167%">
<stop offset="0%" stop-color="#FBFBFB"></stop>
<stop offset="100%" stop-color="#D3DDFF"></stop>
<linearGradient id="linearGradient-3" y2="15.85097%" x2="53.694365%" y1="82.6766729%" x1="52.5065382%">
<stop offset="0%" stop-color="#DCE0E9"></stop>
<stop offset="100%" stop-color="#DCE0E9"></stop>
</linearGradient>
<linearGradient id="linearGradient-4" y2="69.5330218%" x2="64.1283532%" y1="0%" x1="4.55263997%">
<stop offset="0%" stop-color="#FBFBFB"></stop>
<stop offset="100%" stop-color="#D3DDFF"></stop>
<linearGradient id="linearGradient-4" y2="41.2262444%" x2="-10.1114152%" y1="58.0571195%" x1="115.374042%">
<stop offset="0%" stop-color="#F0F4F8"></stop>
<stop offset="100%" stop-color="#DEE4ED"></stop>
</linearGradient>
<linearGradient id="linearGradient-5" y2="36.9362794%" x2="94.1890297%" y1="62.3470845%" x1="11.0735973%">
<stop offset="0%" stop-color="#F0F4F8"></stop>
<stop offset="100%" stop-color="#DEE4ED"></stop>
</linearGradient>
</defs>
<g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="无数据">
<rect height="220" width="220" y="0" x="0" fill="#FFFFFF" fill-opacity="0" id="矩形"></rect>
<ellipse ry="19.6940299" rx="110" cy="192.30597" cx="110" fill="url(#linearGradient-1)" id="椭圆形"></ellipse>
<rect rx="8.0733945" height="127.256835" width="161.46789" y="69.5954631" x="29.266055" fill="#F6F6F6" stroke-width="4.03669725" stroke="#F2F2F2" id="矩形"></rect>
<path fill="#FFFFFF" stroke-width="4.03669725" stroke="#DFE7FF" id="矩形" d="M174.331666,82.7253368 C180.145779,82.7337817 187.590164,82.8448769 196.663906,83.0583851 C198.335496,83.0984781 199.832599,83.8123101 200.901787,84.9340172 C201.970965,86.055713 202.612236,87.5852773 202.572174,89.2568521 C202.566029,89.5132872 202.543595,89.7690701 202.505637,90.0210855 L202.505637,90.0210855 L187.258112,190.694034 C187.033942,192.174133 186.285739,193.461212 185.219333,194.378265 C184.152928,195.295319 182.76832,195.842348 181.271342,195.842348 L181.271342,195.842348 L29.5128345,195.842348 C27.941712,195.842348 26.5011259,195.241435 25.4195374,194.249196 C24.337949,193.256958 23.6153583,191.873394 23.4802267,190.308094 L23.4802267,190.308094 L16.9324105,114.461277 C16.7886517,112.795419 17.3337288,111.229002 18.3312102,110.043111 C19.3286948,108.857216 20.7785859,108.051851 22.44445,107.908101 C22.7069987,107.885446 22.9707466,107.879954 23.2340131,107.891685 C73.0944366,110.113445 106.067662,109.949978 122.158037,107.442241 C134.552668,105.510497 138.974546,101.269146 142.404446,96.650054 L142.692091,96.2588522 C142.977687,95.8668375 143.257603,95.4725138 143.536053,95.0770471 L143.953153,94.4831353 C144.052944,94.3408915 144.152806,94.1985322 144.252994,94.0561266 L144.554785,93.6288396 C147.385323,89.6408203 150.668882,85.6706474 159.955334,83.2358873 C161.595907,82.8847061 165.965599,82.7339952 173.051111,82.7251689 L173.051111,82.7251689 Z"></path>
<g fill-rule="nonzero" transform="translate(10.000000, 8.000000)" id="？">
<path fill="url(#linearGradient-2)" id="形状" d="M82.2662252,0 C73.8593113,0 67.2701085,2.36538462 62.3850098,7.09615385 C58.112551,11.7321423 55.663112,18.098838 55.036693,26.1962409 L55.036736,26.1962442 C54.7612504,29.757307 57.424737,32.8674438 60.9857997,33.1429294 C64.5468624,33.4184149 67.6569992,30.7549283 67.9324848,27.1938656 C67.9453236,27.0279053 67.9517501,26.8615111 67.9517501,26.6950549 C67.9517501,26.6950549 67.9517501,26.6950549 67.9517501,26.6950549 C67.9517501,21.9642857 68.8606057,18.2472527 70.7919238,15.6565934 C72.9504557,12.5027473 76.472271,11.0384615 81.4709766,11.0384615 C85.3336128,11.0384615 88.4010003,12.0521978 90.5595323,14.1923077 C92.6044573,16.3324176 93.7405267,19.260989 93.7405267,22.978022 C93.7405267,25.793956 92.7180642,28.4972527 90.6731392,30.9752747 L89.3098559,32.5521978 C81.9254044,39.0851648 77.4947335,43.8159341 76.0178432,46.8571429 C73.7457043,50.5741758 70.8302693,56.0647174 73.7457043,59.4725275 C76.6611394,62.8803375 84.012692,61.1582252 86.8105031,59.4725275 C89.6083141,57.7868297 86.8105031,53.0562915 88.5146072,50.5741758 C90.2187114,48.0920602 91.01396,46.6318681 93.0588851,44.9423077 C98.5120184,40.2115385 101.80662,37.1703297 102.829082,36.043956 C105.555649,32.4395604 107.032539,27.8214286 107.032539,22.1895604 C107.032539,15.3186813 104.7604,9.91208791 100.216123,5.96978022 C95.6718448,1.91483516 89.6506767,0 82.2662252,0 Z M80.2213002,64.9917582 C77.7219474,64.9917582 75.6770224,65.7802198 73.9729182,67.3571429 C72.268814,68.9340659 71.4735654,70.9615385 71.4735654,73.4395604 C71.4735654,75.9175824 72.268814,77.9450549 73.9729182,79.521978 C75.6770224,81.0989011 77.7219474,82 80.2213002,82 C82.720653,82 84.765578,81.2115385 86.4696822,79.6346154 C88.1737864,78.0576923 89.082642,75.9175824 89.082642,73.4395604 C89.082642,70.9615385 88.1737864,68.9340659 86.5832892,67.3571429 C84.879185,65.7802198 82.720653,64.9917582 80.2213002,64.9917582 Z"></path>
<path transform="translate(20.423770, 57.472031) rotate(-24.000000) translate(-20.423770, -57.472031)" fill="url(#linearGradient-3)" id="形状" d="M21.0447149,36.472031 C16.8413085,36.472031 13.5467467,37.6835694 11.1042267,40.1066464 C8.9656825,42.4837787 7.74063569,45.7493144 7.42908634,49.9032534 L7.42903787,49.9032498 C7.29546332,51.6842213 8.63094245,53.2362676 10.411914,53.3698421 C12.1928855,53.5034167 13.7449318,52.1679375 13.8785063,50.386966 C13.8845423,50.3064879 13.8875634,50.225812 13.8875634,50.1451079 C13.8875634,50.1451079 13.8875634,50.1451079 13.8875634,50.1451079 C13.8875634,47.722031 14.3419857,45.8181848 15.3076332,44.4912617 C16.3868861,42.8758771 18.1477726,42.1258771 20.6470953,42.1258771 C22.5783902,42.1258771 24.1120655,42.6451079 25.1913185,43.7412617 C26.2137687,44.8374156 26.7817966,46.3374156 26.7817966,48.2412617 C26.7817966,49.6835694 26.2705715,51.0681848 25.2481213,52.3374156 L24.5664878,53.1451079 C20.8743065,56.4912617 18.6589977,58.9143387 17.9205615,60.472031 C16.7845057,62.3758771 15.3268057,65.1881058 16.7845057,66.9335694 C18.2422057,68.6790331 21.9179377,67.7969756 23.3168264,66.9335694 C24.7157151,66.0701633 23.3168264,63.6472046 24.1688683,62.3758771 C25.0209101,61.1045496 25.4185296,60.3566464 26.4409798,59.4912617 C29.1675137,57.0681848 30.8147946,55.5104925 31.3260197,54.9335694 C32.6892867,53.0874156 33.4277229,50.722031 33.4277229,47.8374156 C33.4277229,44.3181848 32.2916671,41.548954 30.0195556,39.5297233 C27.747444,37.4528002 24.7368962,36.472031 21.0447149,36.472031 Z M20.0222647,69.7604925 C18.7726033,69.7604925 17.7501531,70.1643387 16.8981113,70.972031 C16.0460694,71.7797233 15.6484499,72.8181848 15.6484499,74.0874156 C15.6484499,75.3566464 16.0460694,76.3951079 16.8981113,77.2028002 C17.7501531,78.0104925 18.7726033,78.472031 20.0222647,78.472031 C21.271926,78.472031 22.2943762,78.0681848 23.1464181,77.2604925 C23.9984599,76.4528002 24.4528822,75.3566464 24.4528822,74.0874156 C24.4528822,72.8181848 23.9984599,71.7797233 23.2032209,70.972031 C22.351179,70.1643387 21.271926,69.7604925 20.0222647,69.7604925 Z"></path>
<path transform="translate(169.938823, 48.052038) rotate(45.000000) translate(-169.938823, -48.052038)" fill="url(#linearGradient-4)" id="形状" d="M170.726632,22.0520382 C165.391433,22.0520382 161.20979,23.5520382 158.109606,26.5520382 C155.398312,29.4918304 153.843862,33.5290673 153.446256,38.6637491 L153.446271,38.6637503 C153.271274,40.9236588 154.96143,42.8975394 157.221338,43.072536 C159.481247,43.2475326 161.455127,41.5573776 161.630124,39.297469 C161.638287,39.1920464 161.642374,39.0863478 161.642374,38.9806096 C161.642374,38.9806096 161.642374,38.9806096 161.642374,38.9806096 C161.642374,35.9806096 162.219152,33.6234668 163.444806,31.9806096 C164.814654,29.9806096 167.04967,29.0520382 170.221951,29.0520382 C172.673259,29.0520382 174.619885,29.6948953 175.989734,31.0520382 C177.287485,32.4091811 178.008458,34.2663239 178.008458,36.6234668 C178.008458,38.4091811 177.359582,40.1234668 176.061831,41.6948953 L175.196664,42.6948953 C170.51034,46.8377525 167.698546,49.8377525 166.761281,51.7663239 C165.319335,54.1234668 163.469141,57.6052736 165.319335,59.7663239 C167.16953,61.9273742 171.834975,60.835303 173.610523,59.7663239 C175.386071,58.6973448 173.610523,55.6974913 174.691983,54.1234668 C175.773442,52.5494422 176.278123,51.6234668 177.575874,50.5520382 C181.036544,47.5520382 183.127365,45.6234668 183.776241,44.9091811 C185.506576,42.6234668 186.443841,39.6948953 186.443841,36.1234668 C186.443841,31.7663239 185.001895,28.3377525 182.118003,25.8377525 C179.234112,23.2663239 175.412956,22.0520382 170.726632,22.0520382 Z M169.428881,63.2663239 C167.84274,63.2663239 166.544989,63.7663239 165.46353,64.7663239 C164.38207,65.7663239 163.877389,67.0520382 163.877389,68.6234668 C163.877389,70.1948953 164.38207,71.4806096 165.46353,72.4806096 C166.544989,73.4806096 167.84274,74.0520382 169.428881,74.0520382 C171.015021,74.0520382 172.312772,73.5520382 173.394231,72.5520382 C174.475691,71.5520382 175.052469,70.1948953 175.052469,68.6234668 C175.052469,67.0520382 174.475691,65.7663239 173.466329,64.7663239 C172.384869,63.7663239 171.015021,63.2663239 169.428881,63.2663239 Z"></path>
<g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="异常页面插画">
<g id="缺省页_暂无数据">
<rect height="1024" width="1024" y="0" x="0" id="bg"></rect>
<g transform="translate(64.000000, 64.000000)" id="暂无数据">
<rect height="896" width="896" y="0" x="0" id="矩形"></rect>
<g fill-rule="nonzero" transform="translate(0.000000, 112.000000)" id="53">
<polygon points="145.6 582.4 448 488.00879 448 106.8 145.6 194.508453" fill="#CED3DE" id="Path"></polygon>
<polygon points="750.4 582.4 448 488.00879 448 106.8 750.4 194.508453" opacity="0.4" fill="#6D7C9A" id="Path"></polygon>
<polygon points="149.2372 574.413241 445.8328 480.441379 445.8328 105.952828 149.2372 188.244966" fill="#CED3DC" id="Path"></polygon>
<polygon points="742.4284 574.413241 445.8328 480.441379 445.8328 105.952828 742.4284 188.244966" fill="#D8DCE3" id="Path"></polygon>
<polygon points="448 672 145.6 577.523445 145.6 190.4 448 284.876555" fill="url(#linearGradient-1)" id="Path"></polygon>
<polygon points="448 672 750.4 577.523445 750.4 190.4 448 284.876555" fill="url(#linearGradient-1)" id="Path"></polygon>
<polygon points="379.484891 604.8 145.6 578.530993 145.6 190.4 448 285.122445" opacity="0.09" fill="url(#linearGradient-2)" id="Path"></polygon>
<polygon points="516.515109 541.012346 750.4 582.4 750.4 201.6 448 294.533333" opacity="0.2" fill="url(#linearGradient-3)" id="Path"></polygon>
<polygon points="448 107.003077 306.338133 0 0 104.073846 146.696533 201.6" fill="url(#linearGradient-4)" id="Path"></polygon>
<polygon points="448 107.003077 589.661867 0 896 104.073846 749.303467 201.6" fill="url(#linearGradient-5)" id="Path"></polygon>
<polygon points="146.696533 190.4 448 284.916951 297.7024 380.8 0 282.013991" fill="#F4F8FD" id="Path"></polygon>
<polygon points="749.303467 190.4 448 284.916951 598.289067 380.8 896 282.013991" fill="#F2F6FA" id="Path"></polygon>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/config/ag-grid-locale.ts
View file @ 6d0e800a
......@@ -96,7 +96,7 @@ export default {
copy: '复制',
ctrlC: 'Ctrl+C',
copyWithHeaders: '带标题的复制',
copyWithGroupHeaders: '带组标题的复制',
copyWithGroupHeaders: '带标题组的复制',
paste: '粘贴',
ctrlV: 'Ctrl+V',
export: '导出',
......
src/css/app.scss
View file @ 6d0e800a
......@@ -97,7 +97,7 @@ a:hover {
// 标题列调整大小句柄颜色
--ag-header-column-resize-handle-color: var(--my-ag-grid-active) !important;
--ag-selected-row-background-color: var(--my-ag-grid-primary-1) !important;
--ag-selected-row-background-color: var(--my-ag-grid-primary-2) !important;
--ag-range-selection-background-color: var(--my-ag-grid-primary-2) !important;
--ag-row-hover-color: var(--my-ag-grid-primary-1) !important;
--ag-column-hover-color: var(--my-ag-grid-primary-1) !important;
......
src/css/quasar.variables.scss
View file @ 6d0e800a
......@@ -63,6 +63,6 @@ $header-heigyht: 50px;
--my-ag-grid-primary-1: rgba(165, 189, 22, 0.1);
--my-ag-grid-primary-2: rgba(165, 189, 22, 0.2);
--my-ag-grid-active: rgb(127, 143, 37);
--my-ag-grid-active: rgb(97, 112, 17);
--my-ag-grid-text: #fff7f7;
}
src/modules/page9/IndexPage.vue
View file @ 6d0e800a
......@@ -18,6 +18,7 @@ import AgGridStudy from './element/AgGridStudy2.vue';
import AgGridMaster from './element/AgGridMaster.vue';
import AgGridDetailGrids from './element/AgGridDetailGrids.vue';
import AgGridTreeData from './element/AgGridTreeData.vue';
import AgGridTreeFileBrowser from './element/AgGridTreeFileBrowser.vue';
const listData = [
{
......@@ -56,10 +57,14 @@ const listData = [
title: 'Ag Grid 表格树',
name: 'ag-grid-tree-data',
},
{
title: 'Ag Grid 表格树 文件浏览器例子',
name: 'ag-grid-tree-file-browser',
},
];
const isShow = ref(true);
const elementName = ref('ag-grid-tree-data');
const elementTitle = ref('Ag Grid 表格树');
const elementName = ref('ag-grid-tree-file-browser');
const elementTitle = ref('Ag Grid 表格树 文件浏览器例子');
function onclick(data: any) {
elementTitle.value = data.title;
......@@ -101,6 +106,9 @@ function goBack() {
<ag-grid-master v-if="elementName === 'ag-grid-master'" />
<ag-grid-detail-grids v-if="elementName === 'ag-grid-detail-grids'" />
<ag-grid-tree-data v-if="elementName === 'ag-grid-tree-data'" />
<ag-grid-tree-file-browser
v-if="elementName === 'ag-grid-tree-file-browser'"
/>
</div>
</div>
<div v-else>
......
src/modules/page9/config.ts
View file @ 6d0e800a
......@@ -71,3 +71,83 @@ export const getData = function () {
// },
// ];
};
export const getData2 = function () {
const rowData = [
{
id: 1,
filePath: ['Documents'],
},
{
id: 2,
filePath: ['Documents', 'txt'],
},
{
id: 3,
filePath: ['Documents', 'txt', 'notes.txt'],
dateModified: 'May 21 2017 01:50:00 PM',
size: 14.7,
},
{
id: 4,
filePath: ['Documents', 'pdf'],
},
{
id: 5,
filePath: ['Documents', 'pdf', 'book.pdf'],
dateModified: 'May 20 2017 01:50:00 PM',
size: 2.1,
},
{
id: 6,
filePath: ['Documents', 'pdf', 'cv.pdf'],
dateModified: 'May 20 2016 11:50:00 PM',
size: 2.4,
},
{
id: 7,
filePath: ['Documents', 'xls'],
},
{
id: 8,
filePath: ['Documents', 'xls', 'accounts.xls'],
dateModified: 'Aug 12 2016 10:50:00 AM',
size: 4.3,
},
{
id: 9,
filePath: ['Documents', 'stuff'],
},
{
id: 10,
filePath: ['Documents', 'stuff', 'xyz.txt'],
dateModified: 'Jan 17 2016 08:03:00 PM',
size: 1.1,
},
{
id: 11,
filePath: ['Music', 'mp3', 'pop'],
dateModified: 'Sep 11 2016 08:03:00 PM',
size: 14.3,
},
{
id: 12,
filePath: ['temp.txt'],
dateModified: 'Aug 12 2016 10:50:00 PM',
size: 101,
},
{
id: 13,
filePath: ['Music', 'mp3', 'pop', 'theme.mp3'],
dateModified: 'Aug 12 2016 10:50:00 PM',
size: 101,
},
{
id: 14,
filePath: ['Music', 'mp3', 'jazz'],
dateModified: 'Aug 12 2016 10:50:00 PM',
size: 101,
},
];
return rowData;
};
src/modules/page9/element/AgGridTreeFileBrowser.vue 0 → 100644
View file @ 6d0e800a
<!--
* Ag Grid 表格树 文件浏览器例子
* https://www.ag-grid.com/vue-data-grid/tree-data/#file-browser-example
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { date } from 'quasar';
import { AgGridVue } from 'ag-grid-vue3';
import { useMessage } from 'src/common/hooks';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
import { getData2 } from '../config';
const defaultColDef = {
flex: 1,
filter: true,
sortable: true,
resizable: true,
};
const { warn } = useMessage();
const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);
const state = reactive({
columnDefs: [
{
field: 'dateModified',
headerName: '修改时间',
minWidth: 250,
comparator: (d1: any, d2: any) => {
return new Date(d1).getTime() < new Date(d2).getTime() ? -1 : 1;
},
valueFormatter: (params: any) => {
const timeStamp = new Date(params.value);
return date.formatDate(timeStamp, 'YYYY-MM-DD HH:mm:ss');
},
},
{
field: 'size',
headerName: '大小',
aggFunc: 'sum',
valueFormatter: (params: any) => {
return params.value
? Math.round(params.value * 10) / 10 + ' MB'
: '0 MB';
},
},
],
rowData: [] as any,
});
const autoGroupColumnDef = reactive({
headerName: '文件',
minWidth: 330,
cellRendererParams: {
checkbox: true,
suppressCount: true,
innerRenderer: getFileCellRenderer(),
},
});
onMounted(() => {
setTimeout(() => {
state.rowData = getData2();
console.log('rowData', state.rowData);
}, 1000);
});
function onGridReady(params: any) {
gridApi.value = params.api;
gridColumnApi.value = params.columnApi;
}
function getDataPath(data: any) {
return data.filePath;
}
function getRowId(params: any) {
return params.data.id;
}
function addNewGroup() {
const newGroupData = [
{
id: getNextId(),
filePath: ['Music', 'wav', 'hit_' + new Date().getTime() + '.wav'],
dateModified: new Date(),
size: 58.9,
},
];
gridApi.value.applyTransaction({ add: newGroupData });
}
function moveSelectedNodeToTarget(targetRowId: any) {
console.log('moveSelectedNodeToTarget', targetRowId);
let selectedNode = gridApi.value.getSelectedNodes()[0]; // single selection
if (!selectedNode) {
warn('没有选择节点！');
return;
}
let targetNode = gridApi.value.getRowNode(targetRowId);
if (!targetNode) {
warn('目标文件不存在！');
return;
}
let invalidMove =
selectedNode.key === targetNode.key ||
isSelectionParentOfTarget(selectedNode, targetNode);
if (invalidMove) {
warn('无效选择 - 不能是父级或与目标相同！');
return;
}
let rowsToUpdate = getRowsToUpdate(selectedNode, targetNode.data.filePath);
gridApi.value.applyTransaction({ update: rowsToUpdate });
}
function removeSelected() {
let selectedNode = gridApi.value.getSelectedNodes()[0]; // single selection
if (!selectedNode) {
warn('没有选择节点！');
return;
}
gridApi.value.applyTransaction({ remove: getRowsToRemove(selectedNode) });
}
function getFileCellRenderer() {
class FileCellRenderer {
init(params: any) {
let tempDiv = document.createElement('div');
let value = params.value;
let icon = getFileIcon(params.value);
tempDiv.innerHTML = icon
? '<span><i class="' +
icon +
'" style="font-size: 16px"></i>' +
'&nbsp;' +
'<span class="filename"></span>' +
value +
'</span>'
: value;
const that: any = this;
that.eGui = tempDiv.firstChild;
}
getGui() {
const that: any = this;
return that.eGui;
}
refresh() {
return false;
}
}
return FileCellRenderer;
}
function getFileIcon(name: any) {
return endsWith(name, '.mp3') || endsWith(name, '.wav')
? 'far fa-file-audio'
: endsWith(name, '.xls')
? 'far fa-file-excel'
: endsWith(name, '.txt')
? 'far fa-file'
: endsWith(name, '.pdf')
? 'far fa-file-pdf'
: 'far fa-folder';
}
function endsWith(str: any, match: any) {
let len;
if (str == null || !str.length || match == null || !match.length) {
return false;
}
len = str.length;
return str.substring(len - match.length, len) === match;
}
function getNextId() {
const _window: any = window;
if (!_window.nextId) {
_window.nextId = 15;
} else {
_window.nextId++;
}
return _window.nextId;
}
function isSelectionParentOfTarget(selectedNode: any, targetNode: any) {
let children = selectedNode.childrenAfterGroup || [];
for (let i = 0; i < children.length; i++) {
if (targetNode && children[i].key === targetNode.key) return true;
isSelectionParentOfTarget(children[i], targetNode);
}
return false;
}
function getRowsToUpdate(node: any, parentPath: any) {
let res: any = [];
let newPath = parentPath.concat([node.key]);
if (node.data) {
// groups without data, i.e. 'filler groups' don't need path updated
// 没有数据的组，即“填充组”不需要更新路径
node.data.filePath = newPath;
}
let children = node.childrenAfterGroup || [];
for (let i = 0; i < children.length; i++) {
let updatedChildRowData = getRowsToUpdate(children[i], newPath);
res = res.concat(updatedChildRowData);
}
// ignore nodes that have no data, i.e. 'filler groups'
// 忽略没有数据的节点，即“填充组”
return node.data ? res.concat([node.data]) : res;
}
function getRowsToRemove(node: any) {
let res: any = [];
const children = node.childrenAfterGroup || [];
for (let i = 0; i < children.length; i++) {
res = res.concat(getRowsToRemove(children[i]));
}
// ignore nodes that have no data, i.e. 'filler groups'
// 忽略没有数据的节点，即“填充组”
return node.data ? res.concat([node.data]) : res;
}
</script>
<template>
<div class="box">
<div class="btns">
<q-btn
color="primary"
label="在Music下添加一个新组"
no-caps
@click="addNewGroup"
/>
<q-btn
color="primary"
label="移动到stuff文件夹中"
no-caps
@click="moveSelectedNodeToTarget('9')"
/>
<q-btn
color="primary"
label="删除所选组和它的子组"
no-caps
@click="removeSelected"
/>
</div>
<!--
rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
animateRows=true：启用行动画
:masterDetail="true" 启用展开的细节网格行
:isRowMaster="isRowMaster" 确定哪一个行该展开
-->
<div class="ag-table">
<ag-grid-vue
style="height: 500px"
class="ag-theme-alpine"
:localeText="AG_GRID_LOCALE"
:columnDefs="state.columnDefs"
:rowData="state.rowData"
:defaultColDef="defaultColDef"
:animateRows="true"
:pagination="true"
:paginationPageSize="5"
@grid-ready="onGridReady"
:treeData="true"
:getDataPath="getDataPath"
:getRowId="getRowId"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDefaultExpanded="-1"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped>
.btns {
padding: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
column-gap: 10px;
}
.ag-table {
padding: 0 10px 10px 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment