0

asp.netMVC3でaspxビューエンジンを使用しています。選択したレコードとページを選択したレコードに正しく表示するWebGridコントロールがあります。フィールドヘッダーをクリックすると、データも並べ替えられます。

問題点：

  1. 2ページ目にいて、並べ替え可能なフィールドのいずれかをクリックすると、並べ替え後にグリッドが最初のページにリロードされます。並べ替えをしながら、2ページ目自体に残しておきたい。
  2. 以下のコードのように、フィールドの1つである「レベル」の横に画像を表示します。画像をマウスオーバーすると、そのフィールドを説明するツールチップのように動作する静的DIVレイヤーが表示されます。

これら2つのことを行うための組み込みプロパティはないようです。回避策はありますか？これが私のコードです：

var grid = new WebGrid(source: Model.EmployeeList, columnNames: new[] { "Name", "Level", "Department"});

grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, 
     columns: grid.Columns(
     grid.Column("Name", header: "Full Name"),
     grid.Column( "Level", header: "Level"   ),
     grid.Column("Department", header: "Department") ))

御時間ありがとうございます...

4

1 に答える 1

0

ajaxUpdateContainerIdWebグリッドが配置されているコンテナの名前にもパラメータを設定する必要があります。例：

<div id="updateWebGrid">
    @grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0,  ajaxUpdateContainerId: "updateWebGrid"
     columns: grid.Columns( 
         grid.Column("Name", header: "Full Name"), 
         grid.Column( "Level", header: "Level"   ), 
         grid.Column("Department", header: "Department") )) 
</div>

2番目の質問では、列のFormatプロパティを使用してクラスを挿入する必要があります

例えば：

@helper CreateImage(string m)
{
    <div>@m <img src="#" class="someImage"/></div>
}

@grid.GetHtml(columns: new WebGridColumn[]
{
    new WebGridColumn() {ColumnName = "TestTypeId", Header = "Test Type"},
    new WebGridColumn() {ColumnName = "Name", Header = "Name", Format = m => CreateImage(m.Name)}
})

この部分を宣言したら、クラスが付いたimgタグの上にマウスを置くたびに、jQueryを使用してdivを表示する必要がありますsomeImage。

$(document).ready(function() {
    $(".someImage").mouseover(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });

    $(".someImage").mouseout(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });
});

それについてです。このコードのすべての部分をチェックしたわけではありませんが、これはあなたが従うべきロジックです。WebGridに関するブログ記事を書いたので、さらに参照できるように確認できます：http: //apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/

于 2012-04-26T19:24:34.093 に答える