我有简单的报告页面 - 几个文本框,当输入和提交数据时,我想在同一页面上异步加载 jqgrid。 我正在使用 JQGrid 的 MVC 版本。
没有 jqgrid,我可以加载表格数据,我的 View 如下所示
@using (Ajax.BeginForm("GetReport", new AjaxOptions {UpdateTargetId = "result", HttpMethod = "Post" }))
{
<div class="editor-label">Start Date</div>
<div class="editor-field">@Html.Editor("StartDate", "DateTime")</div>
<div class="editor-label">End Date</div>
<div class="editor-field">@Html.Editor("EndDate", "DateTime")</div>
<input type="submit" value="Submit" />
}
<div id="result"></div>
我想在其位置显示 jqGrid 而不是结果表。 jqGrid 定义如下。
@Html.Trirand().JQGrid(Model.ReportGrid, "ReportGrid")
如何实现这一目标?
最佳答案
我将详细说明我将如何做到这一点,我认为这也适合您(我构建了许多带有 MVC3 后端的 jqGrid。
您已经有了 HTML 组件,或者您可以使用类似的组件。
<div id="ExampleGridContainer" >
<table id="ExampleGridName" class="scroll" cellpadding="0" cellspacing="0" ></table>
<div id="ExampleGridPager" class="scroll" style="text-align:center;"></div>
</div>
然后,对于您的 Javascript,您需要包含对两者的引用(在本示例中,我使用英语作为我的位置)
<script src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")" type="text/javascript"></script>
如果它是 _Layout.chtml 之一或在您的 _Layout.chtml 中,您可以将其包含在您的页面上
然后在 View 上的脚本部分内,您可以构建类似于的东西
<script type="text/javascript">
$(document).ready(function () {
//initalize jqGrid
$('#ExampleGridName').jqGrid({
datatype: 'json',
url: '/ControllerName/ActionName',
colNames: [ 'ColumnOneName', 'ColumnTwoName']
colModel: [
{ name: 'ColumnOneName', //etc}
{ name: 'ColumnTwoName', //etc}
],
pager: $('#ExampleGridPager'),
rowNum: 5,
rowList: [5,10,20],
sortname: 'ColumnOneName',
//etc
//rest of grid settings
});
});
</script>
现在在上面的示例中使用 datatype: 'json'
,以及url:
当显示 View 并处理就绪事件时填写属性,您的网格将转到 URL 并查找数据。如果您想在另一个操作之后执行此操作,或者动态地重复它,您可以从 datatype: 'local',
开始。没有 url:
属性。
当需要设置这些属性并重新加载网格时,您可以:
//set the `datatype:` and `url:` properties and load the grid
$('#ExampleGridName').jqGrid('setGridParam', { datatype: 'json', url: '/ControllerName/ActionName' }).trigger('reloadGrid', [{ page: 1}]);
//reload the grid if the `datatype:` and `url:` properties are already configured
$('#ExampleGridName').jqGrid().trigger('reloadGrid', [{ page: 1}]);
在您的 Controller 上,您将有一个能够响应数据请求并以 JSON 格式生成结果的操作。这绝不是超越如何启动和运行具有动态加载的 MVC3 jqGrid 的基本示例,并且还有许多更高级的过滤、搜索等选项。
public ActionResult ActionName(string sidx, string sord, int page, int rows, bool _search, string filters)
{
//load data from somthing,
IQuerable<Object> results = database.getresults //whatever you want to populate a set of data really
int totalRecords = results.Count();
var pagedResults = results.OrderBy(sidx + " " + sord).Skip((page -1) * rows).Take(rows);
var jsonData = new
{
total = (totalRecords + rows - 1) / rows,
page = page,
records = totalRecords,
rows = (
from tempValue in pagedResults.ToList()
select new
{
cell = new string[] {
tempValue.ColumnOneValue,
tempValue.ColumnTwoIntValue.ToString(),
//Etc
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}//ActionName
这将是显示 jqGrid 并在其他操作/事件之后动态与其进行交互的非常基本的方法。 enter code here
关于asp.net-mvc - 从 Ajax Post 操作加载 jqGrid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14218352/