Table Component Supporting Editable Columns and Adding/Deleting Rows

Add-ons

2026-07-26 04:19 3 次浏览 • 0 次下载 5.1KB

Table Component Supporting Editable Columns and Adding/Deleting Rows

Plugin Description: A component developed with jQuery that dynamically generates tables.

Introduction:

This is a jQuery-based table plugin that dynamically generates tables from JSON data after a series of configuration options are specified. The plugin supports two display modes: "Horizontal Sequence Display" and "Vertical Sequence Display". Horizontal Sequence Display supports editing specified columns and adding or deleting rows in specified column types. It also returns the latest updated JSON data in real time. Vertical Sequence Display only supports editing columns of specified types.

Usage:

1	`$(".container").tableRender();`

Parameter Description:

firstRowText: "Station Sequence Number", // Content of the td where the first row and first column intersect
    captions: [ // Configure the table header
        {
            title: "Branch Company:",
            content: "Passenger Terminal 4",
            style: {
                fontSize: 14,
                fontFamily: "Microsoft YaHei"
            }
        }, {
            title: "File Number:",
            content: "0001",
            style: {
                fontSize: 14,
                fontFamily: "Microsoft YaHei"
            }
        }
    ],
    mapObj: { // Field mapping
        "name": "Downstream Station Name",
        "stationSpacing": "Station Distance",
        "cumKil": "Cumulative Kilometers",
        "queueKil": "Station-to-Station Kilometers",
        "valuationKil": "Fare Calculation Distance",
        "vadiCenterKil": "Sub-center Fare Calculation Distance",
        "ticketPrice": "Fare",
        "stationNum": "Station Position Number",
        "transitTime": "Passing Time",
        "remarks": "Remarks"
    },
    set: { // Configuration
        head: { // Table header styles
            backgroundColor: '#dddddd'
        },
        type: "transverse", // Table style: vertical【Vertical Order】 | transverse【Horizontal Order】
        editRow: ["stationSpacing", "queueKil", "transitTime"], // Editable rows. Field values should be data field names.
        addRow: ["transitTime"], // Rows that can be added/deleted【Only available in transverse mode】
        mergeTd: ["remarks"] // Merged columns【Only available in transverse mode】
    },
    data: { // Data: dataArray contains the data for each column
        dataArray: [ // Data
            {
                "name": "Xierqi Street",
                "stationSpacing": "0.00",
                "cumKil": "0.00",
                "queueKil": "0.00",
                "valuationKil": "0.00",
                "vadiCenterKil": "0.00",
                "ticketPrice": "0.00",
                "stationNum": "00001",
                "transitTime": "6:45",
                "remarks": "<span style='margin-right: 20px;font-size: 12px;'>Average Route Length: (61.30) km</span><span style='margin-right: 20px;font-size: 12px;'>Fare Calculation Route Length: (51.57) km</span><span style='margin-right: 20px;font-size: 12px;'>First Station Operating Time: 6:45</span>"
            },
            ...
            // You can also add a full-width tr at the end【Only available in transverse mode】
            addTr: ["<span style='margin-right: 20px;font-size: 12px;margin-left: 20px;'>Branch Company Prepared By: Zhang San</span><span style='margin-right: 20px;font-size: 12px;'>Branch Company Reviewer: Li Si</span>"]
        },
        editCallback: function(data) { // Automatically trigger a callback after editing and return the latest data (only field data from dataArray that is not HTML code is returned)
            console.log(data);
        }