如何使用Razor將JSON數據加載到SlickGrid中MVC-4

我是jquery，光滑的網格和剃鬚刀的新手。我已經通過SlickGrid示例，並能夠將靜態數據加載到SlickGrid中。現在我試圖從MSSQL中加載JSON數據到我的SlickGrid中。我在網上看到了一些例子，但我相信我錯過了這些例子中沒有提到的東西。如何使用Razor將JSON數據加載到SlickGrid中MVC-4

這是我的代碼。

SlickGridProducts.js var grid;

var columns = [ 
    { id: "ProductID", name: "ProductID", field: "ProductID", width: 50 }, 
    { id: "ItemDesc", name: "ItemDesc", field: "ItemDesc", width: 200 }, 
    { id: "DivName", name: "DivName", field: "DivName", width: 50 }, 
    { id: "DeptDesc", name: "DeptDesc", field: "DeptDesc", width: 75 }, 
    { id: "ClassDesc", name: "ClassDesc", field: "ClassDesc", width: 100 }, 
    { id: "SubClassDesc", name: "SubClassDesc", field: "SubClassDesc", width: 100 } 
]; 
var options = { 
    editable: true, 
    enableAddRow: true, 
    enableCellNavigation: true, 
    asyncEditorLoading: false, 
    autoEdit: false 
}; 

$(function() { 

    var slickdata = []; 
    $.getJSON("/Products/GetSlickGridData", function (items) { 
     for (var i = 0; i < items.length; i++) { 
      slickdata[i] = { 
       ProductID: items[i].ProductID, 
       ItemDesc: items[i].ItemDesc, 
       DivName: items[i].DivName, 
       DeptDesc: items[i].DeptDesc, 
       ClassDesc: items[i].ClassDesc, 
       SubClassDesc: items[i].SubClassDesc 
      }; 
     } 
    }); 

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

    grid.setActiveCell(0, 0); 
})

產品/ Index.cshtml

@model IEnumerable<JQGrid.Models.Product> 

@{ 
    ViewBag.Title = "Index"; 
} 

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.event.drag.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/SlickGrid/slick.core.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/SlickGrid/slick.grid.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/SlickGridProducts.js")" type="text/javascript"></script> 

<h2>Index</h2> 

<div id="myGrid" style="width:800px;height:300px;"></div>

ProductsController.cs

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

namespace JQGrid.Controllers 
{ 
    public class ProductsController : Controller 
    { 
     private ProductPickerEntities db = new ProductPickerEntities(); 

     // 
     // GET: /Products/ 

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

... 

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

如果我加入JsonResult GetSlickGridData（斷點），看slickGridData，我看到它填充了所有我想要的東西在我的slickgrid。

有了這一切，我得到的是一個空白的白色框我的光滑網格。我認爲問題出在我的js中，我正在填寫slickdata，但不知道要修復什麼。

** * *修訂* ****

，我發現我的問題之一，但slickgrid仍是空白。我的問題是返回的json結果太大。所以，我修改了ProductsController.cs代碼現在說

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

雖然我還以爲這是在MVC-4解決這解決了最大長度誤差。

來源

2013-03-11 user2157563

您是否檢查瀏覽器控制檯是否有錯誤？ – Romoku 2013-03-11 17:08:32

瀏覽器控制檯中唯一的錯誤是Timestamp：3/11/2013 11:33:10 AM 錯誤：錯誤：SlickGrid的'enableColumnReorder = true'選項要求加載jquery-ui.sortable模塊源文件：http：/ /localhost:62378/Scripts/SlickGrid/slick.grid.js Line：212 – user2157563 2013-03-11 18:49:38

一旦我爲jquery-ui-1.10.1.custom.js添加腳本（這包括可排序的），它會顯示網格和我的數據。 – user2157563 2013-03-11 18:52:24

您是否檢查瀏覽器控制檯的錯誤？

來源

2013-03-12 00:59:49 Romoku

瀏覽器錯誤控制檯顯示js包括我缺少slickgrid工作jquery-ui-1.10.1.custom.js – user2157563 2013-03-12 15:34:05

您正在初始化grid.setSelectionModel(new Slick.RowSelectionModel());，但未包括對其的引用。

它是slick.rowselectionmodel.js，通常在Plugins文件夾下。

來源

2013-03-11 18:03:16 GvM

如何使用Razor將JSON數據加載到SlickGrid中MVC-4

回答

相關問題