SlickGrid 未在 MVC 应用程序中显示 SQL 数据

Question

Whosebug 上的

This post 描述了一个问题，即来自 SQL 的数据未显示在 MVC 应用程序的 SlickGrid 中。我有同样的问题。当我导航到 www.example.com/aqi/Products/Index 时，SlickGrid 会显示，但 SQL 中 article_creator 列的数据不会出现。

Web Inspector 网络选项卡显示 SQL 中 article_creator 列中应显示在 SlickGrid 中的数据。在此示例中，文本 "Test" 应出现在 SlickGrid 中。

在另一个 post 中，解决方案是检查 Web Inspector 控制台是否有错误。我的浏览器 Web Inspector 控制台没有错误，所以我不确定下一步该怎么做。

Controllers/AppController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using aqi.Models;

namespace aqi.Controllers
{
    public class ProductsController : Controller
    {

        public ActionResult Index()
        {
            return View(db.Products.ToList());
        }

        public JsonResult GetSlickGridData()
        {
            var slickGridData = db.Products.ToList();
            var jsonResult = Json(slickGridData, JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;
            return jsonResult;
        }
    }
}

Scripts/SlickGridProducts.js

var grid;
var columns = [
    { id: "article_creator", name: "article_creator", field: "article_creator", width: 100 }
];
var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false
};

$(function () {
    var slickdata = [];
    $.getJSON("/aqi/Products/GetSlickGridData", function (items) {
        for (var i = 0; i < items.length; i++) {
            slickdata[i] = {
                article_creator: items[i].article_creator
            };
        }
    });

    grid = new Slick.Grid("#myGrid", slickdata, columns, options);
})

View/Products/Index.cshtml

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/smoothness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridProducts.js")" type="text/javascript"></script>

<div id="myGrid"></div>

Answer 1

您需要将网格初始化放在 $.getJSON 回调中，因为它是异步的。例如

$(function () {
    var slickdata = [];
    $.getJSON("/aqi/Products/GetSlickGridData", function (items) {
        for (var i = 0; i < items.length; i++) {
            slickdata[i] = {
                article_creator: items[i].article_creator
            };
        }
       grid = new Slick.Grid("#myGrid", slickdata, columns, options);
    });
})

或者，如果你想在没有数据的情况下预先显示网格，然后在拉取数据后刷新它，那么。

$(function () {
    var slickdata = [];
    grid = new Slick.Grid("#myGrid", slickdata, columns, options);

    $.getJSON("/aqi/Products/GetSlickGridData", function (items) {
        for (var i = 0; i < items.length; i++) {
            slickdata[i] = {
                article_creator: items[i].article_creator
            };
        }
        //set the new data here and invalidate the grid
        grid.setData(slickdata);
        grid.invalidate();
    });
})

注意：我刚刚注意到图像中有 2 个空行。我相信 1 来自有效的数组项，另一个来自新行，因为您设置了 enableAddRow:true。仅当您在 field 属性` 列或数据集不正确时才会出现这种情况。

SlickGrid 未在 MVC 应用程序中显示 SQL 数据

SlickGrid not displaying SQL data in an MVC application

asp.net-mvc

slickgrid