1

以下のマークの回答に従って、作業コードで編集されました。

私は本当にMVCを嫌い始めています。私は単純なグリッドを機能させるために一日中努力してきましたが、頭で机に穴を開けて運が良かったです。

結果をグリッドに表示する検索ページを実装しようとしています。ユーザーが検索基準を選択するために使用できる 3 つのドロップダウン リストがあります。少なくとも 1 つを選択する必要があります。検索後、ユーザーはエクスポートするレコードを選択できます。したがって、結果のグリッドにチェックボックスを含める必要があります。それは将来の頭の痛い問題です。

JqG​​rid と検索フォームの使用- 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>
}

これが私のコントローラーです。まだデータベースがないので、別の DB の既存のテーブルを使用してレコード 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);
  }
}
4

1 に答える 1

1

グリッドに返す JSON は有効ですか? jqGrid が必要とする情報を返していますか? ではなく、ajax 呼び出しの内部で jqGrid をセットアップするのはなぜ$(document).ready(function () {ですか?

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

最初にユーザー検索を行いたい場合は、クライアント側で jqgriddatatype: localを設定し、url. 次に、ユーザーがやりたいことをした後、次のような方法でjqGridを出してデータを取得できます。

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

jqGrid にデータを提供しているコントローラー/アクションに検索データまたはその他の値を渡したい場合はpostData:、jqGrid のオプションを介して渡すことができます。外出前にそれを設定するには、上記のように setGridParam オプションを介して設定できますpostData: { keyName: pairData}。

MVCとjqGridはうまく機能します...stackoverflowにはたくさんの例があり、Olegの答えはまさにあなたがやろうとしていることに関する膨大なリソースです. ヘッドバンギングでデスクに穴あけ不要！

于 2013-03-01T00:40:38.987 に答える