我正在尝试使用 SlickGrid 创建一个网格来编辑 ASP.NET MVC 项目中的一些记录。
目前我无法弄清楚如何使记录实际显示为表格。SlickGrid 看起来像这样：
我一直在我的样式表和 javascript 文件中寻找可能导致这种情况的东西，但我不确定我应该寻找什么。任何人都可以提供帮助吗？
据我所知，我非常密切地遵循了 SlickGrid 示例。
样式表包括：
<link href="../../Content/SlickGrid/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/SlickGrid/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
Javascript 包括：
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jsonp-2.4.0.min.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/slick.core.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/slick.editors.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/slick.remotemodel.js"></script>
<script type="text/javascript" src="../../Scripts/SlickGrid/slick.grid.js"></script>
Javascript代码：
var columns = [
{ id: "FileTypeId", name: "File Type", field: "FileTypeId", editor: Slick.Editors.Integer, sortable: false },
{ id: "DateCp", name: "Date/CP", field: "DateCp", editor: Slick.Editors.Date, sortable: false },
{ id: "VesselId", name: "Vessel", field: "VesselId", editor: Slick.Editors.Integer, sortable: false },
{ id: "FixtureNo", name: "Fixture No", field: "FixtureNo", editor: Slick.Editors.Text, sortable: false },
{ id: "VoyageNo", name: "Voy No", field: "VoyageNo", editor: Slick.Editors.Integer, sortable: false },
{ id: "VegoilVoyageNo", name: "Vegoil Voy No", field: "VegoilVoyageNo", editor: Slick.Editors.Text, sortable: false },
{ id: "Remarks", name: "Remarks", field: "Remarks", editor: Slick.Editors.LongText, sortable: false }
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder: false,
autoEdit: true
};
var grid;
$(function () {
$.getJSON('<%= Url.Action("BoxFiles", "Box", new { id = Model.Id }) %>', function (data) {
grid = new Slick.Grid("#files", data, columns, options);
grid.render();
});
});