在网络网格中添加行

Question

我正在使用 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>)
    )
)

}

Answer 1

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

Answer 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>

基础知识是：

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

更健壮解决方案应该确保这些元素存在，但您明白了。

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

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

Answer 3

这是一个可怕的黑客，但它让我继续我的一天。我认为正确执行此操作的方法是编写一个 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 并添加一行。
抱歉手写代码。我使用的是专有应用程序，我不敢粘贴其中的任何内容......

Answer 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);

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