未填充使用 jsgrid 创建的表的数据

Data not populating the table created using jsgrid

本文关键字：数据 创建 jsgrid 填充      更新时间：2023-09-26

我正在使用jsgrid创建一个可编辑的表。 我使用了这个演示中的代码。唯一的区别是im使用mvc而不是web api。

查看网络，控制器返回所需的json数据，jsgrid还在表底部显示分页内容。但是，未填充该表

这是 html 和 javascript 代码

<div id="jsGrid"></div>
@section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
    $("#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 (filter) {
                return $.ajax({
                    type: "GET",
                    url: "get",
                    data: filter,
                    dataType: "json"
                });
            },
            insertItem: function (item) {
            },
            updateItem: function (item) {
            },
            deleteItem: function (item) {
            }
        },
        fields: [
            { name: "SKU", type: "text", width: 50 },
            { name: "PartNumber", type: "text", width: 100 },
            { name: "ProductLineName", type: "text", width: 50 },
            { name: "ProductLineId", type: "text", width: 50 },
            { name: "Deleted", type: "checkbox", sorting: false },
            { type: "control" }
        ]
    });
</script>

这是控制器中的相关方法

 public async Task<ActionResult> Get()
        {
            var query = db.Products
                .Select(p => new ProductDto()
                {
                    PartNumber = p.PartNumber,
                    SKU = p.SKU,
                    ProductLineName = p.ProductLines.ProductLineName,
                    ProductLineId = p.ProductLineId,
                    Deleted = p.Deleted
                });
            var products = await query.ToListAsync();
            return Json(products, JsonRequestBehavior.AllowGet);
        }

有人知道我可以做些什么来显示/绑定返回的数据到表中吗？

更改 loadData 调用，因为它没有指定在 ajax 调用完成时要做什么。

尝试像下面这样重写它：

controller: {
        loadData: function() {
        var d = $.Deferred();
        $.ajax({
            url: "get",
            dataType: "json",
            data: filter
        }).done(function(response) {
            d.resolve(response.value);
        });
        return d.promise();
    }
},
这是我

使用的客户端javascript，它最终将一些数据放入网格中： （只是控制器部分）

                    controller: {
                        loadData: function (filter) {
                            console.log("1. loadData");
                            return $.ajax({
                                type: "GET",
                                url: "/Timesheet/GetTimesheet/",
                                dataType: "json",
                                data: filter
                            console.log("3. loadData complete");
                        }

发布的所有显式承诺代码都没有运行。显然 $.ajax 返回了一个承诺。

这是我使用 ajax （C#） 调用的 MVC 控制器代码：

    public async Task<ActionResult> GetTimesheet()
    {
        int id = Convert.ToInt32(Session["UID"]);
        var tl = (
            from ts in db.Tasks
            orderby ts.Task_Date descending
            where ts.Emp_ID == id
            select new
            {
                ID = ts.Task_ID,
                Date = ts.Task_Date,
                Client = ts.Customer_ID,
                Hours = ts.Total_Hours
            }
        ).Take(4);
        var jsonData = await tl.ToListAsync();
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

没有 jsGrid 所需的 Json 的实际示例。 任何地方，但这对我有用 - 注意没有标题或任何东西。

相关文章：