Data tables are one of the most fundamental and frequently used components in enterprise management systems. Almost all business scenarios such as employee management, customer ledgers, material inventory, and business statistics rely on standard table components to implement data management. Traditional development requires massive front-end and back-end coding to complete basic CRUD (Create, Read, Update, Delete) functions, resulting in long development cycles and difficult system maintenance. With Geejing WebBuilder, developers can quickly build standardized, editable, and configurable full-function data tables through low-code configuration, realizing one-stop capabilities including data query, paging, inline editing, batch deletion, data saving, and Excel export. This article presents a complete practical enterprise CRUD case based on employee information management, demonstrating the standard development process and core usage methods of WebBuilder data tables.
1. Case Overview
This practical case takes enterprise employee information management as the business scenario. Based on the native Wb.Grid component of Geejing WebBuilder, it builds a complete employee data management module. The implemented functions cover all common enterprise table requirements: conditional fuzzy query, backend paging display, inline cell editing, one-click new addition, batch deletion, unified data saving, and Excel data export. The entire module adopts a low-code configuration mode, with only a small amount of lightweight scripts to assist business logic, which greatly simplifies the traditional complex development process.
The case adopts a standard enterprise architecture: the front-end uses WebBuilder visual configuration to build pages and interactive logic, and the back-end uses unified server scripts to process database queries, additions, updates, and deletions. It realizes a complete closed loop of front-end and back-end data interaction, which can be directly applied to formal enterprise business systems.
2. Database Design Specification
To support standardized employee data management, the backend creates an independent employee data table to store basic personnel information, covering core fields such as employee ID, name, gender, birth date, department, position, salary, contact information, and account status. The table uses a custom unique primary key to ensure data uniqueness and supports timestamp automatic recording to facilitate subsequent data traceability and management.
3. Front-End Page Configuration & Core Functions
The front-end page consists of three core parts: query toolbar, operation toolbar, and editable data grid. The overall layout is compact and in line with enterprise backend system interaction specifications. All components follow WebBuilder’s modular development standards, with clear hierarchy and strong scalability.
3.1 Conditional Query Module
The system provides flexible conditional filtering capabilities. Developers configure text input boxes and drop-down selectors to support fuzzy query by employee name and precise filtering by department. After entering conditions and clicking the search button, the grid actively carries parameter requests to the backend and refreshes the data list in real time. The reset button supports one-click emptying of all query conditions and restoration of full data display, which facilitates users’ fast switching of query scenarios.
3.2 Standard CRUD Operation Toolbar
The built-in toolbar integrates all core business buttons and supports shortcut key operations to improve user efficiency:
- Create: Shortcut Ctrl+E, quickly add blank rows in the table, support inline input of new data
- Edit: Shortcut Ctrl+J, select a single row to activate cell editing state, support modification of all editable fields
- Delete: Shortcut Ctrl+D, support multi-row batch selection and one-click deletion, with secondary confirmation to prevent misoperation
- Save: Shortcut Ctrl+S, uniformly submit all newly added and modified data to the backend for persistent storage
- Export: One-click export of filtered table data into standard Excel files for offline archiving and data statistics
3.3 Editable Grid Core Configuration
The Wb.Grid component enables the editable attribute to implement full inline editing. Different types of columns are matched with dedicated editors: date columns use date pickers, numeric salary columns use numeric input boxes, and gender columns use drop-down selectors, which standardize user input and avoid irregular data. At the same time, the grid supports row number display, multi-row selection, column sorting, column width dragging and resizing, and frame display, with excellent interactive experience.
The component automatically identifies data changes: newly added rows carry the _isNew flag, and modified rows record field changes. When saving, the system automatically distinguishes new data and updated data to execute insert or update logic respectively, realizing unified batch processing.
3.4 Pagination & Data Rendering Optimization
The case adopts backend paging logic. The front-end page bar automatically transmits page number and page size parameters. The backend performs limit query calculation, returns the total data volume and current page data, and the front-end automatically renders the paging status. This method effectively reduces front-end rendering pressure and is suitable for large-volume enterprise data scenarios.
4. Back-End Business Logic Processing
The backend uniformly processes all business requests through custom server scripts, including four core logics: conditional paging query, batch data saving, batch data deletion, and Excel data export.
For data query, the backend dynamically splices SQL query conditions according to front-end transmission parameters, realizes fuzzy matching and precise filtering, and completes paging calculation and data return. For data saving, it automatically distinguishes new and modified data, generates unique primary keys for new employee data, and updates field information for modified data. For deletion, it supports batch ID array parsing and batch deletion of database data. For export, it organizes table headers and row data according to business rules, generates standard Excel files and realizes browser one-click download.
5. Practical Operation Process
After the module is deployed, users can complete all data management operations intuitively:
First, the page automatically loads all employee data after initialization. Users can filter target data through name and department conditions; second, click the new button to add blank rows and fill in employee information such as name, gender, and salary; third, select existing rows to modify field content inline; fourth, select multiple invalid data and click delete to clear records; finally, click save to synchronize all changes to the database, or click export to locally download the current data list.
6. Technical Advantages of WebBuilder Low-Code CRUD
- Extremely efficient development: No need to write a large number of native front-end and back-end codes. Standard CRUD functions can be completed through visual configuration and a small amount of scripts, and the development efficiency is increased by more than 80% compared with traditional development.
- Unified engineering specifications: All tables follow WebBuilder’s unified component specifications and event mechanisms, with standardized code and consistent page style, which is convenient for team collaboration and later maintenance.
- Powerful scalability: Based on the basic CRUD module, functions such as data import, row and column merging, main-sub table linkage, and data permission control can be quickly expanded to adapt to complex enterprise business scenarios.
- Stable data interaction: Built-in parameter verification and SQL placeholder anti-injection mechanism to ensure safe and stable front-end and back-end data interaction, meeting enterprise-level production environment requirements.
7. Conclusion
This employee management CRUD case fully verifies the powerful low-code development capability of Geejing WebBuilder. Relying on the native Wb.Grid component and matching toolbar and server scripts, it quickly builds a standard, stable and scalable enterprise data management module. The whole process abandons redundant traditional coding, realizes zero-code configuration for basic functions and low-code customization for complex logic, which can effectively help enterprises quickly complete the construction of various data management systems such as personnel management, asset ledgers, and business statistics, and accelerate the process of enterprise digital intelligent transformation.
Top comments (0)