You need to use a scroll bar to load the data drop-down list (for example, if there are 1000 data entries, the drop-down list will show only 100 entries. When you scroll down to the bottom, load the next 100 records, so loop) This requirement seems to be not very reasonable, because the pull-down of more data 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.
The 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 ('data connect error! '+ E + '');
}
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:
The 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
