如何使用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解决这解决了最大长度误差。

您是否检查浏览器控制台是否有错误？ – 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

答

您是否检查浏览器控制台的错误？

浏览器错误控制台显示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文件夹下。

如何使用Razor将JSON数据加载到SlickGrid中MVC-4

相关推荐