我正在尝试在 JqGrid 中显示数据,我在这里做了类似Metanit的所有操作 ,除了我从数据库中获取数据。问题是网格是空的,尽管列表中有数据。不知道可能是什么问题?
我要显示的课程
public class AcademicPerformance{
public int Id { get; set; }
public int Student_Id { get; set; }
public int Semester { get; set; }
public string Name_Sub { get; set; }
public int Mark { get; set; }
}
标记
@{
Layout = null;
}
<html>
<head>
<title>jqGrid</title>
<script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-ui-1.10.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<body>
<h2>jQGrid</h2>
<table id="jqg"></table>
<script type="text/javascript">
$(document).ready(function () {
$("#jqg").jqGrid({
url: '@Url.Action("GetData", "Account")',
datatype: "json",
colNames: ['Id', 'Студент', 'Семестр', 'Дисциплина', 'Оценка'],
colModel: [
{ name: 'Id', index: 'Id', width: 30, stype: 'text' },
{ name: 'Student_Id', index: 'Student_Id', width: 150, sortable: true },
{ name: 'Semester', index: 'Semester', width: 150, sortable: true },
{ name: 'Name_Sub', index: 'Name_Sub', width: 150, sortable: true},
{ name: 'Mark', index: 'Mark', width: 150, sortable: true }
],
rowNum: 5, // число отображаемых строк
loadonce:true, // загрузка только один раз
sortname: 'Id', // сортировка по умолчанию по столбцу Id
sortorder: "desc", // порядок сортировки
caption: "Данные"
});
});
</script>
</body>
</html>
方法
public ActionResult Cabinet(){
AppContext db = new AppContext();
int id = Convert.ToInt32(Session["id"]);
var list = db.AcademicPerformances.Where(x => x.Student_Id == id).ToList();
foreach(var el in list)
{
academicPerformances.Add(new AcademicPerformance { Id = el.Id, Student_Id = el.Student_Id, Semester = el.Semester, Name_Sub = el.Name_Sub, Mark = el.Mark});
}
return View();
}
public string GetData(){
return JsonConvert.SerializeObject(academicPerformances);
}
响应的结构与预期不符。
http://trirand.com/blog/jqgrid/jqgrid.html - 加载数据 - JSON 数据
查看链接上有关 jqGrid 库版本的评论。