扩展 HTML Grid 以在 Html Grid 末尾添加 div (MVC Contrib)

Posted 2023-03-27

【中文标题】扩展 HTML Grid 以在 Html Grid 末尾添加 div (MVC Contrib)

【英文标题】：Extend the HTML Grid for adding div at the end of Html Grid (MVC Contrib)

【发布时间】：2014-08-19 19:13:52

【问题描述】：

我已经在网上搜索找到语法或指南，但没有成功。

我将不胜感激。

我在视图中实现了一个网格，而不是使用网格视图的分页，我试图在网格末尾实现一个按钮“查看更多”，将更多数据加载到网格视图中。

查看代码

@html.Grid(Model.Orders).Columns(columns =>
        
            columns.For(c => @Html.AddInstitudeRetangle(c.User.Institute.InstitudeColor, c.User.Institute.InstituteName)).Named("");
            columns.For(c => @Html.CheckBox(c.OrderID.ToString(), false, new  @ID = "cb-" + c.OrderID.ToString(), @Name = "cb-" + c.OrderID.ToString() )).Header("<th><input type=\"checkbox\" id=\"chkHeader\" /></th>");
            columns.For(c => @Ajax.LinkForBootstrapModalNo("OrderDetails", "OrdersManagement", c.OrderID.ToString(), new  OrderID = c.OrderID , new  id = "OrderID" ).LoadingPanel("Please Wait Loading...").ToMVCHtmlString()).Named(OrdersManagementStrings.OrderID);
            columns.For(c => @Html.GetOrderTypeIcon(c.OrderTypeStatus, c.OrderTypeStatus.GetDescription())).Named(OrdersManagementStrings.OrderType);
            columns.For(c => String.Format("0:dd/MM/yyyy hh:mm", c.CreationDate)).Named(OrdersManagementStrings.OrderDate);
            columns.For(c => String.Format("0 1", c.User.FirstName, c.User.LastName)).Named(OrdersManagementStrings.CustomerName);
            columns.For(c => c.User.Institute.InstituteName).Named(OrdersManagementStrings.AffiliateName);
            columns.For(c => c.TotalCost).Named(OrdersManagementStrings.TotalCost);
            columns.For(c => c.ShippingTypeEnum.GetDescription()).Named(OrdersManagementStrings.ShippingType);
            columns.For(c => c.Address.FullAddress).Named(OrdersManagementStrings.Address);
            columns.For(c => c.OrderStatusEnum.GetDescription()).Named(OrdersManagementStrings.OrderStatus);
        ).Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")

        <div id="scroll" data-itemsperpage="50" data-spy="scroll">Load More</div

现在，当用户最后点击 div 时，我正在使用 ajax 请求加载更多数据。

现在，我想创建一个扩展，将这个 div 添加到网格的末尾。

所以最后的语法是这样的

columns.For(c => c.OrderStatusEnum.GetDescription())
.Named(OrdersManagementStrings.OrderStatus);
            )
.Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")
.LoadMoreButton(50);

数字50代表每页的行数

【参考方案1】：

查看源代码后，我认为将HtmlTableGridRenderer 扩展为ScrollingHtmlTableGridRenderer 并使用可能更容易

@Html.Grid(Model.Orders)
     .RenderUsing(new ScrollingHtmlTableGridRenderer(50))
     ...

然后在ScrollingHtmlTableGridRenderer 覆盖RenderGridEnd 以添加额外的DIV

public class ScrollingHtmlTableGridRenderer<T> : HtmlTableGridRenderer<T>
    where T : class

     private readonly int _itemsPerPage;

     public ScrollingHtmlTableGridRenderer(int itemsPerPage)
     
          _itemsPerPage = itemsPerPage;
     

     protected override void RenderGridEnd()
     
          base.RenderGridEnd();
          RenderText("<div id=\"scroll\" data-itemsperpage=\"" + _itemsPerPage + \"" data-spy=\"scroll\">Load More</div>");
     

您也许可以将其作为一个扩展来执行，它基本上创建一个新的渲染器并将所有数据从底层网格模型传播到它，但Grid 类似乎是通过将渲染器替换为扩展而构建的一种可以满足您的自定义需求，而不是通过 IGridOptionsModel 上的扩展。

【讨论】：

您好，这行得通！谢谢。您能否指导我找到我可以阅读和了解更多信息的帖子或关键作品？特别是 ScrollingHtmlTableGridRenderer : HtmlTableGridRenderer where T : class

@silagy - 源代码位于mvccontrib.codeplex.com/SourceControl/latest