從Ajax中加載jqGrid發佈操作

Question

我有一個簡單的報告頁面 - 幾個文本框，當數據輸入並提交時，我想在同一頁面上異步加載jqgrid。 我正在使用JQGrid的MVC版本。

沒有jqGrid的我能夠加載表數據和我的觀點看起來像下面

@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") 

我該如何做到這一點？

Answer 1

我走出我會怎麼做，我認爲會爲你工作，以及（我打造一批jqGrids的一個MVC3後端。

你已經擁有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> 

你能我nclude此頁面上，如果它是的或在您的_Layout.chtml

然後你可以在本例中建立類似的財產以後

<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:屬性，您的網格將出現到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}]); 

在你的控制器，你將有一個行動，將能夠爲數據的請求作出反應，併產生結果以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

Answer 2

經過很多努力，這裏是我做的。我有一個主視圖和一個局部視圖。最初主視圖不包含局部視圖。提交數據時，會加載部分視圖。

MyReport.cshtml

@{ 
    ViewBag.Title = "Report"; 
} 
<h2>Report</h2> 
<br />  
@using (Ajax.BeginForm("GetReportData", new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Post", InsertionMode = InsertionMode.Replace})) 
{ 

    <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> 

然後我有網格狀的MyReportPartial的局部視圖。CSHTML

@model MyGridModel 
@using Trirand.Web.Mvc  
<link href="@Url.Content("~/Content/theme/ui.jqgrid.css")" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")"></script> 

<br /> 
@Html.Trirand().JQGrid(Model.Grid, "ReportGrid") 

我的控制器具有以下

public ActionResult MyReport() 
     { 
      var gridModel = new Models.Grid.EmpHeadcountGridModel(); 
      var grid = gridModel.MyGrid; 
      SetupHeadCountGrid(grid, DateTime.Now.ToShortDateString(), DateTime.Now.ToShortDateString()); 
      return View(gridModel); 
     } 
     public ActionResult GetReportData(string startdate ,string enddate) 
     { 
      var gridModel = new Models.Grid.MyGridModel(); 
      var grid = gridModel.EmpHeadcountGrid; 
      SetupHeadCountGrid(grid,costcenterid,startdate,enddate); 

      return PartialView("MyReportPartial",gridModel); 


     } 


     private void SetupHeadCountGrid(JQGrid grid,int costcenterid,string startdate,string enddate) 
     { 
      grid.ID = "ReportGrid"; 
      grid.DataUrl = Url.Action("GetHeadcountData") + "?startdate=" + startdate + "&enddate=" + enddate; 
     } 

     public JsonResult GetHeadcountData(string startdate, string enddate) 
     { 
      DateTime startdt = DateTime.Parse(startdate); 
      DateTime enddt = DateTime.Parse(enddate + " 23:59:59"); 

      var gridModel = new Models.Grid.MyGridModel(); 

      var query= { soem query using date criteria} 
      gridModel.MyGrid.DataSource = query; 
      return gridModel.MyGrid.DataBind(); 
     }