在 webgrid 中添加行答案

【问题标题】：add row in webgrid在 webgrid 中添加行
【发布时间】：2011-08-12 04:52:11
【问题描述】：

我正在使用 MVC 3 webgrid，我需要在 webgrid 中添加一个新行以显示产品表中的价格总和。
任何想法表示赞赏。
这是我的代码

@{
WebGrid grid = new WebGrid(source: Model,
                           rowsPerPage: 3,
                           canSort: true,
                           canPage: true,
                           ajaxUpdateContainerId: "ajaxgrid");  


@grid.GetHtml(
    alternatingRowStyle: "altrow",
    mode: WebGridPagerModes.All,
    firstText: "<< ",
    previousText: "< ",
    nextText: " >",
    lastText: " >>",
    columns: grid.Columns(
            grid.Column(format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.ProductId }).ToString() + " | " +
                                                        Html.ActionLink("Delete", "Delete", new { id = item.ProductId }).ToString()
                                                        )
                        ),
            grid.Column("ProductId", "Product Id"),
            grid.Column("CategoryId", "Category Name", format: (item) => item.Category.CategoryName),
            grid.Column("ProductName", "Product Name"),
            grid.Column("Price", "Price", format: @<text>@String.Format("{0:c}", item.Price)</text>)
    )
)

}

【问题讨论】：

标签： webgrid

【解决方案1】：

我遇到了类似的问题，因此我创建了内置 MVC WebGrid 的扩展。代码和示例用法位于https://gist.github.com/3211605。希望对您有所帮助。

【讨论】：

【解决方案2】：

如果您可以使用 JQuery 并且页脚内容不按列对齐，那么将页脚添加到 WebGrid 有点麻烦，但并不困难：

@{
  var grid = new WebGrid(...);
}
@grid.GetHtml(
  ...,
  htmlAttributes: new { id = "myTable" }
)

<span id="footerContent">This will be in footer</span>

<script>
  $().ready(function () {
    $('#footerContent').appendTo('#myTable tfoot tr td:last');
  }
</script>

基础是：

使用 WebGrid.GetHtml() 的 htmlAttributes 参数设置表格的 HTML ID 属性
将页脚的内容放在页面上的元素中
使用 JQuery 的 .appendTo() 方法将内容元素添加到页脚的 TD 元素的末尾

一个更强大的解决方案应该确保这些元素存在，但你明白了。

假设您的模型已经包含总和（或获取总和的方法），只需构建您的页脚，如下所示：

<span id="footerContent">@Model.Total</span>

【讨论】：

【解决方案3】：

这是一个可怕的 hack，但它让我可以继续我的一天。我认为正确执行此操作的方法是编写一个允许您传入页脚行的 Html Helper。我有点失望 WebGrid 没有内置页脚行。

 gridHtml = MvcHtmlString.Create(gridHtml.ToString().Replace("</table>", sbTotalsTable.ToString()));

    gridHtml is from   var gridHtml = @grid.GetHtml....blah..


    the sbTotalsTable is    var sbTotalsTable = new StringBuilder();

    sbTotalsTable.Append("<tr>");

    sbTotalsTable.Append("<td>");

    sbTotalsTable.Append(DataSource.Select(s=>s.PropToSum).Sum().ToString();//The total of that column
    sb.TotalsTable.Append("</td>");
    sb.TotalsTable.Append("</tr>");
    sb.TotalsTable.Append("</table>");//closing the table without opening it because the rest comes from the gridHtml.

只需确保与您手工构建的表格行中的列数相匹配。注意没有表格开始标签。整个想法是在表格关闭处劫持创建的html并添加一行。很抱歉手工输入的代码。我正在使用专有应用程序，我不敢从中粘贴任何内容...

【讨论】：

【解决方案4】：

向 IEnumerable 添加一个新项目，用作要绑定到的 WebGrid 的源。

var lineItems = Model.LineItems;
var totalRow = new SalesLineItem
                {
                    SaleType = "Total Sales",
                    Amount = Model.TotalSales
                };
lineItems.Add(totalRow);

var grid = new WebGrid(lineItems);

我还没有找到一个很好的方法来将格式应用到这个总行。这可能必须在客户端完成。

【讨论】：