ユーザ用ツール

サイト用ツール


it技術:web開発:webgrid

文書の過去の版を表示しています。


WebGrid

WebGridオブジェクト生成

WebGrid コンストラクターのパラメーター
名前備考
sourceIEnumerable<dynamic>レンダリング対象のデータ。
columnNamesIEnumerable<string>レンダリングされる列をフィルター選択します。
defaultSortstring並べ替えの基準にする既定の列を指定します。
rowsPerPageint1 ページ当たりに表示する行数を制御します (既定値は 10)。
canPageboolデータのページ切り替えを有効または無効にします。
canSortboolデータの並べ替えを有効または無効にします。
ajaxUpdateContainerIdstringグリッドに含まれる要素の ID。これにより、AJAX のサポートが可能になります。
ajaxUpdateCallbackstringAJAX の更新が完了した時点で呼び出されるクライアント側の関数。
fieldNamePrefixstring複数のグリッドをサポートするためのクエリ文字列フィールドのプレフィックス。
pageFieldNamestringページ番号のクエリ文字列フィールド名。
selectionFieldNamestring選択した行番号のクエリ文字列フィールド名。
sortFieldNamestring並べ替え列のクエリ文字列フィールド名。
sortDirectionFieldNamestring並べ替えの方向のクエリ文字列フィールド名。
WebGrid.GetHtml のパラメーター
名前備考
tableStylestring表のスタイル指定に使うクラス。
headerStylestringヘッダー行のスタイル指定に使うクラス。
footerStylestringフッター行のスタイル指定に使うクラス。
rowStylestring行のスタイル指定に使うクラス (奇数行のみ)。
alternatingRowStylestring行のスタイル指定に使うクラス (偶数行のみ)。
selectedRowStylestring選択した行のスタイル指定に使うクラス。
captionstring表見出しとして表示される文字列。
displayHeaderboolヘッダー行を表示するかどうかを指定します。
fillEmptyRowsboolrowsPerPage の行数を確保するために、表に空の行を追加できるかどうかを指定します。
emptyRowCellValuestring空の行に設定される値。fillEmptyRows が設定されている場合にのみ使用されます。
columnsIEnumerable<WebGridColumn>列のレンダリングをカスタマイズするための列モデル。
exclusionsIEnumerable<string>列の値が自動で設定される場合に除外する列。
modeWebGridPagerModesページ切り替えレンダリングのモード (既定値は NextPrevious および Numeric)。
firstTextstring先頭ページへのリンクのテキスト。
previousTextstring前ページへのリンクのテキスト。
nextTextstring次ページへのリンクのテキスト。
lastTextstring最終ページへのリンクのテキスト。
numericLinksCountint表示する数字リンクの数 (既定値は 5)。
htmlAttributesobject要素に設定する 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)

ASP.NET MVCでページャーつきテーブルを表示する

条件により行の背景色を変更

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