如何:使用JsGrid进行服务器端筛选

使用jsGrid进行服务器端筛选涉及到以下几个步骤：

设置服务器端API：确保你的服务器端API能够处理筛选请求，并返回筛选后的数据。
配置jsGrid：在jsGrid配置中设置controller，以便在进行筛选时发送请求到服务器端。
处理筛选参数：在服务器端处理传入的筛选参数，并返回相应的数据。

以下是一个详细的示例，展示了如何实现这一过程。

1. 设置服务器端API

假设你使用的是Node.js和Express来设置服务器端API。你需要创建一个API端点来处理筛选请求。

const express = require('express');
const app = express();
const port = 3000;

// 示例数据
const data = [
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Jane", age: 30 },
    { id: 3, name: "Bob", age: 35 },
    // 更多数据...
];

app.get('/api/data', (req, res) => {
    const { name, age } = req.query;

    // 进行筛选
    let filteredData = data;
    if (name) {
        filteredData = filteredData.filter(item => item.name.includes(name));
    }
    if (age) {
        filteredData = filteredData.filter(item => item.age == age);
    }

    res.json(filteredData);
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

2. 配置jsGrid

在前端，使用jsGrid并配置controller来发送筛选请求到服务器端API。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsGrid Server-side Filtering</title>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
</head>
<body>
    <div id="jsGrid"></div>

    <script>
        $(function() {
            $("#jsGrid").jsGrid({
                width: "100%",
                height: "400px",

                filtering: true,
                inserting: false,
                editing: false,
                sorting: true,
                paging: true,
                autoload: true,

                pageSize: 10,
                pageButtonCount: 5,

                deleteConfirm: "Do you really want to delete the client?",

                controller: {
                    loadData: function(filter) {
                        return $.ajax({
                            type: "GET",
                            url: "/api/data",
                            data: filter
                        });
                    }
                },

                fields: [
                    { name: "id", type: "number", width: 50 },
                    { name: "name", type: "text", width: 150 },
                    { name: "age", type: "number", width: 50 },
                    { type: "control" }
                ]
            });
        });
    </script>
</body>
</html>