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

标签 javascript jquery jsgrid

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

查看网络, Controller 返回所需的 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>

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

有人知道我可以做什么来显示/绑定(bind)返回的数据到表吗?

最佳答案

更改您的 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 - 数据未填充使用 jsgrid 创建的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35907482/

相关文章:

Javascript document.getElementById().value ='' 字段已执行但没有效果

javascript - 失去焦点时将输入设置为只读

javascript - 在 jQuery 的 div 之间添加 div

javascript - 加载js-grid然后过滤数据

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

javascript - 让复选框递归标记复选框

javascript - 如何在node.js中从一个文件调用JS函数到另一个文件?

javascript - 使用javascript更改div的文本

javascript - 使用 jquery 从没有标识符的 JSON 数组中选择第一个元素

javascript - JSGrid - 加载 JSON 数据 - "Not Found"