4

次のように設定されたaspデータリストがあります。

<asp:DataList ID="dlListItems" ClientIDMode="Static" Width="100%" runat="server" RepeatColumns="2" ItemStyle-BorderColor="#E8E6E7" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px"
        RepeatDirection="Horizontal" RepeatLayout="Table">

データリスト内の各ノードには、クラス「divList」の div が含まれます

ロード時にすべてのノードが表示されず、さらにロードするためのボタンが表示されるように、何かを実装できる必要があります。非表示の行を表示するだけで、サーバー側のアクションは必要ありません。

一度に10個のdivを非表示にしてから表示することで、なんとか機能させることができました。これはうまく機能しますが、データリストのテーブル行は引き続き表示されるため、データリストの下部に空の行の大きなギャップが生じます。

 $(function () {
    $(".divList").slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $(".divList:hidden").slice(0, 10).fadeIn(1500);          
    });
});

データリスト内の空のスペースを防ぐために、div ではなくテーブルの行にこれを実装する方法について誰かが提案してくれることを期待していました。（私が知る限り）データリストで生成された行にIDのクラスを割り当てることはできません。

4

2 に答える 2

2

これを試してみてください

$(function(){
    var trs =  $("#dlListItems tr");
    trs.hide();
    trs.slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $("#dlListItems tr:hidden").slice(0, 10).fadeIn(1500);          
    });
});

最初に dlListItems のすべてのテーブル行を非表示にしてから、非表示の div を持つ行を表示したくないので、表示したい trs を取得します。

于 2013-02-07T11:30:00.320 に答える
1

これを試して

$(function () {
  $(".divList").parent().parent().hide();
  $(".divList").parent().parent().slice(0, 5).show();
  $("#load").click(function (e) {
     e.preventDefault();
     $(".divList:hidden").parent().parent().slice(0, 5).fadeIn(1500);
  });
});

動的コントロールのIDと同様dlListItemsに、クライアント側で動的に変更できます（コントロールのネストによって異なります）。ですから、これはより良いアプローチだと思います。

于 2013-02-07T11:38:51.033 に答える