jsGrid 调用 Controller .Net Core - 单元格不加载数据

Question

使用 jsGrid / .net core 2.2 / MVC 我在我的 ajax 调用中成功返回数据并登录到控制台，但我不知道为什么没有填充这些字段？

我的观点

<div id="jsGrid"></div>

@section scripts {
<script>
    $(function () {

        $("#jsGrid").jsGrid({
            height: "50%",
            width: "100%",

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

            pageSize: 10,
            pageButtonCount: 5,

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

            controller: {
                loadData: function () {
                    var d = $.Deferred();

                    $.ajax({
                        type: 'GET',
                        url: "/operator/GridJson",
                        dataType: "json",
                        success: function (data) {
                            d.resolve(data);
                            console.log('success ', data);
                        },
                        error: function (e) {
                            alert("error: " + e.responseText);
                        }
                    });

                    return d.promise();
                }                    
            },

            fields: [
                { name: "OperatorId", type: "number", width: 50 },
                { name: "FirstName", type: "text", width: 150 },
                { name: "LastName", type: "text", width: 150 },
                { name: "LicenseNumber", type: "number", width: 50, filtering: false },
                { name: "RFIDNumber", type: "number", width: 50, filtering: false },
                { name: "DateCreated", type: "date", width: 50, filtering: false },
                { name: "LastUpdated", type: "date", width: 50, filtering: false },
                { name: "CompanyId", type: "number", width: 50 }
                //    { type: "control" }
            ]
        });
        console.log("test");

    });
</script>
}

我的控制器方法

[HttpGet]
public string GridJson()
{
    List<OperatorDetail> operators = service.GetOperators();

    string json = JsonConvert.SerializeObject(operators);

    return json;

}

控制台日志

(5) [{…}, {…}, {…}, {…}, {…}]
0: {OperatorId: 1, FirstName: "driver1", LastName: "driver1", LicenseNumber: 12345, RFIDNumber: 12345, …}
1: {OperatorId: 2, FirstName: "driver2", LastName: "driver2", LicenseNumber: 23456, RFIDNumber: 23456, …}
2: {OperatorId: 3, FirstName: "driver3", LastName: "driver3", LicenseNumber: 34567, RFIDNumber: 34567, …}
3: {OperatorId: 4, FirstName: "driver4", LastName: "driver4", LicenseNumber: 45678, RFIDNumber: 45678, …}
4: {OperatorId: 5, FirstName: "driver5", LastName: "driver5", LicenseNumber: 56789, RFIDNumber: 56789, …}
length: 5
__proto__: Array(0)

Answer 1

原因是您的loadData() async 函数在您收到响应之前返回。

要解决这个问题，请更改您的 loadData 函数以返回一个承诺。

loadData: function(filter){
    return $.ajax({
        type:"GET",
        url: "/operator/GridJson",
        data:filter,
        dataType:"JSON",
    });
}

[编辑]

实际上，如果您使用F12 开发人员工具检查源代码，您会发现这些字段已经呈现。事实证明，我们还需要更改height: "100%"，因为它会使这些字段不可见。

以下是工作示例的完整列表：

$("#jsGrid").jsGrid({ 宽度：“100%”， 身高：“100%”， 高度：“400px”， 插入：真， 编辑：是的， 排序：真， 分页：真， 自动加载：真， 页面大小：10， pageButtonCount: 5, //deleteConfirm: "你真的要删除客户端吗？", 控制器： { 加载数据：函数（过滤器）{ 返回 $.ajax({ 类型：“获取”， 网址：“/书/索引”， 数据：过滤器， 数据类型：“JSON”， }); } }, 字段：[ { name: "OperatorId", type: "number", width: 50 }, { 名称：“名字”，类型：“文本”，宽度：150 }， { 名称：“姓氏”，类型：“文本”，宽度：150 }， { name: "LicenseNumber", type: "number", width: 50, 过滤: false }, { 名称：“RFIDNumber”，类型：“数字”，宽度：50，过滤：false }， {名称：“日期创建”，类型：“日期”，宽度：50，过滤：假}， { 名称：“LastUpdated”，类型：“日期”，宽度：50，过滤：false }， { 名称：“CompanyId”，类型：“编号”，宽度：50 } // { 类型：“控制” } ] });

演示：

Answer 2

我最近遇到了同样的问题，我花了一段时间才找到其他人也向我指出。 itminus 提供了很大一部分解决方案，但由于您启用了分页，因此您需要以特定的 JSON 对象返回数据。

{ 
  data: [{your list here}],
  itemsCount: {int}
}

它几乎不在文档中，因为它是内联的并且不是很明显。 （加粗我的。）

loadData 是一个返回数据数组或 jQuery 承诺的函数，该函数将使用数据数组解析（当 pageLoading 为 true 时，结构体 { data: [items], itemsCount: [total items count ] } 应该返回）。接受过滤器参数，包括当前过滤器选项和分页参数

http://js-grid.com/docs/#controller