我无法让我的 jqGrid 填充

Question

根据以下 Mark 的回答使用工作代码进行编辑。

我真的开始讨厌 MVC。我整天都在努力让一个简单的网格工作，但我更幸运的是我的头在我的桌子上敲了一个洞。

我正在尝试实现一个在网格中显示结果的搜索页面。用户可以使用 3 个下拉列表来选择搜索条件。他们必须至少选择一个。 搜索后，用户将能够选择要导出的记录。所以我需要在生成的网格中包含复选框。这是未来的头疼问题。

使用JqGrid and Search form - ASP.NET MVC 作为参考，我已经能够让网格出现在页面上（一项重大成就）。但我无法获取要填充的数据。

顺便说一句，jqGrid 4.4.4 - jQuery 网格

这是我的看法：

@model Models.ExportDatex

<script type="text/javascript">

  $(document).ready(function () {
    $('#btnSearch').click(function (e) {

        var selectedSchool = $('#ddlSchool').children('option').filter(':selected').text();
        var selectedStudent = $('#ddlStudent').children('option').filter(':selected').text();
        var selectedYear = $('#ddlYear').children('option').filter(':selected').text();
        var selectedOption = $('#exportOption_1').is(':checked');

        if (selectedSchool == '' && selectedStudent == '' && selectedYear == '') {
            alert('Please specify your export criteria.');
            return false;
        }

        selectedSchool = (selectedSchool == '') ? ' ' : selectedSchool;
        selectedStudent = (selectedStudent == '') ? ' ' : selectedStudent;
        selectedYear = (selectedYear == '') ? ' ' : selectedYear;

        var extraQueryParameters = {
            school: selectedSchool,
            student: selectedStudent,
            year: selectedYear,
            option: selectedOption
        };

        $('#searchResults').jqGrid({
            datatype: 'json',
            viewrecords: true,
            url: '@Url.Action("GridData")?' + $.param(extraQueryParameters),
            pager: '#searchResultPager',
            colNames: ['SchoolID', 'Student Name', 'Student ID', 'Apprenticeship', 'Result'],
            colModel: [
                { name: 'SchoolID' },
                { name: 'Student Name' },
                { name: 'StudentID' },
                { name: 'Apprenticeship' },
                { name: 'Result' }]
        }).trigger('reloadGrid', [{ page: 1 }]);
    });
  });

</script>

@using (Html.BeginForm("Index", "Datex", FormMethod.Post))
{
  <h2>Export to Datex</h2>
  <div class="exportOption">
    <span>
        @Html.RadioButtonFor(model => model.ExportOption, "true", new { id = "exportOption_1" })
        <label for="exportOption_1">VET Results</label>
    </span>
    <span>
        @Html.RadioButtonFor(model => model.ExportOption, "false", new { id = "exportOption_0" })
        <label for="exportOption_0">VET Qualifications</label>
    </span>
</div>

<div class="exportSelectionCriteria">
    <p>Please specify the criteria you want to export data for:</p>

    <table>
        <tr>
            <td>School:</td>
            <td>@Html.DropDownListFor(model => model.SchoolID, Model.Schools, new { id = "ddlSchool" })</td>
        </tr>
        <tr>
            <td>Student: </td>
            <td>@Html.DropDownListFor(model => model.StudentID, Model.Students, new { id = "ddlStudent" })</td>
        </tr>
        <tr>
            <td>Year Completed:
            </td>
            <td>
                @Html.DropDownListFor(model => model.YearCompleted, Model.Years, new { id = "ddlYear" })
            </td>
        </tr>
    </table>
    <table id="searchResults"></table>
    <div id="searchResultPager"></div>
  </div>
  <div class="exportSearch">
    <input type="button" value="Search" id="btnSearch" />
    <input type="submit" value="Export" id="btnExport" />
  </div>
}

这是我的控制器。由于我们还没有数据库，我只是在使用来自不同数据库的现有表来提供记录 ID 的同时对一些结果进行硬编码。

[HttpGet]
public JsonResult GridData(string sidx, string sord, int? page, int? rows, string school, string student, string year, string option)
{
  using (SMIDbContainer db = new SMIDbContainer())
  {
      var ds = (from sch in db.SCHOOLs
                where sch.Active.HasValue
                && !sch.Active.Value
                && sch.LEVEL_9_ORGANISATION_ID > 0
                select sch).ToList();

      var jsonData = new
      {
          total = 1,
          page = 1,
          records = ds.Count.ToString(),
          rows = (
          from tempItem in ds
          select new
          {
              cell = new string[]{
                  tempItem.LEVEL_9_ORGANISATION_ID.ToString(),
                  tempItem.SCHOOL_PRINCIPAL,
                  "40161",
                  "No",
                  "Passed (20)"
              }
          }).ToArray()
      };
      return Json(jsonData, JsonRequestBehavior.AllowGet);
  }
}

Answer 1

您传递回网格的 JSON 是否有效？您是否传递回 jqGrid 需要的信息？为什么在 ajax 调用中而不是在 $(document).ready(function () { 中设置 jqGrid？

这是我用来为 jqGrid 格式化我的 json 的部分代码示例：

 var jsonData = new
            {
                total = (totalRecords + rows - 1) / rows,
                page = page,
                records = totalRecords,                
                rows = (
                    from tempItem in pagedQuery
                    select new
                    {
                        cell = new string[] {
                            tempItem.value1,
                            tempItem.value2, ........

                     }
               }).ToArray()
      };
      return Json(jsonData, JsonRequestBehavior.AllowGet);

如果您想让您的用户首先搜索，您可以在客户端设置 jqgrid datatype: local 并省略 url。然后，在您的用户执行您希望他们执行的任何操作后，您可以让 jqGrid 出去并通过以下方式获取数据：

 $('#gridName').jqGrid('setGridParam', { datatype: 'json', url: '/Controller/getGridDataAction' }).trigger('reloadGrid', [{ page: 1}]);

如果您想将搜索数据或其他值传递给向 jqGrid 提供数据的控制器/操作，您可以通过 jqGrid 中的postData: 选项传递它。要在外出之前进行设置，您可以通过 setGridParam 选项进行设置，如上所示，通过postData: { keyName: pairData}。

MVC 和 jqGrid 工作得很好......关于 stackoverflow 的示例很多，而 Oleg 的答案是关于您正在尝试做什么的大量资源。不需要通过头部撞击在桌子上打洞！