Quick Development Guide: Basic Grid Usage on Geejing WebBuilder Low-Code Platform

In modern enterprise digital construction, low-code rapid development platforms have become the mainstream solution for quickly building business management systems. As the most fundamental and frequently used core component, the data Grid plays an essential role in data display, page layout, paging query, and interactive management. Traditional development requires independent coding for front-end pages, back-end interfaces, and database logic, which involves heavy workloads and long delivery cycles.
Geejing WebBuilder is a professional rapid development platform that provides out-of-the-box component encapsulation and integrated front-end and back-end mechanisms. Developers can complete standard data list pages through visual configuration and a small amount of server scripts, greatly improving the efficiency of enterprise business development. This article introduces the complete basic Grid development process based on the rapid development platform concept, helping developers quickly implement standard data display and paging functions.

1. Core Advantages of Grid in Rapid Development Platform

Configuration-driven development: Most basic functions such as table layout, column definition, and paging adaptation are completed through visual configuration, minimizing manual coding.
Unified front-end and back-end architecture: The platform encapsulates request processing, data parsing, and page rendering logic internally, allowing developers to focus only on business data and fields.
Built-in common capabilities: The Grid natively supports data paging, row selection, cell rendering, data refreshing, and empty state processing, covering most enterprise list requirements.
High scalability and reusability: Basic Grid templates can be reused in batches and quickly expanded into complex functions such as CRUD, linkage filtering, and data export. This article takes the common enterprise staff information ledger as the business scenario to realize the simplest Grid data display function. First, create a simple business database table for data docking:

2. Pre-Development Preparation

CREATE TABLE biz_staff_simple (
  staff_id VARCHAR(32) PRIMARY KEY,
  staff_name VARCHAR(50),
  gender VARCHAR(10),
  dept_name VARCHAR(50),
  entry_date DATE,
  status TINYINT DEFAULT 1
);

The overall development idea of the rapid development platform is standardized: build database tables → write server-side data query scripts → configure front-end Grid components → realize automatic data rendering and paging.

3. Front-End Grid Visual Configuration

Based on the modular development specification of the rapid development platform, build a lightweight Grid page. The page only includes a view container, a data Grid, and a paging bar, realizing the simplest data list display. The complete XWL configuration is as follows:

module
{
  "cid":"simpleGridQuickDemo",
  "cls":"Wb.Module",
  "properties":{"cid":"simpleGridQuickDemo"},
  "events":{
    "initialize":"Wb.apply(app,{\n  onLoad(){\n    app.staffGrid.load();\n  }\n});"
  },
  "items":[
    {
      "cls":"Wb.Viewport",
      "properties":{"cid":"mainView","layout":"fit","autoScroll":true},
      "items":[
        {
          "cls":"Wb.Grid",
          "properties":{
            "cid":"staffGrid",
            "text":"Staff Information List",
            "url":xpath + "/actions&xaction=getStaffList",
            "pageSize":10,
            "frame":true,
            "resizable":true,
            "height":"100%"
          },
          "items":[
            {
              "cls":"Wb.Array",
              "properties":{"cid":"columns"},
              "items":[
                {"cls":"Wb.Column","properties":{"cid":"colNum","rowNum":true,"text":"No.","width":"4em"}},
                {"cls":"Wb.Column","properties":{"cid":"colId","text":"Staff ID","fieldName":"staff_id","width":"10em"}},
                {"cls":"Wb.Column","properties":{"cid":"colName","text":"Name","fieldName":"staff_name","width":"8em"}},
                {"cls":"Wb.Column","properties":{"cid":"colGender","text":"Gender","fieldName":"gender","width":"6em"}},
                {"cls":"Wb.Column","properties":{"cid":"colDept","text":"Department","fieldName":"dept_name","width":"12em"}},
                {"cls":"Wb.Column","properties":{"cid":"colDate","text":"Entry Date","fieldName":"entry_date","width":"12em"}},
                {
                  "cls":"Wb.Column",
                  "properties":{
                    "cid":"colStatus",
                    "text":"Status",
                    "fieldName":"status",
                    "width":"8em",
                    "render":"return value===1?'<span style=color:green>Normal</span>':'<span style=color:red>Resigned</span>';"
                  }
                }
              ]
            },
            {
              "cls":"Wb.PagingBar",
              "properties":{"cid":"pageBar","showTotal":true}
            }
          ]
        }
      ]
    }
  ]
}

After the module is initialized, the Grid automatically calls the back-end interface to load data, realizing zero-manual-intervention page initialization.

4. Server-Side Script Data Interaction

One of the core features of the rapid development platform is to abandon traditional back-end project engineering development and use built-in server scripts to complete database queries and data encapsulation. The script runs on the back-end sandbox, safely processes SQL logic, and provides standard data sources for the Grid.

let xaction = Params.xaction;

if(xaction === "getStaffList"){
  // Receive platform paging parameters
  let page = parseInt(Params.page || 1);
  let pageSize = parseInt(Params.pageSize || 10);

  // Count total data
  let totalData = Wb.db.query("SELECT COUNT(*) AS total FROM biz_staff_simple")[0];
  let total = totalData.total;

  // Paging query data
  let list = Wb.db.query(
    "SELECT staff_id,staff_name,gender,dept_name,entry_date,status FROM biz_staff_simple ORDER BY entry_date DESC LIMIT ? OFFSET ?",
    [pageSize,(page-1)*pageSize]
  );

  // Return standard grid format
  return {
    total: total,
    data: list
  };
}

The Grid component of the rapid development platform fixedly accepts the return format of {total, data}, which can automatically adapt to paging rendering without manual data processing by developers.

5. Common Basic Grid Operations

The rapid development platform encapsulates common Grid interaction methods, which can be directly called through front-end scripts to quickly realize business interactions:

// Refresh grid data
app.staffGrid.load();

// Load data with filter parameters
app.staffGrid.load({params:{dept_name:"Technology Department"}});

// Get selected single row data
let row = app.staffGrid.selection;
if(row){
    Wb.tip("Selected Staff: " + row.staff_name);
}

// Clear grid data
app.staffGrid.clear();

6. Development Specifications for Rapid Development Platform

Field consistency: The fieldName of the front-end column must be consistent with the SQL query field to ensure accurate data mapping.
Standard return format: All paging queries must return total quantity and data array to ensure normal paging components.
Secure SQL writing: Use placeholder syntax for database queries to prevent SQL injection risks.
Template reuse: The basic Grid template can be reused for various business ledgers to improve overall project development efficiency.

7. Conclusion

The Grid component based on the Geejing WebBuilder rapid development platform realizes ultra-fast construction of enterprise data lists through visual configuration and lightweight server scripts. It completely simplifies the cumbersome process of traditional development, and can stably implement core capabilities such as data display and paging query. As the underlying basic component of low-code rapid development, Grid can be continuously expanded into complex businesses such as data addition, deletion, modification, export, and master-slave table linkage, covering most enterprise management system development scenarios.

DEV Community