5

私は jQuery の初心者なので、ここで単純なものが欠けていると確信しています。

LINQ-to-Entities 操作から JSON データを作成するアクションで jqGrid を使用しています。しかし、ブラウザーで列ヘッダーをクリックすると、行がソートされません。昇順/降順インジケーターが表示されますが、他に何も起こりません。

必要な JavaScript と CSS のリンクは、マスター ページのヘッダーにあります。

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- 詳細ページに表示する jqGrid の CSS および JavaScript ファイル -->
<link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" />
<script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"></script>

これが私の初期化コードです：

// jqGrid のセットアップ。
$("#gridlist").jqGrid({
    url: '/Contact/GridData',
    データ型: 'json',
    mtype: 'GET',
    colNames: ['ID', '名', '姓', '組織'],
    colModel: [
        { 名前: 'id', インデックス: 'id', 幅: 40, 整列: '左', サイズ変更可能: true },
        { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}],
    ページャー: jQuery('#pager'),
    行数: 5,
    行リスト: [5, 10, 20, 50],
    繰り返しアイテム: false,
    ビューレコード: true,
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
    キャプション：「連絡先」
});

HTML は次のとおりです。

    <h3>マイ グリッド データ</h3>
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0">
    </表>
    <div id="pager" class="scroll" style="text-align:center;">
    </div>

そして、完全を期すために、アクションメソッドは次のとおりです。

public ActionResult GridData()
{
    var page = new { page = 1 };

    IEnumerable 連絡先 = _db.ContactSet;
    int i = 0;
    var 行 = 新しいオブジェクト [contacts.Count()];

    foreach (連絡先の連絡先)
    {
        行[i] = 新しい { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
        i++;
    }

    var 結果 = 新しい JsonResult();
    result.Data = new { ページ = 1、レコード = 2、行、合計 = 1 };

    結果を返します。
}

ここで見逃している明らかな設定はありますか？

4

4 に答える 4

4

これを処理するには、2 つの基本的な方法があります。グリッドはデータ自体を並べ替えることができます。このオプションを使用したことがないため、これをオンにする方法を思い出せません。通常、ページに戻るには大きすぎるデータセットを扱うので、グリッドのページング機能を使用します。グリッドにはデータセット全体が表示されないため、サーバーでこの並べ替えを行う必要があります。

サーバーでページングを行うには、アクションに sidx および sord (両方の文字列) 引数を追加します。sidx は、ソートする列の名前になります。sord は方向、asc または desc になります。

これを行う方法を示すデモ プロジェクトがあります (LINQ to Objects を使用)。ただし、LINQ to Entities の使用はほとんど同じです。実稼働/非デモ コードで LINQ to Entities を使用しています。デモ ソリューションをダウンロードして、自分で探してください。

于 2009-05-29T19:43:45.093 に答える
2 
  I think below example should do it. 2 important points make sure your sort column has "it" keyword as prefix. (thats for linq to know). second you load only the number of objects array element as the rows the query can read.

  var context = new HaackOverflowDataContext();

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = context.Question.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var questions = context.Question.OrderBy("it."+ sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);

    int i = 0;
    var rowsObj = new object[pageSize>totalRecords ?  totalRecords : pageSize];

    foreach (Question q in questions)
    {
        rowsObj[i] = new { id = q.Id, cell = new object[] { q.Id, q.Votes, q.Title } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = rowsObj
    };

    return result;

ありがとうアヌジ・パンディ www.anuj.co.in

彼は...これは私がプログラミングを知っているという意味ですか:)

于 2009-06-15T21:58:45.203 に答える
1

わかったときにこれを投稿するべきだったのですが、他のタスクに巻き込まれてしまいました。これは、レポート エンティティ用に実装された LINQ to Entities を使用して行ったことです。まず、デフォルトの検索で jqGrid をロードするコードは単純でした (見落としていたものを見つけたら):


$(document).ready(function() {

    // Set up jqGrid for the report search results table.
    // This is displayed in a tab in the bottom section of the master page.
    $("#searchResultList").jqGrid({
        url: '/Report/GetResultsL2E/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary'],
        colModel: [
          { name: 'act', index: 'act', width: 75, sortable: false },
          { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true },
          { name: 'Title', index: 'Title', width: 150, align: 'left' },
          { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'End_Date', index: 'End_Date', width: 80, align: 'left', formatter: 'date' },
          { name: 'Summary', index: 'Summary', width: 240, align: 'left' }
        ],
        pager: jQuery('#searchResultPager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Title',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/Scripts/jqGrid/themes/green/images',
        caption: 'Report Search Results', 
        editurl: "/Report/Edit",
        scroll: true,
        height: 'auto',
        recordtext: ' Reports',
        pgtext: ' of ',
        multiselect: true, 
        multiboxonly: true, //adds check box column
        altRows: true,
        loadComplete: function() {
            var ids = jQuery("#searchResultList").getDataIDs();
            for (var i = 0; i ";
                se = "";
                ce = "";
                jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce })
            }
        }
    }).navGrid('#searchResultPager',
    { edit: false, add: false, del: false, search: false }, //options 
    {height: 280, reloadAfterSubmit: false }, // edit options 
    {height: 280, reloadAfterSubmit: false }, // add options 
    {reloadAfterSubmit: false }, // del options 
    {} // search options 
    );
});

デフォルトの検索セットをロードするメソッドは、使用可能なレポートの合計セットの最初のページを返します。

///
/// ReportSet をクエリして、ビューからの呼び出しに応答して、ページングされ、並べ替えられたレポート エンティティ プロパティのセットを返します。
///
/// 並べ替えに使用する列の名前。
/// 並べ替えの順序 (昇順または降順)。
/// 呼び出しプロセスに返すページの番号。
/// ページに対して返す行数。
/// この ActionResult は、jQuery ライブラリを使用して jqGrid で使用される JSON 結果を返します。
/// jQuery には、jQuery.js スクリプトをリンクするスクリプト タグが必要です。
/// jqGrid には、次のスクリプトとスタイルシートへのスタイルシート リンクが必要です。
///
/// jQuery/themes/base/ui.all.css
/// jqGrid/themes/green/grid.css (または他のテーマ CSS ファイル)
/// jqGrid/jquery.jqGrid.js
/// jqGrid/grid.base.js
/// jqGrid/js/jqModal.js
/// jqGrid/js/jqDnR.js
///
public ActionResult GetResultsL2E(string sidx, string sord, int page, int rows)
{
    int pageIndex = Convert.ToInt32(ページ) - 1;
    int pageSize = 行;
    int totalRecords = _db.ReportSet.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
    int startRecord = pageIndex * pageSize;

    リストrowStrings = new List();
    // モデル内のすべてのレポートを一定の順序で取得します (比較用)。
    //var レポート = _db.ReportSet のアイテムから
    // orderby item.Start_Date, item.Title
    // 新しいものを選択 { item.ID, item.Title, item.Post_Date,
    // item.Start_Date, item.End_Date, item.Summary };
    // jqGrid から渡された動的な順序で、モデル内のすべてのレポートを取得します。
    文字列 orderBytext = "";
    orderBytext = string.Format("it.{0} {1}", sidx, sord);
    var レポート = _db.ReportSet
                   .OrderBy(orderBytext);

    リストstringList = new List();

    int カウンター = reports.Count();
    foreach (レポートの var レポート)
    {
        var rowString = 新しい
        {
            id = レポート.ID、
            セル = 新しい [] {
                    "",
                    report.ID.ToString()、
                    レポート.タイトル,
                    report.Post_Date.ToShortDateString()、
                    report.Start_Date.ToShortDateString(),
                    report.End_Date.ToString()、
                    report.Summary.ToString()}
        };
        stringList.Add(rowString);
    }

    var rowsOut = 新しいオブジェクト[カウンター];
    for (int i = 0; i

後で、ソートする列を選択するユーザーに応答する別のメソッドを追加しました。PredicateBuilder を使用して、Albaharis の本 C# の「式の述語を動的に構成する」に関する概要セクションで説明しました。MSDN at PredicateBuilder fails on nested predicates with LINQ to Entitiesで開始した質問で、その解決策について説明しました

于 2009-06-16T14:34:09.100 に答える
0

jqGridフレームが表示されていても、行が表示されなかった場合と同じ問題が発生しました。私の解決策は、次のコードを追加することでした。

**jsonData.JsonRequestBehavior = JsonRequestBehavior.AllowGet;**
         return jsonData;
于 2010-09-01T07:23:19.460 に答える