Question

根据Mark的答案编辑工作代码。

我真的开始厌恶MVC了。我一整天都在试着让一个简单的网格工作，但是我的头上有一个洞在我桌子上打了一个洞。

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

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

BTW，jqGrid 4.4.4 - jQuery Grid

这是我的观点：

@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的答案是你正在尝试做的事情的巨大资源。通过头部撞击，桌子上没有洞！

我不能让我的jqGrid填充

1 个答案: