1

私はjqGridを持っています：

$('#jqgFileInfoList').jqGrid({
    url: '@Url.Action("GetFiles", "File")',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Id', 'Name', 'Interface', 'Amount', 'Type', 'Created', 'Status'],
    colModel: [
        { jsonmap: 'Id', name: 'Id', formatter: 'integer', align: 'right', hidden: true },
        { jsonmap: 'Name', name: 'Name', align: 'right', hidden: true },
        { jsonmap: 'InterfaceName', name: 'InterfaceName', align: 'left', width: '100%', sorttype: 'text', frozen: true, search: true },
        { jsonmap: 'Amount', name: 'Amount', formatter: 'currency', align: 'right', width: '100%', sorttype: 'number', search: true },
        { jsonmap: 'Type', name: 'Type', align: 'right', width: '100%', sorttype: 'text', search: true },
        { jsonmap: 'RunDate', name: 'RunDate', formatter: 'date', align: 'right', width: '100%', sorttype: 'date', search: true },
        { jsonmap: 'Status', name: 'Status', align: 'right', width: '100%', sorttype: 'text', formatter: formatStatus, search: true }
    ],
    sortname: 'RunDate',
    sortorder: 'desc',
    pager: $('#jqgPagerFileInfoList'),
    rowNum: 5,
    viewrecords: true,
    height: '100%',
    autowidth: true,
    refresh: true,
    ignoreCase: true,
    jsonReader: {
        repeatitems: false,
        root: "rows"
    },
    altRows: true,
    altclass: 'jqGridAltRow',
    loadComplete: function () {
        $("tr.jqgrow:odd").addClass('jqGridAltRow');
    }
});

$('#jqgFileInfoList').jqGrid('filterToolbar', { searchOnEnter: false, enableClear: true, stringResult: true });

変更したいいくつかの列を除いて、フィルタリングは機能しています。

Created/RunDate列なんとかして範囲をフィルタリングしたいと思います。単一の日付を選択することは役に立ちません。

ドロップダウンを使用したい[インターフェイス]、[タイプ]、および[ステータス]列。これを行うための最良の方法は何ですか？

jqGridのドキュメントを理解するのは非常に難しいと思います。非常に多くのオプションがあります。stringResult: trueフィルタオプションをGridSettings.Whereコントローラのプロパティに取り込む必要があることを理解するのに1時間かかりました。

そして、それが重要な場合は、.Net 4.0、MVCアプリです。

編集：ボーナス質問：大文字と小文字を区別しないようにするにはどうすればよいですか。

4

1 に答える 1

3

公式ドキュメントは参照としてのみ使用でき、使用を開始する開発者、特に .NET 開発者の紹介としては使用できないことに同意します。

あなたの質問に:

1) 日付の範囲による検索を実装する簡単な方法はありません。ここで説明されているトリックのようないくつかのトリックを作成できます。beforeSearch高度な検索のコールバックfilterToolbarまたはコールバックを使用onSearchすると、検索フィルタを適用する前に「前処理」することができますが、すべてを一緒にするのは非常に注意が必要です。サーバー側の並べ替えを使用する場合は、サーバー側で同じことを直接実装できます。

2) jqGrid でドロップダウンを実装するには多くの方法があります。主な代替手段は、searchoptionsvalueの使用またはdataUrlプロパティです。最適な選択は、正確な要件によって異なります。

の使用はvalue、列に動的と同様に静的な値の小さなセットがある場合に非常に実用的です。たとえばformatter: "checkbox"、グリッドで使用してブール データをチェックボックスとして表示する場合は、列のフィルタでドロップ ダウンを使用する必要があります。以下のような設定の使い方の場合

stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":All;true:Yes;false:No" }

非常に実用的になります。ちなみにvalueオブジェクト形式で使えます

value: {"": "All", true:"Yes", false: "No"}

それ以外の場合、値の数が少ない場合valueは、検索フィルターにドロップダウンを実装するために使用できます。

dataUrlデータベースから動的に取得する値のリストの場合は、1 つの使用法を使用する必要があります。対応する実装の主なアイデアを説明する答えに対処できます。

答えは、クライアント側でのみ選択とオートコンプリートを実装する方法を示す単純な純粋な JavaScript コードを示しています。サーバー側のページングとフィルタリングの場合、別の実装方法を選択する必要があります。答えは、ASP.NET MVC ソリューションで jQuery UI オートコンプリートを実装する方法を示しています。

jQuery UI Autocomplete は、場合によっては、特に可能なオプションの数が非常に多い場合に選択するのに適した代替手段になると思います。

更新: 大文字と小文字を区別しない検索を行う方法はたくさんあります。ローカル検索を使用する場合(またはの使用datatype以外の使用) 、jqGrid のオプションを使用する必要があります。サーバー側の検索の場合、サーバー側で検索をインセンシティブにする必要があります。個人的には、フィルタリング中にCOLLATEだけを使用します。たとえば、次のような構造の代わりに"json"xml"loadonce: trueignoreCase: true

WHERE Name LIKE ('%' + @s + '%')

私が使う

WHERE Name COLLATE SQL_Latin1_General_CP1_CI_AS LIKE ('%' + @s + '%')

あなたが投稿したコードに関するもう1つの小さな発言：

  • always gridview: trueオプションを使用します。詳細については、回答を参照してください。
  • pager: "#jqgPagerFileInfoList"formではなく常に form でページャを指定しますpager: $("#jqgPagerFileInfoList")。
  • 次のような存在しないオプションを使用しないでくださいrefresh: true
  • autoencode: trueサーバーから返されたデータを HTML フラグメントとしてではなく、テキストとして強制的に解釈するオプションを使用することをお勧めします。オプションがないと<、&などのテキストを表示する際に問題が発生する可能性があります。
  • colModelプロパティのデフォルト値を調べることをお勧めします(ドキュメントを参照してください)。align: 'left'、などsorttype: 'text'をコードから削除できることがわかります。search: true
  • のプロパティには許可された値を使用する必要がありますcolModel。たとえばwidth: '100%'は正しくなく、デフォルト値として解釈されますwidth: 150。
  • 使用するすべての値は、プロパティjsonmapの値と同じです。nameしたがって、値を削除できます。
  • 非表示の列を削除することをお勧めしますname: 'Id'。jqGrid は、グリッドの行を表すid属性を使用します。の中で<tr>使います。プロパティを追加して、 jqGrid が行 IDの行データから項目のプロパティを使用するように指定できます。repeatitems: falsejsonReaderjsonReaderid: "Id""Id"
于 2013-01-30T18:01:29.720 に答える