As the core data presentation component of enterprise low-code systems, data Grid (table) is widely used in staff management, business ledger, data statistics, asset inventory and other core scenarios. Most traditional low-code grid components have single functions, weak customization capabilities, and lack support for complex business requirements such as multi-level headers, cell custom rendering, row dragging, data editing, and column freezing.Geejing WebBuilder provides a highly encapsulated, scalable and enterprise-level Wb.Grid component, which integrates local data rendering, remote data loading, editable processing, interactive customization, data statistics and other all-round capabilities. Based on the official Grid demo source code, this article systematically sorts out the core functions, configuration methods, practical development skills and common business implementation schemes of Geejing WebBuilder Grid components, helping developers quickly master advanced grid development and efficiently implement complex enterprise data table scenarios.
The Wb.Grid component of Geejing WebBuilder follows the engine’s standardized modular development specification. All grid instances are mounted in Wb.Viewport as independent functional units, supporting flexible combination with menus, buttons, toolbars and other components. The component adopts a highly scalable architecture, which can realize diversified data rendering and interactive logic through simple attribute configuration and lightweight custom scripts. Different from traditional table components that rely heavily on manual coding, Geejing WebBuilder Grid realizes zero-code configuration for basic functions and low-code customization for complex functions, which greatly reduces the development difficulty of enterprise data tables while ensuring powerful expansion capabilities.
1. Basic Grid Construction and Data Loading Modes
Geejing WebBuilder Grid supports two core data loading modes: remote backend data loading and local custom data rendering, which adapt to different business scenario requirements. Remote loading is suitable for formal business scenarios requiring database linkage, while local data is applicable for demo display, static data statistics and temporary business tables.
For remote data loading, developers only need to configure the url attribute of the Grid component to specify the backend interface address. The engine will automatically complete interface request, data parsing, page rendering and other full-process operations. Combined with the built-in paging bar component Wb.PagingBar, it realizes standard front-end and back-end cooperative paging. The core configuration code is standardized and concise, which does not require manual writing of request and rendering logic, and effectively avoids interface request errors and data rendering confusion caused by inconsistent coding specifications.
Local data rendering relies on the localData attribute to import custom structured data. Developers can define field information such as employee code, name, gender, salary and email in the form of JSON arrays. The engine can automatically identify data types and complete table rendering. This mode is flexible and efficient, and is very suitable for rapid development of internal statistical tables and demo pages. In actual development, developers can flexibly switch the two loading modes according to business requirements to maximize development efficiency.
2. Core Column Configuration and Advanced Custom Rendering
Column configuration is the core part of Grid component development. Geejing WebBuilder supports rich column attribute customization and multi-level nested headers, breaking the limitation of traditional single-layer table headers. Developers can create multi-level column structures through nested Wb.Column components, realizing grouped display of complex business fields, such as secondary grouping of personal information fields including name and gender, which makes the table structure more hierarchical and in line with enterprise data display specifications.
In terms of basic column functions, the Grid component supports core practical configurations such as column freezing, width adjustment, sorting, resizing and dragging. The freeze attribute can fix key columns such as serial number and code on the left side of the table to avoid being hidden by horizontal scrolling; resizable allows users to drag and adjust column widths adaptively; columnsSortable and sorters support custom sorting rules for single or multiple fields, realizing automatic sorting of data such as salary and employee code.
Custom cell rendering is the key to realize personalized table styles and business logic. The Grid component provides a universal render script interface, allowing developers to customize cell styles, structures and content through lightweight JS scripts. In practical applications, developers can achieve diversified effects: setting gradient background for name columns according to salary data, distinguishing male and female genders with different color blocks, marking elder employees with special styles according to birth date, and adding custom icons and text tags to cells. This flexible rendering capability makes the traditional monotonous data table have visual differentiation and business attribute identification capabilities.
3. Interactive Function Development: Checkbox, Toggle and Custom Link
Geejing WebBuilder Grid integrates a variety of built-in interactive components, which can quickly realize data selection, state switching and jump interaction without custom development. The component supports multiple checkbox modes, including ordinary check boxes, read-only check boxes and full-selection check boxes, adapting to batch data selection, state viewing and permission control scenarios.
The custom Toggle switch column can realize real-time switching of data status. By binding the change event, developers can synchronously update row data and linkage table header selection status when the switch is toggled, realizing closed-loop interactive logic. In addition, the Grid supports custom link column development. Developers can render custom clickable links in cells through rendering scripts, and match the global Grid click event to realize personalized pop-up prompts and business jumps after clicking the link, which is widely used in data viewing, file downloading and detail query scenarios.
4. Batch Operation and Editable Grid Development
For enterprise business scenarios requiring data editing and batch management, Geejing WebBuilder provides a full set of editable Grid solutions. By enabling the editable attribute, the table supports online editing of cell data, and matches the built-in toolbar to realize one-click addition, editing, deletion and saving of data records.
The Grid component is equipped with perfect keyboard shortcut adaptation, supporting Ctrl+E for new addition, Ctrl+J for editing, Ctrl+D for deletion, Ctrl+S for saving, which greatly improves the operation efficiency of business personnel. At the same time, it supports custom editor types. According to different field attributes such as string, number, date and Boolean, developers can match different editing controls to ensure the standardization and accuracy of data input. The data saving function supports custom backend interface linkage, which can synchronize edited local data to the database to complete persistent storage.
5. Advanced Features: Data Merging, Row Dragging and Pagination Adaptation
Geejing WebBuilder Grid covers high-end enterprise-level table functions that are difficult to implement in traditional low-code platforms, including row and column merging, free dragging of rows, and diversified pagination modes. The column merging function can merge cells with the same field content according to business rules, which is suitable for report statistics and classified display scenarios; the row dragging function supports free dragging and sorting of table rows, and developers can customize dragging permission rules through scripts to limit illegal dragging behaviors.
In terms of pagination adaptation, the Grid integrates three core modes: front-end local pagination, database back-end pagination and no pagination. Local pagination is suitable for small batch static data display, back-end pagination is used for large-scale enterprise data scenarios to reduce front-end rendering pressure, and no pagination mode realizes full data scrolling display, which fully meets the differentiated needs of different business scenarios.
6. Event Mechanism and Custom Business Logic Development
The powerful event system is an important support for the flexible expansion of Grid components. Geejing WebBuilder Grid provides rich built-in events, including row double-click, cell click, before sorting, row dragging and dropping, and before editing. Developers can inject custom business logic through event scripts to realize scenario-based personalized functions.
Common practical event applications include: popping up detailed data prompts when double-clicking rows, identifying clicked columns and row data through click events to realize targeted business processing, customizing data sorting rules through the beforesort event, and limiting editing permissions through the beforeedit event. All event scripts follow the engine’s unified specification, with simple syntax and high reusability, which can be directly applied to similar business tables, greatly improving the standardization of project development.
7. Enterprise Practical Development Specifications and Optimization Suggestions
In the actual development of enterprise projects, the standardized development of Grid components can effectively improve project stability and maintainability. First, all columns and components must configure unique cid identifiers to avoid rendering and interaction abnormalities caused by duplicate IDs. Second, distinguish business scenarios to select data loading modes, use back-end remote loading for formal business data, and local data for demo and static pages. Third, reasonably use column freezing, sorting and statistical functions to optimize user operation experience and data viewing efficiency.
In terms of performance optimization, for large-scale data tables, priority should be given to back-end pagination to avoid front-end rendering lag; reasonably use custom rendering scripts to reduce redundant DOM operations; reuse event scripts and column configuration rules to ensure the unity of all system table styles and functions. In addition, the built-in export function of the Grid can be configured with custom file names and titles to realize one-click export of enterprise standardized data reports, covering daily office and data archiving scenarios.
Conclusion
The Wb.Grid component of Geejing WebBuilder is a full-functional, high-scalability enterprise-level data table solution. It not only covers all basic table capabilities such as data loading, sorting and pagination, but also supports advanced customized functions such as multi-level headers, personalized cell rendering, online editing, row dragging and data merging. Through standardized attribute configuration and lightweight script development, developers can quickly build various complex enterprise data tables, covering staff management, business statistics, report display, data editing and other core scenarios. Mastering the Grid component development skills is the key to efficiently building enterprise low-code business systems, and can greatly improve the refinement and practicability of low-code project development.
Top comments (0)