在 MVC 中调用 Controller/WebService 加载 jsGrid

Question

我真的很难使用控制器服务加载 jsGrid。我无法正确完成。

我什至尝试了 jsGrid 站点演示中的示例代码，但这也不起作用，它在 !this.data.length 处抛出错误，或者网格根本无法加载。

我每次尝试使用以下代码时都没有得到任何数据。

如果有人能提供帮助，我们将不胜感激。

这是加载 jsGrid 的方式：

$(element).jsGrid({
   height: 300,
   width: "100%",
    filtering: true,
    sorting: true,
    paging: true,
    autoload: true,
    pageLoading: true,

    controller: {
        loadData: function (filter) {
            $.ajax({
                type: "GET",
                url: "../Common/GetData",
                data: filter,
                dataType: "JSON"
            });
        }
    },
    pageSize: 10,
    pageButtonCount: 5,
    pageIndex: 1,

    noDataContent: "No Record Found",
    loadIndication: true,
    loadIndicationDelay: 500,
    loadMessage: "Please, wait...",
    loadShading: true,

    fields: [
        { name: "Name", type: "textarea", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select" },
         {
             name: "", type: "text", width: 50, sorting: false, filtering: false,
             itemTemplate: function (value) {
                 return '<div class="edit-container"><a class="edit-custom-field-link">Edit</a><div class="sort-icon-container"><div class="up-arrow-icon"></div><div class="down-arrow-icon"></div></div></div>';
             }
         }
        //{ name: "Married", type: "checkbox", title: "Is Married", sorting: false }
        //,{ type: "control" }
    ]
});

Answer 1

你应该在加载数据时使用 promises，

loadData: function(filter) {

  return $.ajax({
        type: "GET",
        url: "../Common/GetData",
        data: filter,
        dataType: "JSON"
    })

}

return $.ajax({}) 做了 return 一个承诺。谢谢

Answer 2

为了 return 一个 promise，请为 loadData 尝试此代码：

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

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

            return d.promise();
        }

Answer 3

我也遇到了 JSGrid 的问题。我正在使用以下代码片段（正如一些人所建议的那样）：

`

loadData:   function(filter) {
    console.log("LoadData called....")
    var d = $.Deferred();
    $.ajax({
      type: "GET",
      url: "/secure/msgitems",
      data: filter
    }).done(function(response) {
      console.log(  response);
      d.resolve(response);
      return;
  });
 return d.promise();
 },
},

`

我可以看到返回的结果，但我的 jsGrid 一直在呕吐。事实证明，服务器必须 return 以下格式的数据：

{<br> 数据：[项目]， itemsCount：amountOfItems }

这里是开发者讨论这个话题的地方：https://github.com/tabalinas/jsgrid/issues/35

似乎可行...FWIW

在 MVC 中调用 Controller/WebService 加载 jsGrid

Loading jsGrid by calling Controller/WebService in MVC

jquery

asp.net-mvc-4

jsgrid