ag-gridのLoadingオーバーレイをカスタマイズ。
ag-gridのデフォルトはLoadingと文字が表示されますが、今回は簡単に簡単なLoadingを実装する。で紹介したepic-spinners
を利用してみます。
Loadingオーバーレイ コンポーネント
epic-spinner
のコンポーネントを中央に表示します。
Loading.vue
<template>
<div
class="loading"
>
<atom-spinner :animation-duration="2000"
:size="250"
color="#26A69A"
class="spinner"
/>
</div>
</template>
<script>
import Vue from "vue";
import Numeral from "numeral";
import { AtomSpinner } from "epic-spinners";
export default Vue.extend({
components: {
AtomSpinner
}
});
</script>
<style scoped>
.loading {
background-color: #FFFFFF
}
.spinner {
margin: 0 auto;
}
</style>
使用する。
使用するには、loadingOverlayComponentFramework
に作成したコンポーネントを指定するだけです。
また、Loadingの表示非表示は、grid-apiのshowLoadingOverlay
,hideOverlay
を利用する必要があります。
以下は、データ更新ボタンを押下した際に、作成したLodingオーバーレイを表示する例です。
<template>
<div>
<div>
<button
@click="updateRowData"
>
データ更新
</button>
</div>
<div>
<ag-grid-vue
class="ag-theme-material"
style="height: 500px"
:gridOptions="gridOptions"
:rowDataChanged="onRowDataChanged"
/>
</div>
</div>
</template>
<script>
import { FingerprintSpinner } from 'epic-spinners';
import { AgGridVue } from "ag-grid-vue";
import Loading from "./ag-grid/overlay/Loading";
import { LAST_NAMES, FIRST_NAMES, PREFECTURES } from "../datas";
export default {
name: "AgGridSample",
components: {
FingerprintSpinner ,
AgGridVue
},
data() {
return {
gridOptions: null
};
},
created() {
this.gridOptions = {
columnDefs: this.createColumnDef(),
rowData: this.createRowData(),
enableSorting: true,
enableFilter: true,
suppressDragLeaveHidesColumns: true,
loadingOverlayComponentFramework: Loading,
}
},
methods: {
createColumnDef() {
return [
{
headerName: "苗字",
field: "lastName"
},
{
headerName: "名",
field: "firstName"
},
{
headerName: "性別",
field: "sex"
},
{
headerName: "年齢",
field: "age"
},
{
headerName: "都道府県",
field: "prefecture"
}
];
},
/**
* 行データ変更時の処理。
*/
onRowDataChanged() {
this.$nextTick(() =>{
// 列幅をgridに合わせる。
this.gridOptions.api.sizeColumnsToFit();
});
},
/**
* ag-gridで表示するデータを作成。
*
*/
createRowData() {
return [...Array(1000)].map(() => {
const sex = ["MALE", "FEMALE"][Math.floor(Math.random() * 2)];
return {
sex,
lastName: LAST_NAMES[Math.floor(Math.random() * LAST_NAMES.length)],
firstName:
FIRST_NAMES[sex][
Math.floor(Math.random() * FIRST_NAMES[sex].length)
],
age: Math.floor(Math.random() * 30),
prefecture:
PREFECTURES[Math.floor(Math.random() * PREFECTURES.length)]
};
});
},
async updateRowData() {
this.gridOptions.api.showLoadingOverlay();
await this.timeout(10000);
this.gridOptions.api.setRowData(this.createRowData());
this.gridOptions.api.hideOverlay();
},
/**
* setTimeoutのPromise化
*/
timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
};
</script>
<style scoped>
.loading {
margin: 0 auto;
}
button {
color: #FFFFFF;
background-color: #2196f3;
padding: 10px 16px;
}
</style>
ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり!
中日ドラゴンズを応援してます。
コメント