AG-Grid ialah perpustakaan grid data JavaScript yang berkuasa, sesuai untuk membina jadual dinamik dan berprestasi tinggi dengan ciri seperti pengisihan, penapisan dan penomboran. Dalam artikel ini, kami akan mencipta API dalam Go untuk menyokong AG-Grid, mendayakan operasi data sebelah pelayan yang cekap, termasuk penapisan, pengisihan dan penomboran. Dengan menyepadukan AG-Grid dengan Go API, kami akan membangunkan penyelesaian teguh yang memastikan prestasi lancar, walaupun semasa bekerja dengan set data yang besar.

Prasyarat

• Pergi 1.21
• MySQL

Projek persediaan

Menyediakan kebergantungan projek Go.

go mod init app
go get github.com/gin-gonic/gin
go get gorm.io/gorm
go get gorm.io/driver/mysql
go get github.com/joho/godotenv

Buat pangkalan data ujian bernama "contoh" dan jalankan fail database.sql untuk mengimport jadual dan data.

Struktur projek

├─ .env
├─ main.go
├─ config
│  └─ db.go
├─ controllers
│  └─ product_controller.go
├─ models
│  └─ product.go
├─ public
│  └─ index.html
└─ router
   └─ router.go

Fail projek

.env

Fail ini mengandungi maklumat sambungan pangkalan data.

DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=example
DB_USER=root
DB_PASSWORD=

db.go

Fail ini menyediakan sambungan pangkalan data menggunakan GORM. Ia mengisytiharkan pembolehubah global DB untuk memegang contoh sambungan pangkalan data untuk digunakan kemudian dalam aplikasi kami.

package config

import (
    "fmt"
    "os"

    "github.com/joho/godotenv"
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
    "gorm.io/gorm/schema"
)

var DB *gorm.DB

func SetupDatabase() {
    godotenv.Load()
    connection := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s?charset=utf8mb4&parseTime=true", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD"), os.Getenv("DB_HOST"), os.Getenv("DB_PORT"), os.Getenv("DB_DATABASE"))
    db, _ := gorm.Open(mysql.Open(connection), &gorm.Config{NamingStrategy: schema.NamingStrategy{SingularTable: true}})
    DB = db
}

router.go

Fail ini menyediakan penghalaan untuk aplikasi web Gin. Ia memulakan penghala untuk API DataTables dan menyediakan fail index.html statik pada URL akar.

package router

import (
    "app/controllers"

    "github.com/gin-gonic/gin"
)

func SetupRouter() {
    productController := controllers.ProductController{}
    router := gin.Default()
    router.StaticFile("/", "./public/index.html")
    router.GET("/api/products", productController.Index)
    router.Run()
}

product.go

Fail ini mentakrifkan model Produk untuk aplikasi.

package models

type Product struct {
    Id int
    Name string
    Price float64
}

product_controller.go

Fail ini mentakrifkan fungsi untuk mengendalikan permintaan masuk dan mengembalikan data DataTables.

package controllers

import (
    "app/config"
    "app/models"
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
)

type ProductController struct {
}

func (con *ProductController) Index(c *gin.Context) {
    size, _ := strconv.Atoi(c.DefaultQuery("length", "10"))
    start, _ := strconv.Atoi(c.Query("start"))
    order := "id"
    if c.Query("order[0][column]") != "" {
        order = c.Query("columns[" + c.Query("order[0][column]") + "][data]")
    }
    direction := c.DefaultQuery("order[0][dir]", "asc")
    var products []models.Product
    query := config.DB.Model(&products)
    var recordsTotal, recordsFiltered int64
    query.Count(&recordsTotal)
    search := c.Query("search[value]")
    if search != "" {
        search = "%" + search + "%"
        query.Where("name like ?", search)
    }
    query.Count(&recordsFiltered)
    query.Order(order + " " + direction).
        Offset(start).
        Limit(size).
        Find(&products)
    c.JSON(http.StatusOK, gin.H{"draw": c.Query("draw"), "recordsTotal": recordsTotal, "recordsFiltered": recordsFiltered, "data": products})
}

Fail product_controller.go mentakrifkan pengawal untuk mengurus permintaan API berkaitan produk dalam aplikasi Go menggunakan rangka kerja Gin. Ia menampilkan kaedah Indeks yang mendapatkan semula senarai produk yang dinomborkan berdasarkan parameter pertanyaan untuk penomboran, pengisihan dan carian. Kaedah mengekstrak parameter untuk penomboran, membina pertanyaan untuk mengambil produk daripada pangkalan data dan menggunakan penapisan jika istilah carian disediakan. Selepas mengira jumlah produk yang sepadan, ia memesan dan mengehadkan hasil sebelum mengembalikan respons JSON yang mengandungi data produk dan jumlah kiraan, memudahkan penyepaduan dengan aplikasi bahagian hadapan.

main.go

Fail ini adalah pintu masuk utama permohonan kami. Ia akan membuat dan menyediakan aplikasi web Gin.

package main

import (
    "app/config"
    "app/router"
)

func main() {
    config.SetupDatabase()
    router.SetupRouter()
}

index.html

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
</head>
<body>
    <div>



<p>The index.html file sets up a web page that uses the AG-Grid library to display a dynamic data grid for products. It includes a grid styled with the AG-Grid theme and a JavaScript section that constructs query parameters for pagination, sorting, and filtering. The grid is configured with columns for ID, Name, and Price, and it fetches product data from an API endpoint based on user interactions. Upon loading, the grid is initialized, allowing users to view and manipulate the product list effectively.</p>

<h2>
  
  
  Run project
</h2>



<pre class="brush:php;toolbar:false">go run main.go

Buka pelayar web dan pergi ke http://localhost:8080

Anda akan menemui halaman ujian ini.

Menguji

Ujian saiz halaman

Tukar saiz halaman dengan memilih 50 daripada menu lungsur "Saiz Halaman". Anda akan mendapat 50 rekod setiap halaman, dan halaman terakhir akan berubah daripada 5 kepada 2.

Ujian menyusun

Klik pada pengepala lajur pertama. Anda akan melihat bahawa lajur id akan diisih dalam tertib menurun.

Ujian carian

Masukkan "tidak" dalam kotak teks carian lajur "Nama", dan anda akan melihat data hasil yang ditapis.

Kesimpulan

Kesimpulannya, kami telah menyepadukan AG-Grid dengan Go API dengan berkesan untuk mencipta penyelesaian grid data yang mantap dan cekap. Dengan menggunakan keupayaan bahagian belakang Go, kami membolehkan AG-Grid mengendalikan penapisan, pengisihan dan penomboran sebelah pelayan, memastikan prestasi lancar walaupun dengan set data yang besar. Penyepaduan ini bukan sahaja mengoptimumkan pengurusan data tetapi juga meningkatkan pengalaman pengguna dengan jadual dinamik dan responsif pada bahagian hadapan. Dengan AG-Grid dan Go berfungsi secara harmoni, kami telah membina sistem grid berskala dan berprestasi tinggi yang sangat sesuai untuk aplikasi dunia sebenar.

Kod sumber: https://github.com/stackpuz/Example-AG-Grid-Go

Buat Apl Web CRUD dalam Minit: https://stackpuz.com