3

アプリケーションを MVC 3 に移行し、System.Web.Helpers.WebGrid を使用しようとしています。次のようなhtmlコードを取得したいと思います。

<table>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
</table>

行ごとに css クラスを定義できるプロパティがありrowStyleますが、行ごとに異なるスタイルがあります。簡単に達成できますか？

4

5 に答える 5

6

だから私はハックで終わらせなければなりませんでした。まず、別の列の一部として色を含めます。MvcHtmlString追加のエンコーディングを回避するために、これを返す必要がありました。

<%  
    var grid = new WebGrid(Model);
%>
<%= 
    grid.GetHtml(
        tableStyle: "table_class",
        columns:  grid.Columns(
            grid.Column("Importance", CTRes.Importance, (item) => 
                new MvcHtmlString(Html.Encode(item.Importance) + 
                "<div class='color' style='display: none;'>#" + item.Color + "</div>"))
        )
    ) 
%>

次に、次のように背景色を設定します$(document).ready()。

<script type="text/javascript">
    $(document).ready(
        function () {
            $('.table_class .color').each(function (index, element) { $(element).parent().parent().css('background-color', $(element).html()); });
        }
    );
</script>
于 2011-02-16T20:19:20.167 に答える
2

私の知る限り、WebGrid は現在、CSS クラスを指定する以外に行のスタイル設定をサポートしていません。

WebGrid を使用したい場合、私が考えることができる唯一の代替手段は次のとおりです。

  1. 列の色の値をテキストとしてレンダリングする
  2. 列のCSSクラスを使用してその列を非表示にしますdisplay:none
  3. 少しjQueryを使用して、background-colorスタイルを非表示の列のテキストの色に設定します

それは私には醜いハックのように思えるので、テーブル表示に対してそのレベルの制御が本当に必要な場合は、WebGrid を気にせず、HTML を自分でレンダリングすることをお勧めします。独自のページングとソートの実装に関する情報はたくさんあります。

于 2011-02-09T16:36:42.067 に答える
0

わかりました。これを実装するのに少し苦労したので、受け入れられた回答に基づいて自分が何をしたかを示したいと思いました。多分これはあなたを助けるでしょう。

grid.Column("Status", "Status", (item) => 
     new MvcHtmlString(Html.Encode(item.Status) +
     "<div class='color' style='display: none;'>#" + item.RowColor + "</div>"))

次のように、RowオブジェクトからColorを取得しました。

public class MyRowType {
        public String Status { get; set; }

        public String RowColor
        {
            get{
                switch (Status)
                {
                    case "RUNNING":
                        return "0000FF";
                    case "FAILED":
                        return "FF0000";
                    default:
                        return "00FF00";
                }
            }
        }
    }

以前は[ステータス]列がありましたが、現在は[ステータス]フィールドの値に基づいて行全体が色分けされています。

于 2011-05-02T20:34:58.833 に答える
0 
grid.Column("ColumnName", canSort: true,
    format: (item) =>
    {
        String Oabsent=string.Empty;
        if (item.ColumnName)
        {
            Oabsent += 
                 "<span style=\"color:#FF0000 ; display:table\">" 
                 + item.ColumnName+ "</span><br/>";
        }
        else { Oabsent += item.ColumnName; }

        return new HtmlString(Oabsent);
    }),
于 2011-06-28T10:33:54.423 に答える
0

これを行うには、alternativeRowStyle: "(alternate row の CSS クラス)" を使用できます。

お気に入り：

<div id="grid">
    @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("FirstName"),
            grid.Column("LastName"),
            grid.Column("Salary",format:@<text>$@item.Salary</text>)
        )
    )
</div>

これにより、CSS クラス「alt」が、結果のグリッドの交互の行に適用されます。

私は次から例を取りました：

http://weblogs.asp.net/shijuvarghese/archive/2010/10/08/using-the-webgrid-helper-in-asp-net-mvc-3-beta.aspx

于 2011-02-09T15:13:16.183 に答える