This kind of requirement seems to be not very reasonable, because the pull-down of more data, whether from people or machines, is quite painful.
There is no way to operate as needed. Many related controls found on the internet feel a little huge, occupying a large amount of resources. There is no way to create a custom control for a semi-finished product by yourself for half a day and share it with you. If you have any experts, please give me more advice.
Requirement: a drop-down list of data loaded by AJAX scroll bars
Control name: Webcombo
Technologies used: ASP. NET (C #), jQuery, and ASP. NET generally process files (. ashx)
Implementation of the drop-down list: Use DIV to simulate the drop-down list, and input and image to simulate the drop-down box. The final result is as follows:
Let's analyze the jQuery plug-in writing.
JQuery AJAX is complete when Ajax is loaded.
Copy codeThe Code is as follows:
$. 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 ){
Optional (options.loadbox).css ('background-image', 'None ');
$ (Options. loadBox). append ('<span> data connect error! '+ E +' </span> ');
}
The rolling data loading of the scroll bar is completed by the onscroll event of the drop-down DIV. The core code is as follows:
Copy codeThe Code is as follows:
$ (Showbox). scroll (function (){
If (options. total = $ (this). children ("ul"). children ("li"). length)
Return;
Var scrolltop = $ (showbox). attr ('scrolltop ');
Var scrollheight = $ (showbox). attr ('scrollheight ');
Var shadowwheight = $ (showbox). attr ('clientheight ');
Var scroloffset = 20;
Optional (options.loadbox).css ('top', scrolltop );
If (scrolltop> = (scrollheight-(windowheight + scroloffset ))&&! Loading)
{
Loading = true;
$ (Options. loadBox). show ();
Options. total = $ (this). children ("ul"). children ("li"). length;
$. WebComboGetData (showbox, options, true );
}
});
The complete code of this plug-in can be found in the source file. File Name: simulateddl. js
In fact, this function can be implemented after the jQuery plug-in of rolling data loading by the scroll bar is completed, but it is encapsulated into the asp.net custom control by many rogue places in the project. The reason why semi-finished products are some of the user-defined custom controls that are not human-friendly, experts can see and give pointers. The specific code can be downloaded and viewed. I am not a master of controls, so I will not be moved out to make a mistake. If you have any questions or suggestions, you can discuss them.
Asp.net + jQuery scroll bar scroll load data control source code download