YouTip

-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI CRUD Application for Forms jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Create Drag and Drop Shopping Cart jEasyUI Create School Timetable jEasyUI Menu and Button jEasyUI Create Simple Menu jEasyUI Create Link Button jEasyUI Create Menu Button jEasyUI Create Split Button jEasyUI Layout jEasyUI Create Border Layout jEasyUI Create Complex Layout jEasyUI Create Accordion jEasyUI Create Tabs jEasyUI Dynamically Add Tabs jEasyUI Add Auto-play Tabs jEasyUI Create XP-style Left Panel jEasyUI DataGrid jEasyUI Convert HTML Table to DataGrid jEasyUI Get Selected Row Data jEasyUI Add Search Functionality jEasyUI Add Toolbar jEasyUI Create Complex Toolbar jEasyUI Set Frozen Columns jEasyUI Dynamically Change Columns jEasyUI Format Columns jEasyUI Set Sorting jEasyUI Custom Sorting jEasyUI Create Column Groups jEasyUI Add Checkboxes jEasyUI Custom Pagination jEasyUI Enable Row Editing jEasyUI Extend Editors jEasyUI Column Calculation jEasyUI Merge Cells jEasyUI Create Custom View jEasyUI Create Footer Summary jEasyUI Conditionally Set Row Background Color jEasyUI Create PropertyGrid jEasyUI Expand Row to Show Details jEasyUI Create SubGrid jEasyUI Display Massive Data jEasyUI Add Pagination Component jEasyUI Window jEasyUI Create Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Create Dialog jEasyUI Custom Dialog jEasyUI Tree jEasyUI Create Tree Using Markup jEasyUI Create Async Tree jEasyUI Add Nodes to Tree jEasyUI Create Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Tree Load Parent/Child Nodes jEasyUI Create Basic TreeGrid jEasyUI Create Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Add Pagination jEasyUI TreeGrid Lazy Load Nodes jEasyUI Form jEasyUI Create Async Submit Form jEasyUI Form Validation jEasyUI Create Tree ComboBox jEasyUI Format ComboBox jEasyUI Filter DataGrid in ComboBox jEasyUI Reference jQuery EasyUI Plugins jQuery EasyUI Extensions jQuery EasyUI DataGrid – Create SubGrid jQuery EasyUI DataGrid – Add Pagination Component Deep Dive Web Services Web Service Scripting Languages Web Design and Development Scripts Software Development Tools Programming Computer Science Programming Languages jQuery EasyUI DataGrid - Display Massive Data with Virtual Scroll View The virtual scroll feature of the datagrid can be used to display a large number of records without pagination. When scrolling the vertical scrollbar, the datagrid performs an AJAX request to load and refresh the existing records. The entire refresh process is smooth without flickering. In this tutorial, we will create a datagrid and apply the virtual scroll feature to load data from the server. Create DataGrid To apply the virtual scroll feature to the datagrid, the 'view' property should be set to 'scrollview'. Users should download the scrollview extension for the datagrid and include the scrollview file in the page header.                                                                                                                       

Inv No	Date	Name	Amount	Price	Cost	Note

Please note that we don't need to use the pagination property here, but the pageSize property is required so that when performing AJAX requests, the datagrid will fetch the specified number of records from the server. Server-Side Code datagrid27_getdata.php $page = isset($_POST['page']) ? intval($_POST['page']) : 1; $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 50; $items = array(); date_default_timezone_set('UTC'); for($i=1; $i sprintf("INV%04d",$index),         'date' => date('Y-m-d',time()+24*3600*$i),         'name' => 'Name' . $index,         'note' => 'Note' . $index,         'amount' => $amount,         'price' => sprintf('%01.2f',$price),         'cost' => sprintf('%01.2f',$amount*$price)     ); } $result = array(); $result['total'] = 8000; $result['rows'] = $items; echo json_encode($result); Download jQuery EasyUI Example jeasyui-datagrid-datagrid27.zip jQuery EasyUI DataGrid – Create SubGrid jQuery EasyUI DataGrid – Add Pagination Component ByteArk Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable. Configuration Guide ¥9.9 / Month Activate Now iFlytek Xingchen Coding Plan Includes free model call quota. DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform. Configuration Guide ¥3.9 / Month Activate Now Click here to share notes Category Navigation Python / Data Science AI / Intelligent Development Front-end Development Back-end Development Database Mobile Development DevOps / Engineering Programming Languages Computer Fundamentals XML / Web Service .NET Website Construction Advertisement jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI CRUD Application for Forms jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Create Drag and Drop Shopping Cart jEasyUI Create School Timetable jEasyUI Menu and Button jEasyUI Create Simple Menu jEasyUI Create Link Button jEasyUI Create Menu Button jEasyUI Create Split Button jEasyUI Layout jEasyUI Create Border Layout jEasyUI Create Complex Layout jEasyUI Create Accordion jEasyUI Create Tabs jEasyUI Dynamically Add Tabs jEasyUI Add Auto-play Tabs jEasyUI Create XP-style Left Panel jEasyUI DataGrid jEasyUI Convert HTML Table to DataGrid jEasyUI Get Selected Row Data jEasyUI Add Search Functionality jEasyUI Add Toolbar jEasyUI Create Complex Toolbar jEasyUI Set Frozen Columns jEasyUI Dynamically Change Columns jEasyUI Format Columns jEasyUI Set Sorting jEasyUI Custom Sorting jEasyUI Create Column Groups jEasyUI Add Checkboxes jEasyUI Custom Pagination jEasyUI Enable Row Editing jEasyUI Extend Editors jEasyUI Column Calculation jEasyUI Merge Cells jEasyUI Create Custom View jEasyUI Create Footer Summary jEasyUI Conditionally Set Row Background Color jEasyUI Create PropertyGrid jEasyUI Expand Row to Show Details jEasyUI Create SubGrid jEasyUI Display Massive Data jEasyUI Add Pagination Component jEasyUI Window jEasyUI Create Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Create Dialog jEasyUI Custom Dialog jEasyUI Tree jEasyUI Create Tree Using Markup jEasyUI Create Async Tree jEasyUI Add Nodes to Tree jEasyUI Create Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Tree Load Parent/Child Nodes jEasyUI Create Basic TreeGrid jEasyUI Create Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Add Pagination jEasyUI TreeGrid Lazy Load Nodes jEasyUI Form jEasyUI Create Async Submit Form jEasyUI Form Validation jEasyUI Create Tree ComboBox jEasyUI Format ComboBox jEasyUI Filter DataGrid in ComboBox jEasyUI Reference jQuery EasyUI Plugins jQuery EasyUI Extensions Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Large Model Multimodal (M... · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Bookmark Article Browsing History Clear All No records yet