データをロードするための asp.net+jquery スクロールバードロップダウンコントロール-C#.Net チュートリアル-php.cn

データをロードするための asp.net+jquery スクロールバードロップダウンコントロール

高洛峰

リリース： 2017-01-11 10:05:26

オリジナル

1636 人が閲覧しました

そのような要求は、私にとってはあまり合理的とは思えません。なぜなら、データが多すぎるため、人間や機械がそれを操作するのはさらに困難だからです。

需要があるから止めることはできず、需要に応じて運営するしかありません。インターネット上で関連するコントロールをたくさん見つけましたが、どれも少しかさばり、多くのリソースを消費するように思えました。中途半端なカスタムコントロールを作成するのに半日も費やすことはできませんので、それを見た専門家がいる場合は、アドバイスをお願いします。

要件: データのドロップダウンリストをロードするための AJAX スクロールバー
コントロール名: Webcombo
使用されるテクノロジ: ASP.NET (C#)、jQuery、ASP.NET 一般処理ファイル (.ashx)

の詳細な実装ドロップダウンリスト: DIV Simulate ドロップダウンリスト、入力、およびイメージを使用して、ドロップダウンボックスをシミュレートします。最終的な結果は以下の通りです

データをロードするための asp.net+jquery スクロールバードロップダウンコントロール

まずはjQueryプラグインの書き方を分析してみましょう
AJAXの読み込みはjQuery Ajaxによって完了します

$.ajax({ 
type: options.getMethod, 
url: options.jsonUrl, 
data: params, 
success: function(data){ 
if(isScroll) 
$.CreateListItem(showbox,data,options); 
else 
$.CreateBox(showbox,data,options); 
}, 
complete:function(){ }, 
error:function(e){ 
$(options.loadBox).css(&#39;background-image&#39;,&#39;none&#39;); 
$(options.loadBox).append(&#39;<span>data connect error!&#39;+e+&#39;</span>&#39;); 
}

ログイン後にコピー

スクロールバーのスクロールデータの読み込みはドロップのonscrollイベントによって完了します-down DIV. 具体的なコアコードは次のとおりです:

$(showbox).scroll(function(){ 
if(options.total==$(this).children("ul").children("li").length) 
return; 
var scrolltop=$(showbox).attr(&#39;scrollTop&#39;); 
var scrollheight=$(showbox).attr(&#39;scrollHeight&#39;); 
var windowheight=$(showbox).attr(&#39;clientHeight&#39;); 
var scrolloffset=20; 
$(options.loadBox).css(&#39;top&#39;,scrolltop); 
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))&&!loading) 
{ 
loading=true; 
$(options.loadBox).show(); 
options.total=$(this).children("ul").children("li").length; 
$.WebComboGetData(showbox,options,true); 
} 
});

ログイン後にコピー

データをロードするための asp.net+jquery スクロールスクロールバードロップダウンコントロールの詳細については、PHP 中国語 Web サイトに注目してください。