ASP.NET MVC 3のjQueryグリッドコントロール用のクライアントサイドテンプレート付き列

ASP.NET MVCアプリケーションでjQueryを使用してAjax呼び出しで取得したJSONデータをグリッドにバインドする必要があります。各列については、テンプレートを定義することができます(WebFormsのGridViewコントロールのTemplateFieldに似ています)。テンプレートは列定義のようなもので、その列に表示される内容を完全に制御します。どのグリッドコントロールがこれをサポートしていますか?私はjQGrid、DataTableとSlickGridは、クライアント側のデータバインディングのための人気のあるjQueryベースのグリッドコントロールだと思います。グリッド内の1つまたは複数の列に対してカスタムテンプレートを持つこれらのサポートはありますか? リンクでは、JSONデータをクライアントサイドのグリッドにバインドする方法を示していますが、各列のテンプレートを定義する方法についての情報はありません。

0

1 答え

jqgridでは、カスタムフォーマッタ関数を使用できます。この関数では、特定の列で使用するhtml文字列テンプレートを返します(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter)。 Datatable(およびjqGridでも)には、既存の要素からグリッドを作成するオプションがあります。その場合、あなたはカミソリの@foreach文を使用してテーブルを作成し、セル内にテンプレートを適用することができます。

jqgridカスタムフォーマッタとjqueryテンプレートを使用する例:

// Your cell template
<script id="MyColumnTemplate" type="text/x-jquery-tmpl">
  

${Name}

</script> <script> // creating the grid passing the formating function $('#GridView').jqGrid({ (...) colModel: [ { name: 'Custom', formatter: myFormatter}, ...], }); }); function myFormatter(cellvalue, options, rowObject) { var data = { Name: 'Test' }; //applying the jQuery template and returning html output return $('#MyColumnTemplate').tmpl(data).html(); } </script>
1
追加された
ありがとう。私は第2の選択肢、すなわちJavascriptよりも剃刀でテンプレートを定義することを好む。クライアント側のバインドでこれを行うことはできますか?つまり、JSONオブジェクトコレクションをJavascriptのグリッドにバインドすることはできますが、引き続き、カミソリにグリッドテンプレートを定義することはできますか?あなたはそれを行う方法のいくつかの例を共有することができますか?私はこれを探して長い時間を費やしましたが、そのようなものは見つかりませんでした。
追加された 著者 RKP,
私がJavascriptでテンプレートを定義したくない主な理由は、HTMLに文字列連結を使用するためであり、テンプレートを定義するには間違ったやり方ではなく、非常に簡単です。
追加された 著者 RKP,
私はあなたがjQueryではなく、Ajaxヘルパー(BeginFormとActionLink)を指していると思います。私は、jQueryを使用してAjax呼び出しでデータを取得できるかどうかを尋ねていましたが、データをグリッドにバインドするには、カミソリのグリッド列テンプレートを定義します。これは可能ではないかもしれない(かみそりはC#コードを持っていてサーバー上で実行されるため)、JavaScript以外でHTMLを書く以外の選択肢はないようです。私はJTemplatesというものがあると思いますが、このシナリオでは使用できません。
追加された 著者 RKP,
ありがとう。私は、HTML出力を取得するためにjQueryテンプレートを使用したいと思います。このシナリオ全体を示す記事へのリンクや、これを個別に示す1つ以上のリンクを私に送ることができますか?私はそれがサーバーへの複数の呼び出しを行うことを意味する場合、剃刀でテンプレートを定義することを避ける
追加された 著者 RKP,
<td> <td />テンプレートのみを定義する部分的なビューを作成し、そこでrazorを使用し、ajax getコールを使用して取得できます。しかし、それはさらに複雑になると思いますので、私はカスタムフォーマッタのアプローチを使用することをお勧めします。
追加された 著者 Felipe Castro,
また、グリッドのhtml出力を(jqueryで)手作業で編集することもできます。その場合、jqgridよりもはるかにクリーンなhtml出力があるので、Datatableをお勧めします。
追加された 著者 Felipe Castro,
いいえ、私は本当にjqueryを意味しました。あなたは本当に剃刀を使いたいと思っていて、サーバーへの余分な呼び出しを気にしないならば、<td>セルテンプレートのみを部分的に見ることができます。しかし、クライアント側のテンプレートが快適であれば、サーバーへの余分な呼び出しを避けることができます。jqueryテンプレート、口髭などのいくつかのオプションがあります。このシナリオでは、 htmlスクリプトで、html出力を返すことができます。これは、文字列操作でも同じです。
追加された 著者 Felipe Castro,
ここでは、完全な説明と関数をカスタムフォーマッタとして使用する例を示します: secondpersonplural.ca/jqgriddocs/ _2kn0mlo1p.htm <td> </td>のテンプレートを定義し、このテンプレートをカスタムフォーマッタ関数の中から適用する必要があります。 jqueryテンプレートを使用する良い例は次のとおりです。 weblogs.asp.net/dwahlin/archive/2010/11/20/…
追加された 著者 Felipe Castro,