GridView分頁邏輯與前端框架結合

在Web開發中，GridView分頁邏輯通常與前端框架結合使用，以實現用戶友好的界面和高效的數據處理。以下是一些常見的前端框架（如React、Vue和Angular）與GridView分頁邏輯結合的方法：

React

在React中，可以使用狀態管理庫（如Redux或Context API）來管理分頁狀態，并使用第三方庫（如react-pagination）來實現分頁組件。

1. 安裝依賴：

   npm install react-pagination
   

2. 創建分頁組件：

   import React, { useState } from 'react';
   import { Link } from 'react-router-dom';
   import Pagination from 'react-pagination';
   
   const GridView = ({ data, fetchData }) => {
     const [currentPage, setCurrentPage] = useState(1);
     const [itemsPerPage] = useState(10);
   
     const changePage = (newPage) => {
       setCurrentPage(newPage);
       fetchData(newPage, itemsPerPage);
     };
   
     const totalPages = Math.ceil(data.length / itemsPerPage);
   
     return (
       <div>
         {data.map((item, index) => (
           <div key={index}>{item}</div>
         ))}
         <Pagination
           activePage={currentPage}
           onPageChange={changePage}
           totalPages={totalPages}
           pageRangeDisplayed={5}
         />
       </div>
     );
   };
   
   export default GridView;
   

3. 父組件中使用GridView：

   import React, { useEffect } from 'react';
   import GridView from './GridView';
   
   const App = () => {
     const [data, setData] = useState([]);
   
     const fetchData = async (page, itemsPerPage) => {
       // 模擬API調用
       const response = await fetch(`/api/data?page=${page}&itemsPerPage=${itemsPerPage}`);
       const newData = await response.json();
       setData(newData);
     };
   
     useEffect(() => {
       fetchData(1, 10);
     }, []);
   
     return (
       <div>
         <GridView data={data} fetchData={fetchData} />
       </div>
     );
   };
   
   export default App;
   

Vue

在Vue中，可以使用Vuex來管理分頁狀態，并使用第三方庫（如vue-pagination-2）來實現分頁組件。

1. 安裝依賴：

   npm install vue-pagination-2
   

2. 創建分頁組件：

   <template>
     <div>
       <ul>
         <li v-for="item in paginatedData" :key="item">{{ item }}</li>
       </ul>
       <pagination
         :current-page.sync="currentPage"
         :page-count="totalPages"
         @current-change="changePage"
       ></pagination>
     </div>
   </template>
   
   <script>
   import Pagination from 'vue-pagination-2';
   
   export default {
     components: {
       Pagination
     },
     data() {
       return {
         currentPage: 1,
         itemsPerPage: 10,
         totalPages: 0,
         data: []
       };
     },
     computed: {
       paginatedData() {
         const start = (this.currentPage - 1) * this.itemsPerPage;
         const end = start + this.itemsPerPage;
         return this.data.slice(start, end);
       }
     },
     methods: {
       changePage(newPage) {
         this.currentPage = newPage;
         this.fetchData();
       },
       fetchData() {
         // 模擬API調用
         this.totalPages = Math.ceil(this.data.length / this.itemsPerPage);
         // 這里可以替換為實際的API請求
         setTimeout(() => {
           this.data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
         }, 1000);
       }
     },
     mounted() {
       this.fetchData();
     }
   };
   </script>
   

3. 父組件中使用GridView：

   <template>
     <div>
       <GridView />
     </div>
   </template>
   
   <script>
   import GridView from './GridView.vue';
   
   export default {
     components: {
       GridView
     }
   };
   </script>
   

Angular

在Angular中，可以使用服務來管理分頁狀態，并使用第三方庫（如ngx-pagination）來實現分頁組件。

1. 安裝依賴：

   npm install ngx-pagination
   

2. 創建分頁組件：

   import { Component, OnInit } from '@angular/core';
   import { PaginationService } from './pagination.service';
   
   @Component({
     selector: 'app-grid-view',
     templateUrl: './grid-view.component.html',
     styleUrls: ['./grid-view.component.css']
   })
   export class GridViewComponent implements OnInit {
     currentPage: number = 1;
     itemsPerPage: number = 10;
     totalPages: number = 0;
     data: any[] = [];
   
     constructor(private paginationService: PaginationService) {}
   
     ngOnInit(): void {
       this.fetchData();
     }
   
     fetchData() {
       // 模擬API調用
       this.totalPages = Math.ceil(this.data.length / this.itemsPerPage);
       // 這里可以替換為實際的API請求
       setTimeout(() => {
         this.data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
       }, 1000);
     }
   
     changePage(newPage: number) {
       this.currentPage = newPage;
       this.paginationService.updateCurrentPage(this.currentPage);
     }
   }
   

3. 服務中管理分頁狀態：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class PaginationService {
     currentPage: number = 1;
   
     updateCurrentPage(newPage: number) {
       this.currentPage = newPage;
     }
   }
   

4. 父組件中使用GridView：

   import { Component } from '@angular/core';
   import { GridViewComponent } from './grid-view/grid-view.component';
   import { PaginationService } from './pagination.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     constructor(private paginationService: PaginationService) {}
   }
   

5. 模板中使用分頁組件：

   <div>
     <app-grid-view></app-grid-view>
   </div>
   

通過以上示例，可以看到不同前端框架與GridView分頁邏輯結合的基本方法。實際應用中，可以根據具體需求進行調整和優化。