it技術:web開発:webgrid
文書の過去の版を表示しています。
WebGrid
WebGridオブジェクト生成
WebGrid コンストラクターのパラメーター | ||
---|---|---|
名前 | 型 | 備考 |
source | IEnumerable<dynamic> | レンダリング対象のデータ。 |
columnNames | IEnumerable<string> | レンダリングされる列をフィルター選択します。 |
defaultSort | string | 並べ替えの基準にする既定の列を指定します。 |
rowsPerPage | int | 1 ページ当たりに表示する行数を制御します (既定値は 10)。 |
canPage | bool | データのページ切り替えを有効または無効にします。 |
canSort | bool | データの並べ替えを有効または無効にします。 |
ajaxUpdateContainerId | string | グリッドに含まれる要素の ID。これにより、AJAX のサポートが可能になります。 |
ajaxUpdateCallback | string | AJAX の更新が完了した時点で呼び出されるクライアント側の関数。 |
fieldNamePrefix | string | 複数のグリッドをサポートするためのクエリ文字列フィールドのプレフィックス。 |
pageFieldName | string | ページ番号のクエリ文字列フィールド名。 |
selectionFieldName | string | 選択した行番号のクエリ文字列フィールド名。 |
sortFieldName | string | 並べ替え列のクエリ文字列フィールド名。 |
sortDirectionFieldName | string | 並べ替えの方向のクエリ文字列フィールド名。 |
WebGrid.GetHtml のパラメーター | ||
---|---|---|
名前 | 型 | 備考 |
tableStyle | string | 表のスタイル指定に使うクラス。 |
headerStyle | string | ヘッダー行のスタイル指定に使うクラス。 |
footerStyle | string | フッター行のスタイル指定に使うクラス。 |
rowStyle | string | 行のスタイル指定に使うクラス (奇数行のみ)。 |
alternatingRowStyle | string | 行のスタイル指定に使うクラス (偶数行のみ)。 |
selectedRowStyle | string | 選択した行のスタイル指定に使うクラス。 |
caption | string | 表見出しとして表示される文字列。 |
displayHeader | bool | ヘッダー行を表示するかどうかを指定します。 |
fillEmptyRows | bool | rowsPerPage の行数を確保するために、表に空の行を追加できるかどうかを指定します。 |
emptyRowCellValue | string | 空の行に設定される値。fillEmptyRows が設定されている場合にのみ使用されます。 |
columns | IEnumerable<WebGridColumn> | 列のレンダリングをカスタマイズするための列モデル。 |
exclusions | IEnumerable<string> | 列の値が自動で設定される場合に除外する列。 |
mode | WebGridPagerModes | ページ切り替えレンダリングのモード (既定値は NextPrevious および Numeric)。 |
firstText | string | 先頭ページへのリンクのテキスト。 |
previousText | string | 前ページへのリンクのテキスト。 |
nextText | string | 次ページへのリンクのテキスト。 |
lastText | string | 最終ページへのリンクのテキスト。 |
numericLinksCount | int | 表示する数字リンクの数 (既定値は 5)。 |
htmlAttributes | object | 要素に設定する HTML 属性を保持します。 |
ASP.NET MVC で WebGrid を最大限に活用する
- WebGrid
@model LatestResult.Models.DropDownListViewModel @{ // WebGridオブジェクト生成 var grid = new WebGrid(source: Model.ResultData, ajaxUpdateContainerId: "content", canPage: false); }
ソートやページング
アクションメソッドの引数にパラメータの名前を入れると値が自動的に入る。
- Controller
public ActionResult List(int page, string sort, string sortDir)
条件により行の背景色を変更
JQueryを使用して、条件によって背景色を変更する。
- List.cshtml
@section scripts { <script type="text/javascript"> $(document).ready(function () { $("#content tbody tr").each(function (i, row) { var $actualRow = $(row); if ($actualRow.find('.state').text() == '未使用') { $actualRow.find('td').css('background-color', 'lightcoral'); } }); }); </script> }
参照
it技術/web開発/webgrid.1490865948.txt.gz · 最終更新: 2017/03/30 18:25 by yajuadmin