gridjs - 如何在 Vue 2.x 中使用自定义 HTTP 请求和分页、排序、搜索

Question

我是一名在东京制作网络系统的工程师。

我正在使用 Grid.js 制作一个搜索系统，但我遇到了一个问题。
我不知道解决方案，因为它不在文档中。

由于这个系统使用 Vue 2.x，它使用 axios.post 和 Custom HTTP Requset。
我能够获得列表，但在实现排序、分页和关键字搜索时遇到了麻烦。

我想通过 Post 请求发送参数。

请告诉我如何实现这一点。

代码如下

    data() {
        return {
            columns: [
                {name: 'user name', id: 'user_name'},
                {name: 'email', id: 'email'},
            ],
            page: {
                enabled: true,
                limit:  100,
                server: {
                    body: (prev, page) => {
                        console.log(page) // OK, show page number 0,1,2...
                        return {
                            page: page
                        }
                    }
                },
            },
            sort: {
            },
            search: {
                server: {
                    // url: (prev, keyword) => `${prev}?q=${keyword}`
                    // what's this.
                }
            },
            server: {
                url: '/api/v2/users/list',
                method: 'POST',
                async data (opt) {
                    let response = await axios.post(opt.url)
                    return {
                        data: response.data.results.map(item => {
                            return {
                                username: item.username,
                                email: item.email,
                            }
                        }),
                        total: response.data.count,
                    }
                }
            },
        };

Answer 1

好的。设置 POST 有效负载。

    data() {
        return {
            columns: [
                {name: 'user name', id: 'user_name'},
                {name: 'email', id: 'email'},
            ],
            page: {
                enabled: true,
                limit:  100,
                server: {
                    body: (prev, page) => {
                        console.log(page) // OK, show page number 0,1,2...
                        return {
                            page: page
                        }
                    }
                },
            },
            sort: {
            },
            search: {
                server: {
                    // url: (prev, keyword) => `${prev}?q=${keyword}`
                    // what's this.
                }
            },
            server: {
                url: '/api/v2/users/list',
                method: 'POST',
                body: {},
                async data (opt) {
                    let response = await axios.post(opt.url)
                    return {
                        data: response.data.results.map(item => {
                            return {
                                username: item.username,
                                email: item.email,
                            }
                        }),
                        total: response.data.count,
                    }
                }
            },
        };