数据未填充使用jsgrid创建的表 [英] Data not populating the table created using jsgrid

问题描述

我正在使用jsgrid创建可编辑表.我使用了演示中的代码.唯一的区别是即时通讯使用mvc而不是Web api.

I'm using jsgrid to create an editable table. i used the code from this demo. The only difference is im using mvc instead of web api.

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

Looking at the network, the controller returns the needed json data and jsgrid also shows the pagination stuff on the bottom of the table. However, the table is not being populated

这是html和javascript代码

Here's the html and javascript code

<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>

这是控制器中的相关方法

Here's the relevant method in the controller

 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);
        }

有人知道我该怎么做才能将返回的数据显示/绑定到表中吗?

Anyone know what i can do to display/bind the returned data to the table?

推荐答案

这是我使用的客户端javascript，最终将一些数据放入网格中:(仅是控制器部分)

This is the client side javascript that I used which finally put some data in the grid: (just the controller part)

                    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返回了一个承诺.

None of the posted explicit promise code functioned at all. Apparently $.ajax returns a promise.

这是我用Ajax(C#)调用的MVC控制器代码:

and this was my MVC controller code that I called with ajax (C#):

    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的实际示例.但这对我没用-请注意没有标题或任何内容.

There are no actual examples of required Json for jsGrid. anywhere but this worked for me - note no headers or anything.

这篇关于数据未填充使用jsgrid创建的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！