0

これに関する構文またはガイドを見つけるために Web を検索しましたが、成功しませんでした。

どんな助けにも感謝します。

ビューにグリッドを実装しましたが、グリッド ビューのページングを使用する代わりに、グリッド ビューに追加のデータをロードするグリッドの最後に「もっと見る」ボタンを実装しようとしています。

コードを見る

@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 ページあたりの行数を表します。

4

1 に答える 1

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。

于 2014-06-29T03:50:56.223 に答える