SlickGridがMVCアプリケーションにSQLデータを表示しない

Question

This post on StackOverflowでは、SQLデータがMVCアプリケーションのSlickGridに表示されないという問題が説明されています。私は同じ問題を抱えています。 www.example.com/aqi/Products/Indexに移動すると、SlickGridが表示されますが、SQLのarticle_creatorカラムのデータは表示されません。

のWebインスペクタネットワークタブはSlickGridに表示されますSQLからarticle_creator列にデータが表示されます。この例では、テキスト "Test"がSlickGridに表示されます。他のポストで

、解決策は、エラーのWebインスペクタコンソールをチェックしました。私のブラウザの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つは有効な配列アイテムから、もう1つは新しい行のために信じています。これは、列fieldのプロパティまたは不正なデータセットにタイプミスがある場合にのみ発生します。