SlickGrid가 MVC 응용 프로그램에서 SQL 데이터를 표시하지 않음

Question

This post on StackOverflow는 SQL 데이터가 MVC 응용 프로그램의 SlickGrid에 표시되지 않는 문제를 설명합니다. 나는 같은 문제를 겪고있다. www.example.com/aqi/Products/Index로 이동하면 SlickGrid가 표시되지만 SQL의 article_creator 열의 데이터는 표시되지 않습니다.

웹 인스펙터 네트워크 탭은 SlickGrid에 나타납니다 SQL에서 article_creator 열에서 데이터를 표시합니다. 이 예제에서 "Test"라는 텍스트가 SlickGrid에 나타납니다. 다른 게시물에

이 솔루션은 오류에 대한 웹 관리자 콘솔을 확인했다. 내 브라우저 Web Inspector 콘솔에는 오류가 없으므로 다음에 무엇을해야할지 확신하지 못합니다.

컨트롤러/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; 
     } 
    } 
} 

스크립트/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); 
}) 

보기/제품/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 개의 빈 행이있는 것으로 나타났습니다. 당신이 enableAddRow:true을 설정 한 이후로 나는 유효한 배열 항목에서 1을, 다른 줄에서 새로운 행을 믿습니다. 이것은 field 속성의 데이터 집합이나 잘못된 데이터 집합에 오타가있는 경우에만 발생합니다.