데이터가 너무 많아서 사람이 하든 기계가 하든 끌어내리는 게 더 고통스럽기 때문에 이런 요구는 그다지 합리적이지 않은 것 같습니다.
수요가 많아서 방법이 없어 수요에 따라서만 운영을 할 수 있습니다. 인터넷에서 관련 컨트롤을 많이 찾았지만 모두 약간 부피가 크고 리소스를 많이 차지해 보였습니다. 반나절만에 완성된 커스텀 컨트롤을 만들 수는 없으니 보신 전문가님들 계시면 조언 부탁드립니다.
요구 사항: 데이터 드롭다운 목록을 로드하기 위한 AJAX 스크롤 막대
컨트롤 이름: Webcombo
사용 기술: ASP.NET(C#), jQuery, ASP.NET 일반 처리 파일(. ashx)
드롭다운 목록의 구체적인 구현: DIV를 사용하여 드롭다운 목록을 시뮬레이션하고 입력 및 그림을 사용하여 드롭다운 상자를 시뮬레이션합니다. 최종 결과는 아래와 같습니다
먼저 jQuery에서 플러그인을 작성하는 방법을 분석해 보겠습니다
jQuery Ajax로 AJAX 로딩이 완료되었습니다
$.ajax({
유형: 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('Background-image','none');
$(options.loadBox).append('데이터 연결 오류!' e ''); >}
스크롤 막대 스크롤 데이터는 드롭다운 DIV의 onscroll 이벤트에 의해 완료됩니다. 구체적인 핵심 코드는 다음과 같습니다.
$(showbox).scroll(function(){
if(options.total ==$(this).children("ul").children("li ").length)
return
var scrolltop=$(showbox).attr('scrollTop')
var scrollheight=$(showbox).attr('scrollHeight');
var windowheight=$(showbox).attr('clientHeight')
var scrolloffset=20
$(options.loadBox). css('top',scrolltop);
if(scrolltop>=(scrollheight-(windowheight scrolloffset))&&!loading)
{
loading=true;
$(options.loadBox). show();
options.total=$(this).children( "ul").children("li").length
$.WebComboGetData(showbox,options,true);
});
플러그인의 전체 코드는 소스 파일, 파일 이름:simulatedl.js에서 찾을 수 있습니다.
실제로 데이터 스크롤 및 로드를 위한 jQuery 플러그인은 스크롤 막대를 사용하면 이미 이 기능을 구현할 수 있습니다. 이는 Rogue가 이를 asp.net 사용자 정의 컨트롤에 캡슐화하는 데 사용되는 곳이 많기 때문입니다. 반제품이라고 하는 이유는 커스텀 컨트롤이 다소 비인간적이기 때문인데, 전문가들이 보면 이를 지적하게 됩니다. 구체적인 코드는 다운로드 후 볼 수 있습니다. 저는 제어 제작의 달인이 아니므로 여기서는 부끄러움을 표시하지 않겠습니다. 질문이나 제안이 있는 친구는 토론을 위해 이를 제기할 수 있습니다.
asp.net jQuery 스크롤 막대 스크롤 로딩 데이터 제어 소스 코드 다운로드