Syncfusion Javascript 和 Aspnetboilerplate

Question

我正在使用 aspnetboilerplate 和 JQuery。我想用 Syncfusion 的 DataGrid 替换标准 DataTables Grid，以测试可能的替换。不幸的是，我没有运气让它正常工作。

作为一个简单的测试，我正在使用用户应用服务。

值得注意的是，我正在努力实现以下目标：

1. 使用参数从我的 AppService 获取远程数据，即 maxResultCount、跳过计数（即分页参数）、排序和搜索关键字...标准的东西
2. 带有内联编辑的简单增删改查（使用带有数据表的弹出窗口）
3. 数据导出/PDF导出

我的主要问题是我无法获得使用数据表、分页、加载指示器、排序、过滤/搜索实现的功能。

首先，我尝试简单地将

abp.services.app.user.GetAll()

与 DataManager 一起使用，但很快意识到实现这种方式比需要的要复杂得多，所以我实现了以下内容：

class AbpApiAdaptor extends ej.data.WebApiAdaptor {
    processResponse(e) {
        var data = e.result;

        const result = {
            result: data.items,
            count: data.totalCount
        };

        return result;
    }
}

var data = new ej.data.DataManager({
    adaptor: new AbpApiAdaptor({
        requestType: 'POST'
    }),
    url: `${abp.appPath}api/services/app/User/GetAll`,
    query: new ej.data.Query().addParams({
        maxResultCount: 1,
    }),
});

console.log("Data", data);

var grid = new ej.grids.Grid(
    {
        dataSource: data,
        allowPaging: true,
        pageSettings: { pageSize: 10 },
        allowFiltering: true,
        allowGrouping: true,
        loadingIndicator: { indicatorType: 'Shimmer' },
        columns: [...]
    }
);

grid.appendTo('#UsersGrid');

首先，我需要扩展

WebApiAdaptor

，以便我可以重写

processResponse

来更改响应数据，以便DataGrid可以显示它，果然，我正在网格中获取数据。

问题： 所提出的请求是一个

GET

请求。我尝试将 requestType 设置为

POST

但失败。尝试在数据管理器和适配器中设置它，但没有成功。如果我将

.executeQuery(new ej.data.Query().take(10)).then((e) =>

添加到 DataManager，我可以进一步修改结果，但这不是我想要做的，因为我可以在服务器上而不是客户端上进行过滤和分页......并包括

executeQuery

结果无论如何，网格上都没有显示任何内容......显然这里缺少一些东西。

因此，我需要从远程源发出“读取”的 POST 请求，并从 DataGrid 收集其他信息（分页信息、搜索关键字、排序等）。

任何有关如何执行此操作的示例，或者可以指导我走上正确道路的文档都将不胜感激。

Answer 1

您可以使用 URLAdaptor 在服务器端执行网格操作，如分页、搜索、排序、过滤等，该 URLAdaptor 内置支持按需处理网格操作。请参阅以下文档了解更多详细信息。

文档：https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/remote-data#handling-on-demand-grid-actions

如果您想向服务器发送其他参数，请参阅以下文档。

文档：https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/data-binding#sending-additional-parameters-to-the-server

请参阅以下 CustomDataAdaptor 文档以根据需要处理请求和响应。

文档：https://ej2.syncfusion.com/javascript/documentation/data/adaptors#custom-data-adaptor