我在Asp.net工作mvc4我试着在其中包含一个jqgrid,但是当我运行该程序时它不会显示任何内容请帮我解决这个问题
查看
@{
ViewBag.Title = "Index";
}
<head>
<link rel="stylesheet" href="../../css/RGStyle.css" type="text/css" />
<link rel="stylesheet" href="../../Styles/ui.jqgrid.css" type="text/css" />
<script type="text/javascript" src="../../Script/JQGrid/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../Script/JQGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Script/JQGrid/grid.locale-en.js"></script>
<link href="../../Styles/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<h>list Details</h>
</head>
<body>
<table id="tblJQGrid">
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#tblJQGrid").jqGrid({
url: 'list/Getlist_Details',
datatype: "json",
mtype: 'GET',
colNames: ['Period', 'Year', 'Entity', 'SubmitStatus', 'SubmittedOn'],
colModel: [
{ name: 'Period', index: 'Period', width: 20, stype: 'text' },
{ name: 'Year', index: 'Year', width: 150 },
{ name: 'Entity', index: 'Entity', width: 150 },
{ name: 'SubmitStatus', index: 'SubmitStatus', width: 100 },
{ name: 'SubmittedOn', index: 'SubmittedOn', width: 80, align: "right" },
],
rowNum: 10,
viewrecords: true,
caption: "CheckList Details",
scrollOffset: 0
});
});
</script>
</body>
控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using X.Y.Controllers;
using X.Y;
namespace X.Y.Controllers
{
public class listController : Controller
{
//
// GET: /DelegateChecklist/
Common com = new Common();
CheckListAssign ck = new CheckListAssign();
public listController()
{
com.Load_Labels();
}
public ActionResult CMS_Checklist()
{
return View();
}
public JsonResult Getlist_Details()
{
List<X.Models.list_Model> checklistsend = new List<Models.list_Model>();
checklistsend.Add(new X.Models.list_Model()
{
Period="Feb",
Year="2010",
Entity="ABC",
SubmitStatus="null",
SubmittedOn="2014"
});
checklistsend.Add(new X.Models.list_Model()
{
Period = "Mar",
Year = "2010",
Entity = "ABC",
SubmitStatus = "null",
SubmittedOn = "2014"
});
checklistsend.Add(new X.Models.list_Model()
{
Period = "Apr",
Year = "2010",
Entity = "ABC",
SubmitStatus = "null",
SubmittedOn = "2014"
});
var checklistReturn = Json(checklistsend, JsonRequestBehavior.AllowGet );
return checklistReturn;
}
}
}
模态
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace X.Y.Models
{
public class list_Model
{
public string Period { get; set; }
public string Year { get; set; }
public string Entity { get; set; }
public string SubmitStatus {get;set;}
public string SubmittedOn { get; set; }
}
}
当我运行程序时,我只得到页面的标题。我没有得到任何jqgrid.Any的帮助将不胜感激。
答案 0 :(得分:0)
你应该明白,如果你想用数据填充 JQrid ,你应该将特定的Json
集合传递给它。有两种方法可以做到。
如果您使用默认JQgrid设置,则可以将此集合传递给Json()
Controller
方法:
public class Row
{
public string id { get; set; }
public List<string> cell { get; set; }
public Row()
{
cell = new List<string>();
}
}
public class JqgridData
{
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<Row> rows { get; set; }
public JqgridData()
{
rows = new List<Row>();
}
}
cell
只是string array
个list_Model
字段的$.extend(jQuery.jgrid.defaults, {
jsonReader: {
root: "Elements",
page: "PageSelected",
total: "PagesAll",
records: "RowsAll",
repeatitems: false,
id: "Id"
},
prmNames:
{
sort: "SortField",
page: "SelectedPage",
rows: "RowsOnPage",
order: "SortDirection",
search: "Search",
nd: null,
}
});
。
您可以使用不同的Bindings初始化 JQgrid ,并使其填充您的收藏数据。
然后你应该像这样更改 JQgrid 默认值:
Json()
然后您可以将此课程传递给Controller
public class Set<T>
{
public Set(List<T> elements, int rowsOnPage, int pageSelected, int rowsAll)
{
Elements = elements;
PageSelected = pageSelected;
RowsOnPage = rowsOnPage;
RowsAll = rowsAll;
PagesAll = (rowsAll % RowsOnPage == 0)
? rowsAll / RowsOnPage
: rowsAll / RowsOnPage + 1; ;
}
public int RowsOnPage { get; set; }
public List<T> Elements { get; set; }
public int? RowsAll { get; set; }
public int PageSelected { get; set; }
public int PagesAll { get; set; }
}
方法:
Controller
您可以在 return Json(new Set<list_Model>(checklistsend,
checklistsend.Count(),
1,
checklistsend.Count()),
JsonRequestBehavior.AllowGet);
中使用它,如下所示:
{{1}}
但是你应该记住,你的类中的字段名称应该匹配Jqgrid定义中的字段。
答案 1 :(得分:0)
最后我找到了答案 问题出在document.ready函数中,当我删除它时它工作正常
$("#tblJQGrid").jqGrid({
url: 'list/Getlist_Details',
datatype: "json",
mtype: 'GET',
colNames: ['Period', 'Year', 'Entity', 'SubmitStatus', 'SubmittedOn'],
colModel: [
{ name: 'Period', index: 'Period', width: 20, stype: 'text' },
{ name: 'Year', index: 'Year', width: 150 },
{ name: 'Entity', index: 'Entity', width: 150 },
{ name: 'SubmitStatus', index: 'SubmitStatus', width: 100 },
{ name: 'SubmittedOn', index: 'SubmittedOn', width: 80, align: "right" },
],
rowNum: 10,
viewrecords: true,
caption: "CheckList Details",
scrollOffset: 0
});