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>

有一个rowStyle属性，允许为每一行定义 css 类，但每一行会有不同的样式。是否容易实现？

4

5 回答 5

6

所以我不得不以 hack 结束。首先，将颜色作为另一列的一部分。必须返回它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

据我所知，除了指定 CSS 类之外，WebGrid 目前不支持行上的样式。

如果您想使用 WebGrid，那么我能想到的唯一选择是：

  1. 将列中的颜色值呈现为文本
  2. 使用列上的 CSS 类隐藏该列display:none
  3. 使用一点 jQuery 将background-color样式设置为隐藏列中文本颜色的样式

这对我来说似乎是一个丑陋的黑客，所以我建议，如果你真的需要对你的表格显示进行那种级别的控制，那么不要打扰 WebGrid 并自己渲染 HTML。有很多关于实现自己的分页和排序的信息。

于 2011-02-09T16:36:42.067 回答
0

我相信，您可以使用alternatingRowStyle：“（您的交替行的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 回答
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 回答